Header Ads Widget

How to create, design and validate login form

My codding spot October 02, 2021

Every  website is incomplete without a login page. Login provides privacy to the user. So no one can access user data.

This post is about how to create a login form with HTML, design it with CSS, and validate it with constraints.

HTML structure of the login form

The login form requires two fields: username or user_ id and password and submit button. Two links most probably included in the login form, one for forgetting the password and the second is for signing up.

Here I used the <table> tag to give proper alignment to all elements. Look at the following output. All the fields are perfectly aligned.

Html structure of login form
Html structure of login form 


Designing login form with CSS 

 <div> element added to creating a box. To center a table right and left margins are set as auto. You can split the caption from a table by setting the position property of the caption to absolute. 

Login form
Login form 




Now, apply CSS styles to input fields.

You can also change width, height, padding, colors, backgrounds, borders, etc...
You can styles input fields by using input keywords or input attribute selectors. To apply CSS styles to a specific input type specify the selector as mentioned below.

input[type="type of input"] 

The input field matches the type of input specified in the “[]” bracket.

The type can be all the input types for example here in CSS styles, input [type=”email”], input [type=”password”], and input [type=”submit”] select email, password, and submit types respectively.

Making username and password fields focused 

When you click on the input field like text, a blue or yellow outline appears on the input box. If you want to apply your styles to input fields when focused on input fields, set the outline property to none.

Note:-
If you want to size of your elements to remain the same after applying padding, use the box-sizing property with border-box value. 
The box-sizing property includes padding and a border in the element’s total size. So the element's original size remains the same.

Focused input field - login form
Focused input field 


Styling the login button using transition and transform 

The login button is styled with transform and transition effects. When you hover over a button, the background color, and text color change and when clicked on it will translated on Y-axis.

Now add a background image to <body> element.

Like background color, you can also add images to the background. Instead of a color name or code type or paste the image url. With the background-image property, you can use the background-position property to position the image to the top, right, left, bottom, center, etc... direction. Use background-repeat for repeat or not repeat the image. You can repeat the image horizontally or vertically.


Applying box-shadow effect

Black color shadow applied to both <caption> and <div> elements.

Login form with box-shadow
Login form with box-shadow 


Applying animation effect to caption

Let’s add some animation effects to the caption. Apply animation effect to text color and top property.  See the effect in the output.


Validate login form with HTML 5 constraints

HTML 5 introduces new input types and constraints which restrict user input.

The input type email allows only those data that follow a specific email pattern. 

The password type display masked input data.
To restrict null submission “required” constraints were added to both input fields (email and password ).


Login form validation using HTML5 constraints
Login form validation 

You can also specify the length of the password using maxlength and minlength attributes.

So this is auto-validation of the login form by HTML 5 constraints. This is a simple and easy way of validation.
 
Following are the HTML and CSS code.

HTML


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<title>login form</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class="box">
<form id="f1" name="log" method="post">
<table>
<caption>Login</caption>
<tr>
<td><label for="em">Username</label></td>
<td><input type="email" name="eml" placeholder="Enter Email" required></td><br>
</tr>
<tr>
<td><label for="pass">Password</label></td>
<td><input type="password" name="pwd" placeholder="Enter Password" minlength="8" required></td><br>
</tr>
<tr>
<td>
<input type="submit" name="logged" value="Login"></td>
</tr>
<tr>
<td></td>
<td><a href="#"><p>forget password?</p></a></td>
</tr>
<tr>
<td>Dont't have an account?</td>
<td><a href="#"><p>Sign Up</p></a></td>
</tr>
</table>
</form>
</div>
</body>
</html>

CSS


body{
background-image:url(bg.jpg);
background-repeat:no-repeat;
background-position:center;}
.box{
margin:auto;
margin-top:200px;
background-color:#666666;
height:50%;
width:30%;
border-radius:0px 0px 10px 10px;
color:#FFFFFF;
box-shadow:7px 7px 5px #000000;
}
table{
margin-right:auto;
margin-left:auto;
padding:20px;
height:auto;
border-spacing:10px;
}
caption{
position:absolute;
top:140px;
left:35%;
background-color:#333333;
height:auto;
width:30%;
padding:10px;
box-sizing:border-box;
border-radius:10px 10px 0px 0px;
font-family:"Times New Roman", Times, serif;
font-size:24px;
font-weight:bold;
text-align:center;
box-shadow:3px 3px 3px #000;
animation-name:down;
animation-duration:3s;
animation-iteration-count:infinite;*/
}
input[type="email"],[type="password"]{
width:100%;
padding:5px;
box-sizing:border-box;
border-radius:50px;
}
input[type="email"]:focus,input[type="password"]:focus{
border:none;
border-bottom:2px solid #0000FF;
background-color:#666666;
color:#FFFFFF;
outline:none;
}
input[type="submit"]{
font-size:18px;
font-weight:bold;
width:50%;
padding:5px;
color:#FF0000;
background-color:#00FF66;
border-radius:50px;
border-bottom:5px solid #000000;
}
input[type="submit"]:hover{
background-color:#996699;
color:#00FF00;
}
input[type="submit"]:active{
transform:translateY(5px);
}
@keyframes down{
from{top:140px;color:#FFFFFFF;}
to{top:150px;color:#0000FF;}
}

The final output of the login form





Summary

This post described how to create a login form with the use of <table> tag. The transition, transform, box-shadow, and animation properties make the login form pretty. HTML 5 constraints check user input whether is correct or incorrect.

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments