Programming Examples

Design a html form using fieldset and legend


Form grouping using Fieldset

<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>
Output/ Explanation:

Latest Current Affairs 2024 Online Exam Quiz for One day Exam Online Typing Test CCC Online Test 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 Best Website and Software Company in Allahabad