Friday 9 August 2013

Validate Form with HTML5

We can easily validate the form by html5

<form method="post" action="get-student-info.php" name="WtpForm" >  <table width="415" height="98" border="0"  bgcolor="#FFFFFF" align="center">       <tr>     <td height="40"  colspan="2"><div align="center">Student Information</div></td>   </tr>     <tr><td width="166" height="24"><strong>Name<font color="#FF0000">*</font></strong></td><td width="177" ><input name= "name" type= "text" value="" required x-moz-errormessage="Enter your name" / ></td></tr><tr><td width="166" height="24"><strong>Father Name<font color="#FF0000">*</font></strong></td><td width="177" ><input name= "fname" type= "text" value="" required x-moz-errormessage="Enter your Father name" / ></td></tr><tr><td width="166" height="24"><strong>Age<font color="#FF0000">*</font></strong></td><td width="177" ><input name= "age" type= "number" value="" min="18" max="99" required x-moz-errormessage="Enter your Age" / ></td></tr><tr><td width="166" height="24"><strong>Gender<font color="#FF0000">*</font></strong></td><td width="177" ><input name= "gender" type= "text" value="" required x-moz-errormessage="Enter your Gender" ></td></tr><tr><td width="166" height="24"><strong>Mobile No.<font color="#FF0000">*</font></strong></td><td width="177" ><input name= "mobile" type= "text" value="" required x-moz-errormessage="Enter your Mobile Number"></td></tr><tr><td width="166" height="24"><strong>Email ID<font color="#FF0000">*</font></strong></td><td width="177"><input name="email" type="email" value="" required x-moz-errormessage="Enter your Email Id"/></td></tr><tr><td width="166" height="24"><strong>College Name<font color="#FF0000">*</font></strong></td><td width="177" ><input name= "clgname" type= "text" value="" required x-moz-errormessage="Enter your College name" / ></td></tr><tr><td width="166" height="24"><strong>City<font color="#FF0000">*</font></strong></td><td width="177" ><input name= "city" type= "text" value="" required x-moz-errormessage="Enter your City name" / ></td></tr><td height="1" colspan="2"><div align="center">  <input type="submit" name="Submit" value="PRINT" ></div></td></tr>  </table>  <div align="center"></div>  <div align="center"></div></form>