HTML code : simple login form

Here we are going to create a login page using html form element. We will also use CSS for inlcude style element in login page.. You must have the basic knowledge of html language to understand the given program. You can learn HTML from our HTML Tutorial.

You must have the basic knowledge of html language to understand the given program. Please see our HTML Tutorial.

Click the Button to See Demo


login_form

HTML code to create simple login form

login.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="login.css">
</head>
<body>
<section class="loginform lf">
<form name="login" action="welcome.html" method="get" accept-charset="utf-8">
<ul>
<li>
<label for="usermail">Email-id</label>
<input type="email" name="useremailid" placeholder="enter your email-id" required>
</li>
<li>
<label for="password">Password</label>
<input type="password" name="password" placeholder="enter your password" required></li>
<li>
<input type="submit" value="Login">
</li>
</ul>
</form>
</section>
</body>
</html>



login.css
html {
font-size:15pt;
}
label {
display: block;
color: white;
}
.lf:before,
.lf:after {
content: "";
display: table;
}
.lf:after {
clear: both;
}
.lf {
*zoom: 1;
}
:focus {
outline: 0;
}
.loginform {
width: 410px;
margin: 100px auto;
padding: 50px;
background-image: url("w2.jpg" alt="login_form");
border-radius: 10px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
border: 1px solid rgba(0, 0, 0, 0.3);
}
.loginform ul {
padding: 0;
margin: 0;
}
.loginform li {
display: inline;
float: left;
}
.loginform input:not([type=submit]) {
padding: 5px;
margin-right: 10px;
border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 5px;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) ;
}
.loginform input[type=submit] {
border: 1px solid rgba(0, 0, 0, 0.3);
background: #64c8ef; /* Old browsers */
background: -moz-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64c8ef), color-stop(100%,#00a2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #64c8ef 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #64c8ef 0%,#00a2e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #64c8ef 0%,#00a2e2 100%); /* IE10+ */
background: linear-gradient(to bottom, #64c8ef 0%,#00a2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */
color: white;
padding: 5px 15px;
margin-right: 0;
margin-top: 15px;
border-radius: 3px;
text-shadow: 1px 1px 0px rgba(0, 0, 0,
}
Click the Button to See Demo


Code Explanation

You can see here the code is available in two parts: login.html and login.css.. Here login.html is a main html document which contains html form elements and other html code and login.css is a external css stylesheet which is embedded in the html file to decorate the login form.

Let's talk about the login.html.In the given login.html code :



  • There are two html form elements label and textfield. label is used to give the information about the other form element and here are two types of textfield which are email and password. email type text-field will take tha value which are present in email form (i.e ...@email.com) and another is of type password which will take the value in mask form as (*****).
  • The input element have two attributes that are placeholder and required. The placeholder attribute allows us to give initial text in the input that will disappear when it is in a focus state or being filled in.
  • login_form

  • The required attribute will set the field to be mandatory and thus should not be left blank before the form is submitted, so when the user hasn't filled in the field, the following error will appear.
  • login_form

  • The first input element is of type email which is actually a new field type element that is added in HTML5. The email type will give basic email address validation in the field. When the user doesn't fill the field with an email address, the browser will show the following message:
  • login_form

  • The second part is login.css which will set the design for login form. This code will set the background for login form, remove the default padding and margin in ul tag that wraps the entire inputs and floats the li to the left, so the inputs will be displayed horizontally, side by side and also set the design for text-fields, labels and submit button.
  • That's it..