Sign in Page in HTML | Login page in HTML with validation - CodeTextPro | Free Web Tutorial

Codetextpro Provides free Web tutorial, HTML, CSS, C, C++, Java, JavaScript, PHP, MySql, Python, Program, Programming Notes, Programming Questions and more.

Programming

Friday, June 21, 2019

Sign in Page in HTML | Login page in HTML with validation

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.



sign in page using html and css
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

<!DOCTYPE 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;}

No comments:

Post a Comment