HTML Form with Fieldset Assignment
Type this code in text editor and save file with .html extension
--------------------------
<!doctype html>
<html>
<head></head>
<body>
<form>
<h3 align="center">APPLICATION FORM</h3>
<fieldset>
<legend>Personal Details</legend>
<table width="100%">
<tr>
<td>Applicant's <br>Full Name</td>
<td><select>
<option>select</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Miss</option>
</select><br>
<input type="text">
</td>
<td>Care Of
</td>
<td>Parents<input type="radio" checked>Guardian<input type="radio"></td>
</tr>
<tr>
<td>Father's <br>Name</td>
<td>
<select disabled>
<option>Mr.</option>
</select><br>
<input type="text">
</td>
<td>Mother's <br>Name</td>
<td>
<select disabled>
<option>Mrs.</option><br>
</select>
<input type="text">
</td>
</tr>
<tr>
<td>Gender</td>
<td>
Male<input type="radio">Female<input type="radio"><br>Others<input type="radio"
</td>
<td>Date of birth</td>
<td><input type="date"></td>
</tr>
<tr>
<td>Marital<br>Status</td>
<td><select>
<option>--select--</option>
<option>Married</option>
<option>Unmarried</option>
<option>Divorced</option>
</select>
</td>
<td>Category</td>
<td>
<select>
<option>--select--</option>
<option>GEN</option>
<option>OBC</option>
<option>SC</option>
<option>ST</option>
<option>Other</option>
<select>
</td>
</tr>
<tr>
<td>Handicapped</td>
<td>No<input type="radio" checked>Yes<input type="radio"></td>
<td>Ex-<br>Serviceman</td>
<td>No<input type="radio" checked>Yes<input type="radio"></td>
</tr>
<tr>
<td>EWS</td>
<td>No<input type="radio" checked>Yes<input type="radio"></td>
<td>Religion</td>
<td><select>
<option>--select--</option>
<option>Hindu</option>
<option>Muslim</option>
<option>Sikh</option>
<option>Christian</option>
</select>
</td>
</tr>
</table>
</fieldset></table>
<fieldset><table width="100%">
<legend>Contact Details</legend>
<tr>
<td>Mobile<br>Number</td>
<td><input type="text" maxlength="10"></td>
<td>Email <br>ID</td>
<td><input type="email"</td>
</tr>
<td>Address <br>Line 1</td>
<td><input type="text"></td>
<td>Address<br>Line 2</td>
<td><input type="text"></td>
<tr>
<td>City</td>
<td><input type="text"></td>
<td>State</td>
<td>
<select>
<option>--select--</option>
<option>UP</option>
<option>MP</option>
<option>Delhi</option>
<option>Punjab</option>
<option>Tamilnadu</option>
<option>Kerala</option>
</select>
</td>
</tr>
<tr>
<td>Pin <br>Code</td>
<td><input type="text" maxlength="6"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Qualification Details</legend>
<table width="100%" cellspacing="10px">
<tr>
<th>Sr.<br>No.</th>
<th>Qualification</th>
<th>Board/University</th>
<th>Passing <br>Year</th>
<th>Max<br>Marks</th>
<th>Marks<br>Obtain</th>
<th>Percentage</th>
</tr>
<tr>
<td>1</td>
<td>
<select>
<option>--select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduation</option>
<option>Post Graduation</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>2</td>
<td>
<select>
<option>--select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduation</option>
<option>Post Graduation</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>3</td>
<td>
<select>
<option>--select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduation</option>
<option>Post Graduation</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<td>4</td>
<td>
<select>
<option>--select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduation</option>
<option>Post graduation</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</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 width="100%">
<tr>
<td>Aadhar <br>Card<br>number</td>
<td><input type="text"></td>
<td>PAN<br>Card<br>number</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Upload<br>photo</td>
<td><input type="file" value="choose file"></td>
<td>Upload<br>signature</td>
<td><input type="file" value="choose file"></td>
</tr>
</table>
</fieldset>
<tr>
<td colspan="2"><center><input type="submit" value="submit">
<input type="reset" value="back"></center></td>
</tr>
</form>
</body>
</html>
--------------------------
Output-
0 Comments