Simple Login Page Using HTML5
hi..
i find HTML5 is the easiest way to develop a site. so me tell you how to create a login page using HTML5 with all validations..
1. use dreamweaver to create the login form.
2. insert a form, create a table, type those text and add 3 text fields
or just copy& paste the following code..
//index.html
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="0">
<tr>
<td valign="middle" height="700">
<form name="form1" method="post" action="login.php">
<table width="300" border="0" align="center">
<tr bgcolor="#CCCCCC">
<td colspan="2">
<div align="center"><b>Login Form</b></div>
</td>
</tr>
<tr>
<td><b><font color="#660000">User Name</font></b></td>
<td>
<input type="text" name="textfield" autofocus="autofocus" required/>
</td>
</tr>
<tr>
<td><b><font color="#660000">Password</font></b></td>
<td>
<input type="password" name="textfield2" required/>
</td>
</tr>
<tr>
<td><b><font color="#660000">Email Id</font></b></td>
<td>
<input type="email" name="textfield3" required/>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
3. save the html file as index.php or index.html
4. open the file using google chrome or mozilla firefox (or using any browsers which support html5)
5. you can see the following output.
6. HTML5 can be used to avoid huge number of lines of java script validations codings.
- required attribute(line no 20,26,32) in input tag makes the fields to be filled mandatory.
- Input type="email" will check the given input is a email id or not
Try this code and need your comments..
Comments
Post a Comment