For making a sign in page in HTML from HTML elements are used Text field is used to accept username and password text field is used to accept a password from the user. The log in button is used for submitting data to the server for validation. The reset button is used for erasing the username and password text field value.
 |
| Log in Page in HTML |
Login page in HTML with validation
Login Page in HTML to Create the Structure of the Page Layout.
signin.html
<html>
<head>
<title>Sign In</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="signin">
<center>
<form method="get" action="http://google.com">
<table border="2">
<tr><th colspan="2">SIGN IN</th></tr>
<tr><td>User name:</td><td><input type="text" name="un"></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="pwd">
</td></tr>
<tr><td><input type="reset" name="Reset"></td>
<td><input type="submit" value="Log in"></td>
</tr>
</table>
</body>
</html>
CSS Page for Designing the Login Page
style.css
body{
background-color: skyblue;
}
table{
border: 4px solid blue;
border-collapse: collapse;
}
td,th{
height: 50px;
width: 100px;
text-align: center;
color: black;
}
th:nth-child(odd){background-color: slateblue;}
th:nth-child(even){background-color: yellow;}
tr:nth-child(odd){background-color: yellow;}
tr:nth-child(even){background-color: yellow;}
0 Comments