Here i explained simple HTML5 registration form and it is easy to understand for fresher’s. This HTML5 form is provide validation, here I added some CSS Properties also.
it is work in new version web browsers
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style type="text/css">
#textfield{
width: 250px;
height: 22px;
border: 2px solid #EEE;
border-radius:5px;
}
#add{
width: 250px;
height: 40px;
border: 2px solid #EEE;
border-radius:5px;
}
</style>
</head>
<body bgcolor=" #aae162 ">
<form action="index.jsp"/>
<table>
<tr>
<td>First Name* </td>
<td><input type="text" name="fname" id="textfield" tabindex="1"required /></td>
</tr>
<tr>
<td>Last Name </td>
<td><input type="text" name="lname" id="textfield" tabindex="2"/></td>
</tr>
<tr>
<td>Email Id* </td>
<td><input type="email" id="textfield"name="emailid"placeholder="e.g: narendar@gmail.com" pattern="*@*.+" tabindex="3"required/></td>
</tr>
<tr>
<td>Password* </td>
<td> <input type="password" id="textfield"name="psw" pattern="\d{8,30}" tabindex="4"required/></td>
</tr>
<tr>
<td>Website* </td>
<td><input type="url" id="textfield"name="url" pattern="https?://.+" tabindex="5" required/></td>
</tr>
<tr>
<td>Mobile Number* </td>
<td><input type="tel" id="textfield"name="mbno" pattern="[0-9]{10}" tabindex="6"required/></td>
</tr>
<tr>
<td>Gender* </td>
<td>Male <input type="radio" name="gender" value="male" tabindex="7"required/>
Female <input type="radio" name="gender" value="female" tabindex="8"required/></td>
</tr>
<tr>
<td>Age* </td>
<td><input type="number"id="textfield"name="age"value="18" min="18" max="75" tabindex="9"required/></td>
</tr>
<tr>
<td>Address* </td>
<td><textarea type="text" id="add" name="add" tabindex="10"required></textarea></td>
</tr>
<tr>
<td>Country</td>
<td> <select name="state" id="textfield" tabindex="11">
<option>America</option>
<option>Australia</option>
<option>China</option>
<option>Japan</option>
<option selected>India</option>
<option>Indonesia</option>
</select></td>
</tr>
<tr>
<td>Postal Code* </td>
<td><input type="number" id="textfield"name="pc" maxlength="6" title="post code must be 6 digits" tabindex="12"required/></td>
</tr>
<tr><td>Join Date :</td> <td><input type="date" id="textfield"name="joindate" tabindex="13"/></td></tr>
<tr>
<td></td><td> <input type="checkbox"name="cb" tabindex="14" required/> Agree Terms and Conditions*</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="submit.png" value="SUBMIT"alt="Submit" width="200" height="40" tabindex="15"/>
</td>
</tr>
</table>
</form>
</body>
</html>
