HTML code : student registration form

In this section we are going to create a student registration form using html langauge. We will also use JavaScript for the validation purpose. In this code we have used various form elements like textbox, radio-button etc.You must have the basic knowledge of html language to understand the given program. You can learn HTML from our HTML Tutorial.

You must have the basic knowledge of html language to understand the given program. Please see our HTML Tutorial.

Click the Button to See Demo
registration_form

HTML Program : create a student registration form

studentregistration.html
<html>
<head>
<script type="text/javascript" src="alert.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">
<table cellpadding="2" width="50%" bgcolor="orange" align="center" cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4 color="white"><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td><font color="white">Name</font></td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr> <td><font color="white">Father Name</td>
<td><input type="text" name="fathername" id="fathername"size="30"></td>
</tr>
<tr>
<td><font color="white">DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td><font color="white">Sex</td>
<td><input type="radio" name="sex" value="male" size="10"><font color="white">Male
<input type="radio" name="sex" value="Female" size="10"><font color="white">Female</td>
</tr>
<tr>
<td><font color="white">EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr> <tr> <td><font color="white">Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="B.Tech">BSC</option>
<option value="B.Tech">BCOM</option>
<option value="B.Tech">BA</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td><font color="white">Permanent Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td><font color="white">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>
<option value="Jaipur">Jaipur</option>
</select></td>
</tr>
<tr>
<td><font color="white">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><font color="white">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>
<option value="Rajasthan">Rajasthan</option>
</select></td>
</tr>
<tr>
<td><font color="white">PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td><font color="white">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>


alert.js
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.dob.value == "" )

{

alert( "Please provide your DOB!" );

document.StudentRegistration.dob.focus() ;

return false;

}

if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) )

{

alert ( "Please choose your Gender: Male or Female" );

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.Course.value == "-1" )

{

alert( "Please provide your Course!" );

return false;

}

if( document.StudentRegistration.paddress.value == "" )

{

alert( "Please provide your Address!" );

document.StudentRegistration.paddress.focus() ;

return false;

}

if( document.StudentRegistration.City.value == "-1" )

{

alert( "Please provide your City!" );

document.StudentRegistration.City.focus() ;

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;

}

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 );

}

Click the Button to See Demo

Code Explanation

  • You can see here the code is available in two parts: studentregistration.html and alert.js.. Here studentregistration.html is a main html document which contains html form elements and other html code and alert.js is a Javascript file which is embedded in the html file for the validation purpose.
  • In the above code we have used many html form elements like text fields, radiobuttons, select-boxes, reset button and submit button etc. to create a frame of registration form.Reset button is used here to resets all fields to blank.
  • As we mentioned already that we have used Javascript file alert.js in the code for validation purpose. If you will not enter any value in the text field of form than an error message will be shown as the effect of this Javascript file alert.js. In this code it is mandatory to fill every field otherwise an error will occur.
  • When you will fill all the fields of the form correctly submit form adds the data. You can use this form for your own benifit and save the data to the database.