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

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