Introduction of Form

Html Programs




Program [1]

Write an HTML form that accepts a students name and roll no. Use JavaScript function to perform following validation.

  1. Roll no field should receive only numeric data
  2. Name field should not be empty and shall not exceed 20 characters in length.

View Solution


Program [2]

Create an HTML page to demonstrate a Clickable image. 


View Solution


Program [3]

<!doctype html>
<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<form>
<table border="1" align="center" width="60%" cellpadding="5px">
<tr>
<th colspan="2"><h2>Registration Form</h2></th>
</tr>
<tr>
<td><label>Student Name</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>Father's Name</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>Mother's Name</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>Date of Birth</label></td>
<td><input type="date"></td>
</tr>
<tr>
<td><label>Gender</label></td>
<td><label>Male</label><input type="radio" name="gender"><label>Female</label><input name="gender" type="radio"></td>
</tr>
<tr>
<td><label>Email ID</label></td>
<td><input type="email"></td>
</tr>
<tr>
<td><label>Mobile No.</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea rows="4"></textarea></td>
</tr>
<tr>
<td><label>State</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>

View Solution


Program [4]

<html>
<head>
<title>REGISTRATION APPLICATION FORM FOR COURSE – O LEVEL</title>
</head>
<body>
<center><h3>REGISTRATION APPLICATION FORM FOR COURSE – O LEVEL</h3></center>
<form>
<table align="center" width="80%" border="1" cellpadding="5px" cellspacing="0">
<tr bgcolor="#0090b8">
<td colspan="3"><font color="white"><b>1. Registration Form</b></font></td>
</tr>
<tr>
<td>1.0</td>
<td>Have you got online reference number for enrolment with<br/> NIELIT/Accreditation/Extension Center </td>
<td><label>No</label><input type="radio" name="enroll"/><label>Yes</label><input type="radio" name="enroll"/></td>
</tr>
<tr>
<td>1.1</td>
<td>Registration sought for</td>
<td>
<select disabled>
<option>O LEVEL</option>
</select>
</td>
</tr>
<tr>
<td>1.2</td>
<td>Applied As</td>
<td><label>Direct Candidate</label><input type="radio" name="type" checked/><label>Through Institute</label><input type="radio" name="type"/></td>
</tr>
<tr>
<td>1.3</td>
<td>Exam Cycle </td>
<td><input type="text" value="July, 2022" readonly/></td>
</tr>
<tr>
<td>1.4</td>
<td>Registration Fee Will Be Paid By? </td>
<td><input type="text" value="Candidate Direct to NIELIT" disabled/></td>
</tr>
<tr bgcolor="#0090b8">
<td colspan="3"><font color="white"><b>2. Applicant's Personal Details</b></font></td>
</tr>
<tr>
<td>2.1</td>
<td>Applicant's full name </td>
<td>
<select >
<option>--Select --</option>
<option>Mr.</option>
<option>Ms.</option>
<option>Others</option>
</select>
<input type="text" size="20"/>
</td>
</tr>
<tr>
<td>2.2</td>
<td>Care Of </td>
<td><label>Parents</label><input type="radio" name="care" checked/><label>Guardian </label><input type="radio" name="care"/></td>
</tr>
<tr>
<td>2.2.1</td>
<td>Father's Name </td>
<td>
<select disabled >
<option>Mr.</option>
</select>
<input type="text" size="20"/>
</td>
</tr>
<tr>
<td>2.2.2</td>
<td>Mother's Name </td>
<td>
<select disabled >
<option>Mrs.</option>
</select>
<input type="text" size="20"/>
</td>
</tr>
<tr>
<td>2.3</td>
<td>Gender</td>
<td>
<label>Male</label><input type="radio" name="Gender"/>
<label>Female </label><input type="radio" name="Gender"/>
<label>Others </label><input type="radio" name="Gender"/>
</td>
</tr>
<tr>
<td>2.4</td>
<td>Date of Birth</td>
<td>
<input type="date"/>
</td>
</tr>
<tr>
<td>2.5</td>
<td>Marital Status</td>
<td>
<select>
<option>--Select--</option>
<option>Single</option>
<option>Married</option>
<option>Divorced</option>
<option>Widowed</option>
</select>
</td>
</tr>
<tr>
<td>2.6</td>
<td>Category </td>
<td>
<select>
<option>--Select--</option>
<option>General</option>
<option>OBC</option>
<option>SC</option>
<option>ST</option>
</select>
</td>
</tr>
<tr>
<td>2.7</td>
<td>Handicapped </td>
<td><label>No</label><input type="radio" name="Handicapped" checked/><label>Yes</label><input type="radio" name="Handicapped"/></td>
</tr>
<tr>
<td>2.8</td>
<td>Ex-Serviceman </td>
<td><label>No</label><input type="radio" name="Serviceman" checked/><label>Yes</label><input type="radio" name="Serviceman"/></td>
</tr>
<tr>
<td>2.9</td>
<td>EWS </td>
<td><label>No</label><input type="radio" name="EWS" checked/><label>Yes</label><input type="radio" name="EWS"/></td>
</tr>
<tr>
<td>2.10</td>
<td>Religion </td>
<td>
<select>
<option>--Select--</option>
<option>Hindu</option>
<option>Muslim</option>
<option>Jain</option>
<option>Christianity</option>
</select>
</td>
</tr>
<tr bgcolor="#0090b8">
<td colspan="3">3. Contact Details</td>
</tr>
<tr>
<td>3.1</td>
<td>Mobile Number</td>
<td><input type="tel"/></td>
</tr>
<tr>
<td>3.2</td>
<td>Email ID</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>3.3</td>
<td>Address Line 1</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>3.4</td>
<td>Address Line 2</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>3.5</td>
<td>City</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>3.6</td>
<td>State</td>
<td>
<select>
<option>--Select--</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadar and Nagar Haveli">Dadar and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Puducherry">Puducherry</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
</select>
</td>
</tr>
<tr>
<td>3.7</td>
<td>Pin Code</td>
<td><input type="text"/></td>
</tr>
<tr bgcolor="#0090b8">
<td colspan="3">4. Educational / Qualification Details</td>
</tr>
<tr>
<td>4.1</td>
<td>Highest Educational Qualification</td>
<td>
<select>
<option>--Select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduate</option>
<option>Post Graduate</option>
</select>
</td>
</tr>
<tr>
<td>4.2</td>
<td>Year of Passing</td>
<td><input type="text"/></td>
</tr>
<tr bgcolor="#0090b8">
<td colspan="3">5. Identification Details</td>
</tr>
<tr>
<td>5.1</td>
<td>Aadhar Card Number</td>
<td><input type="text" maxlength="12"/></td>
</tr>
<tr>
<td>5.2</td>
<td>Upload Photo</td>
<td><input type="file"td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="Submit"/>
<input type="reset" value="Back"/>
</td>
</tr>
</table>
</form>
</body>
</html>

View Solution


Program [5]

<html>
<head>
<title>APPLICATION FORM </title>
</head>
<body leftmargin="200px">
<center><h3>APPLICATION FORM </h3></center>
<form>
<fieldset>
<legend>Personal  Details</legend>
<table width="100%" cellpadding="10px">
<tr>
<td>Applicant's full name </td>
<td>
<select >
<option>--Select --</option>
<option>Mr.</option>
<option>Ms.</option>
<option>Others</option>
</select>
<input type="text" size="20"/>
</td>
<td>Care Of </td>
<td><label>Parents</label><input type="radio" name="care" checked/><label>Guardian </label><input type="radio" name="care"/></td>
</tr>
<tr>
<td>Father's Name </td>
<td>
<select disabled >
<option>Mr.</option>
</select>
<input type="text" size="20"/>
</td>
<td>Mother's Name </td>
<td>
<select disabled >
<option>Mrs.</option>
</select>
<input type="text" size="20"/>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<label>Male</label><input type="radio" name="Gender"/>
<label>Female </label><input type="radio" name="Gender"/>
<label>Others </label><input type="radio" name="Gender"/>
</td>
<td>Date of Birth</td>
<td>
<input type="date"/>
</td>
</tr>
<tr>
<td>Marital Status</td>
<td>
<select>
<option>--Select--</option>
<option>Single</option>
<option>Married</option>
<option>Divorced</option>
<option>Widowed</option>
</select>
</td>
<td>Category </td>
<td>
<select>
<option>--Select--</option>
<option>General</option>
<option>OBC</option>
<option>SC</option>
<option>ST</option>
</select>
</td>
</tr>
<tr>
<td>Handicapped </td>
<td><label>No</label><input type="radio" name="Handicapped" checked/><label>Yes</label><input type="radio" name="Handicapped"/></td>

<td>Ex-Serviceman </td>
<td><label>No</label><input type="radio" name="Serviceman" checked/><label>Yes</label><input type="radio" name="Serviceman"/></td>
</tr>
<tr>
<td>EWS </td>
<td><label>No</label><input type="radio" name="EWS" checked/><label>Yes</label><input type="radio" name="EWS"/></td>

<td>Religion </td>
<td>
<select>
<option>--Select--</option>
<option>Hindu</option>
<option>Muslim</option>
<option>Jain</option>
<option>Christianity</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Contact Details</legend>
<table width="100%" cellpadding="10px">
<tr>

<td>Mobile Number</td>
<td><input type="tel"/></td>
<td>Email ID</td>
<td><input type="email"/></td>
</tr>
<tr>

<td>Address Line 1</td>
<td><input type="text"/></td>
<td>Address Line 2</td>
<td><input type="text"/></td>
</tr>
<tr>

<td>City</td>
<td><input type="text"/></td>
<td>State</td>
<td>
<select>
<option>--Select--</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadar and Nagar Haveli">Dadar and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Puducherry">Puducherry</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
</select>
</td>
</tr>
<tr>

<td>Pin Code</td>
<td><input type="text"/></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Qualification Details</legend>
<table width="100%" cellpadding="10px">
<tr>
<th>Sr No.</th>
<th>Qualification</th>
<th>Board/University</th>
<th>Passing Year</th>
<th>Max Marks</th>
<th>Marks Obtain</th>
<th>Percentage</th>
</tr>
<tr>
<td>1</td>
<td>
<select>
<option>--Select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduate</option>
<option>Post Graduate</option>
</select>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="number" min="1990" max="2022"/>
</td>
<td>
<input type="number" min="0" max="10000"/>
</td>
<td>
<input type="number" min="0" max="10000"/>
</td>
<td>
<input type="number" min="0" max="100"/>
</td>
</tr>
<tr>
<td>2</td>
<td>
<select>
<option>--Select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduate</option>
<option>Post Graduate</option>
</select>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="number" min="1990" max="2022"/>
</td>
<td>
<input type="number" min="0" max="10000"/>
</td>
<td>
<input type="number" min="0" max="10000"/>
</td>
<td>
<input type="number" min="0" max="100"/>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select>
<option>--Select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduate</option>
<option>Post Graduate</option>
</select>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="number" min="1990" max="2022"/>
</td>
<td>
<input type="number" min="0" max="10000"/>
</td>
<td>
<input type="number" min="0" max="10000"/>
</td>
<td>
<input type="number" min="0" max="100"/>
</td>
</tr>
<tr>
<td>4</td>
<td>
<select>
<option>--Select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduate</option>
<option>Post Graduate</option>
</select>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="number" min="1990" max="2022"/>
</td>
<td>
<input type="number" min="0" max="10000"/>
</td>
<td>
<input type="number" min="0" max="10000"/>
</td>
<td>
<input type="number" min="0" max="100"/>
</td>
</tr>

</table>
</fieldset>
<fieldset>
<legend>Language Knowledge</legend>
<table width="100%">
<tr>
<td>Language</td>
<td>Reading</td>
<td>Writing</td>
<td>Spoken</td>
</tr>
<tr>
<td>Hindi</td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td>English</td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td>Urdu</td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Identification Details</legend>
<table>
<tr>

<td>Aadhar Card Number</td>
<td><input type="text" maxlength="12"/></td>
<td>PAN Card Number</td>
<td><input type="text" maxlength="9"/></td>
</tr>
<tr>
<td>Upload Photo</td>
<td><input type="file"/></td>
<td>Upload Signature</td>
<td><input type="file"/></td>
</tr>

</table>
</fieldset>

<br/>
<center>
<input type="submit" value="Submit"/>
<input type="reset" value="Back"/>
</center>
</form>
</body>
</html>

View Solution


CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Website development Company in Allahabad Sarkari Exam Quiz