html code for student registration form
Here is an example of html code for student registration form. In this example, we have displayed many text fields, radio button, Reset button and Submit Form button. We have used Reset button that resets all fields to blank. We have used JavaScript validation in student registration form. If you will not enter value in text field than an error message will be show. In this example we have made entry in every field mandatory hence an error is shown if one of them is not filled correctly. However, a programmer can make adjust it accordingly.
When all fields are filled correctly, submit form adds the data. A programmer can use this submit form as he/she wants, either they can send/redirect it to other page or save it in database.
Here is the video tutorial of "How to create student registration form in HTML?":
In the above video instruction we have explained you how to make html page for student registration and validate it with JavaScript. JavaScript is used to validate the HTML page in web applications. These days Ajax and jQuery is also used for making dynamic web applications.
StudentRegistration.html
<html> <head> <script type="text/javascript" src="validate.js"></script> </head> <body> <form action="#" name="StudentRegistration" onsubmit="return(validate());"> <table cellpadding="2" width="20%" bgcolor="99FFFF" align="center" cellspacing="2"> <tr> <td colspan=2> <center><font size=4><b>Student Registration Form</b></font></center> </td> </tr> <tr> <td>Name</td> <td><input type=text name=textnames id="textname" size="30"></td> </tr> <tr> <td>Father Name</td> <td><input type="text" name="fathername" id="fathername" size="30"></td> </tr> <tr> <td>Postal Address</td> <td><input type="text" name="paddress" id="paddress" size="30"></td> </tr> <tr> <td>Personal Address</td> <td><input type="text" name="personaladdress" id="personaladdress" size="30"></td> </tr> <tr> <td>Sex</td> <td><input type="radio" name="sex" value="male" size="10">Male <input type="radio" name="sex" value="Female" size="10">Female</td> </tr> <tr> <td>City</td> <td><select name="City"> <option value="-1" selected>select..</option> <option value="New Delhi">NEW DELHI</option> <option value="Mumbai">MUMBAI</option> <option value="Goa">GOA</option> <option value="Patna">PATNA</option> </select></td> </tr> <tr> <td>Course</td> <td><select name="Course"> <option value="-1" selected>select..</option> <option value="B.Tech">B.TECH</option> <option value="MCA">MCA</option> <option value="MBA">MBA</option> <option value="BCA">BCA</option> </select></td> </tr> <tr> <td>District</td> <td><select name="District"> <option value="-1" selected>select..</option> <option value="Nalanda">NALANDA</option> <option value="UP">UP</option> <option value="Goa">GOA</option> <option value="Patna">PATNA</option> </select></td> </tr> <tr> <td>State</td> <td><select Name="State"> <option value="-1" selected>select..</option> <option value="New Delhi">NEW DELHI</option> <option value="Mumbai">MUMBAI</option> <option value="Goa">GOA</option> <option value="Bihar">BIHAR</option> </select></td> </tr> <tr> <td>PinCode</td> <td><input type="text" name="pincode" id="pincode" size="30"></td> </tr> <tr> <td>EmailId</td> <td><input type="text" name="emailid" id="emailid" size="30"></td> </tr> <tr> <td>DOB</td> <td><input type="text" name="dob" id="dob" size="30"></td> </tr> <tr> <td>MobileNo</td> <td><input type="text" name="mobileno" id="mobileno" size="30"></td> </tr> <tr> <td><input type="reset"></td> <td colspan="2"><input type="submit" value="Submit Form" /></td> </tr> </table> </form> </body> </html>
Form Validation
function validate()
{
if( document.StudentRegistration.textnames.value == "" )
{
alert( "Please provide your Name!" );
document.StudentRegistration.textnames.focus() ;
return false;
}
if( document.StudentRegistration.fathername.value == "" )
{
alert( "Please provide your Father Name!" );
document.StudentRegistration.fathername.focus() ;
return false;
}
if( document.StudentRegistration.paddress.value == "" )
{
alert( "Please provide your Postal Address!" );
document.StudentRegistration.paddress.focus() ;
return false;
}
if( document.StudentRegistration.personaladdress.value == "" )
{
alert( "Please provide your Personal Address!" );
document.StudentRegistration.personaladdress.focus() ;
return false;
}
if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if( document.StudentRegistration.City.value == "-1" )
{
alert( "Please provide your City!" );
document.StudentRegistration.City.focus() ;
return false;
}
if( document.StudentRegistration.Course.value == "-1" )
{
alert( "Please provide your Course!" );
return false;
}
if( document.StudentRegistration.District.value == "-1" )
{
alert( "Please provide your Select District!" );
return false;
}
if( document.StudentRegistration.State.value == "-1" )
{
alert( "Please provide your Select State!" );
return false;
}
if( document.StudentRegistration.pincode.value == "" ||
isNaN( document.StudentRegistration.pincode.value) ||
document.StudentRegistration.pincode.value.length != 6 )
{
alert( "Please provide a pincode in the format ######." );
document.StudentRegistration.pincode.focus() ;
return false;
}
var email = document.StudentRegistration.emailid.value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.StudentRegistration.emailid.focus() ;
return false;
}
if( document.StudentRegistration.dob.value == "" )
{
alert( "Please provide your DOB!" );
document.StudentRegistration.dob.focus() ;
return false;
}
if( document.StudentRegistration.mobileno.value == "" ||
isNaN( document.StudentRegistration.mobileno.value) ||
document.StudentRegistration.mobileno.value.length != 10 )
{
alert( "Please provide a Mobile No in the format 123." );
document.StudentRegistration.mobileno.focus() ;
return false;
}
return( true );
}
OutPut:
