Mpemba Tech : Programming

How to create a simple Login form using HTML and CSS

We will create this login form in three separate steps, the first step will deal with the HTML Markup, while the second step will focus on the positioning of the elements, finally the third step will focus the styling of the different elements. Next week we will show you how to add a sign up page to your login form so be sure to check back.

STEP 1: THE HTML MARKUP

The first thing we will add is the HTML part, this part will create the actual login form, and will consist of a container, a form as well as some inputs.

<div id="container">       
<form>
<label for="username">Username:</label>
 <input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="lower">
<input type="checkbox"><label for="checkbox">Keep me logged in</label>
<input type="submit" value="Login">
</div><!--/ lower-->
 </form>
</div>

If you entered the code above correctly then your login form should now look like this:

So now that we have gotten this far let’s start styling the different input areas, we will do that by adding the following code:

/* Basics */
html, body {   
 width: 100%;   
height: 100%;   
font-family: "Helvetica Neue", Helvetica, sans-serif;   
color: #444;   
-webkit-font-smoothing: antialiased;    background: #f0f0f0;
}

If you added this correctly your login form should now look like this:

STEP 2: POSITIONING THE ELEMENTS

Now that we have our actual login form created let us start with the styling of the form, the first thing we will do is specify the basics such as font color and so forth, then we will position our login form in the center of the page.

#container {
position: fixed;
width: 340px;
height: 280px;
top: 50%;
left: 50%;
margin-top: -140px;
margin-left: -170px;
}

If you did this correct your form should now look like this:

You must agree that this does look a little wonky, therefore we are going to add some structural style to our login form, first we will make sure everything isn’t squashed together on the first line, we will do this by adding the following code:

form {
    margin: 0 auto;
    margin-top: 20px;
}
label {
    color: #555;
    display: inline-block;
    margin-left: 18px;
    padding-top: 10px;
    font-size: 14px;
}

If you entered the code above correctly then your login form should now look like this:

So now that we have gotten this far let’s start styling the different input areas, we will do that by adding the following code:

p a {
    font-size: 11px;
    color: #aaa;
    float: right;
    margin-top: -13px;
    margin-right: 20px;
}
p a:hover {
    color: #555;
}
input {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    outline: none;
}
input[type=text],
input[type=password] {
    color: #777;
    padding-left: 10px;
    margin: 10px;
    margin-top: 12px;
    margin-left: 18px;
    width: 290px;
    height: 35px;
}

If you entered the code correctly you should immediately see the difference, your login form should now look like this:

Finally lets make the bottom look a little more stylish, we will do that by adding the following code:

#lower {
    background: #ecf2f5;
    width: 100%;
    height: 69px;
    margin-top: 20px;
}
input[type=checkbox] {
    margin-left: 20px;
    margin-top: 30px;
}
.check {
    margin-left: 3px;
}
input[type=submit] {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 80px;
    height: 30px;
}

Now if you did everything correctly your login form should look like this:

STEP 3: STYLING THE ELEMENTS

Now that we have positioned the elements as we wanted it is time to make them more beautiful. We will do this by giving the container rounded corners and a box shadow for depth. Remember since we are going to style the container you need to add the code to that area, the code you need to enter for this is the following:

background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

Your whole container should now look like this:

#container {
    position: fixed;
    width: 340px;
    height: 280px;
    top: 50%;
    left: 50%;
    margin-top: -140px;
    margin-left: -170px;
 background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

If you did everything correct your login form should now look like this:

The next thing we will do is add a similar rounded look to the inputs, we will add the following code to the password

border: 1px solid #c7d0d2;
    border-radius: 2px;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
}

So the whole input password code should look like this:

input[type=password] {
    color: #777;
    padding-left: 10px;
    margin: 10px;
    margin-top: 12px;
    margin-left: 18px;
    width: 290px;
    height: 35px;
    border: 1px solid #c7d0d2;
    border-radius: 2px;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
}

If you did that correct you should now see the following:

As you can see in the image above this little bit of code stylized the whole input field.

The next thing we are going to do is to make the login button look much nicer, we will do this by adding the following code to the submit section:

font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #acd6ef; /*IE fallback*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    border-radius: 30px;
    border: 1px solid #66add6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
}

Now the whole code for this area should look like this:

input[type=submit] {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 80px;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #acd6ef; /*IE fallback*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    border-radius: 30px;
    border: 1px solid #66add6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
}

If you do everything correctly then so far this is what your login form should look like:

Next, to aid user feedback, we could do with some hover and active states, we need to add the following text to the p a { area:

  -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}

Now the whole code for that area should read:

p a {
    font-size: 11px;
    color: #aaa;
    float: right;
    margin-top: -13px;
    margin-right: 20px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;

The input password area needs the following

box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
input[type=text]:hover,
input[type=password]:hover {
    border: 1px solid #b6bfc0;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
input[type=text]:focus,
input[type=password]:focus {
    border: 1px solid #a8c9e4;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}

And finally at the bottom of the text you need to insert the following code:

input[type=submit]:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}
input[type=submit]:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
    background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
    background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}

This should result in the following:

That’s it for now, below you can find the demo as well as download the source! Next week we will show you how to add a signup page to your login form.

Programming

How to create a simple Login form using PHP

MPEMBA at 9:13 AM 0

Image result for how to create simple login form in php

Login is a very important part of any website, from securing contents from prying eyes to tracking visitors on your website. This tutorial is a simple login form for a website.

Firstly you create "login.php" like this

Code:

<?php
session_start();

// This starts the session which is like a cookie,

but it isn't saved on your hdd and is much more secure.

mysql_connect("localhost","DATABASE USER HERE","PASSWORD");

// Connect to the MySQL server

mysql_select_db("login");

// Select your Database

if(isset($_SESSION['loggedin']))
{
die("You are already logged in!");

// That bit of code checks if you are logged in or not,

and if you are logged, you can't log in again!

}

if(isset($_POST['submit']))
{
$name = mysql_real_escape_string($_POST['username']);

// The function mysql_real_escape_string() stops hackers!

$pass = mysql_real_escape_string($_POST['password']);

$mysql = mysql_query("SELECT * FROM users WHERE name = '{$name}'

AND password = '{$pass}'");

//get all users in the database with that username and password.

if(mysql_num_rows($mysql) < 1)
   {
     die("Password was probably incorrect!");
   }

//check number of rows the MySQL query was less than 1,

so if it couldn't find a row,

the password is incorrect or the user doesn't exist!

$_SESSION['loggedin'] = "YES";

// Set it so the user is logged in!

$_SESSION['name'] = $name;

// Make it so the username can be called by $_SESSION['name']

die("You are now logged in!");

// it doesn't show the login form after you are logged in!

}

echo "<form type='login.php' method='POST'>

Username: <br>
<input type='text' name='username'><br>
Password: <br>
<input type='password' name='password'><br>
<input type='submit' name='submit' value='Login'>
</form>";

//the form to enter your password and username to login.

After you have put that code, run this query on your database:

Code:


CREATE TABLE `users` (
`id` BIGINT( 60 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 50 ) NOT NULL ,
`password` VARCHAR( 32 ) NOT NULL ,
`date` INT( 32 ) NOT NULL ,
`email` VARCHAR( 80 ) NOT NULL
);

And then add all of the users you wish to the table!
--------------
To integrate this within your site, you can do the following at the top of your site.
This Code Like Lock.php or This Code Using to Lock Your Webpages

Code:

<?php
session_start(); // NEVER forget this!
if(!isset($_SESSION['loggedin']))
{
    die("To access this page, you need to <a href='login.php'>LOGIN</a> "); 

// Make sure they are logged in!
} 
// What the !isset() code does, is check to see if the variable $_SESSION['loggedin'] is there, and if it isn't it kills the script telling the user to log in!
?>

If you want display your user name on your site use this code:
Code

<?php echo "Hello there, {$_SESSION['name']}! Welcome to my site!"; ?>

Logout.php:

Code

<?php
session_start();
if(isset($_SESSION['name']))
  unset($_SESSION['loggedin']);
  header('Location: index.php');
?>
or
<?php
    session_start();
    $_SESSION = array();
    session_destroy();
?>

Pages

MagPress Blogger Template

How to create a simple Login form using HTML and CSS

STEP 1: THE HTML MARKUP

STEP 2: POSITIONING THE ELEMENTS

STEP 3: STYLING THE ELEMENTS

How to create a simple Login form using PHP

Subscribe email

Recent Comments

Pages

Pages

How to create a simple Login form using HTML and CSS

STEP 1: THE HTML MARKUP

STEP 2: POSITIONING THE ELEMENTS

STEP 3: STYLING THE ELEMENTS

How to create a simple Login form using PHP

Subscribe via Email