Practical 113.9 : Basic student information form
Program Code :
<!DOCTYPE html>
<html>
<head>
<title>ITI Student Information Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
h2 {
color: #004080;
}
form {
background-color: white;
padding: 20px;
border-radius: 10px;
width: 500px;
box-shadow: 0px 0px 10px gray;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type=”radio”], input[type=”checkbox”] {
width: auto;
}
.form-buttons {
margin-top: 15px;
}
.form-buttons input {
width: auto;
margin-right: 10px;
padding: 10px 20px;
background-color: #004080;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.form-buttons input:hover {
background-color: #0066cc;
}
</style>
</head>
<body>
<h2>ITI Student Information Form</h2>
<form action=”#” method=”post”>
<label for=”name”>Full Name:</label>
<input type=”text” id=”name” name=”name” required>
<label for=”father”>Father’s Name:</label>
<input type=”text” id=”father” name=”father” required>
<label>Gender:</label>
<input type=”radio” name=”gender” value=”Male” required> Male
<input type=”radio” name=”gender” value=”Female”> Female
<input type=”radio” name=”gender” value=”Other”> Other
<label for=”dob”>Date of Birth:</label>
<input type=”date” id=”dob” name=”dob” required>
<label for=”age”>Age:</label>
<input type=”number” id=”age” name=”age” min=”14″ max=”40″>
<label for=”trade”>Trade:</label>
<select id=”trade” name=”trade” required>
<option value=””>–Select Trade–</option>
<option value=”Electrician”>Electrician</option>
<option value=”Fitter”>Fitter</option>
<option value=”Welder”>Welder</option>
<option value=”COPA”>COPA</option>
<option value=”Mechanic”>Mechanic</option>
</select>
<label>Hobbies:</label>
<input type=”checkbox” name=”hobby” value=”Reading”> Reading
<input type=”checkbox” name=”hobby” value=”Sports”> Sports
<input type=”checkbox” name=”hobby” value=”Coding”> Coding
<label for=”address”>Address:</label>
<textarea id=”address” name=”address” rows=”4″ required></textarea>
<label for=”email”>Email ID:</label>
<input type=”email” id=”email” name=”email”>
<label for=”phone”>Phone Number:</label>
<input type=”tel” id=”phone” name=”phone” maxlength=”10″ required>
<label for=”photo”>Upload Photo:</label>
<input type=”file” id=”photo” name=”photo” accept=”image/*”>
<label for=”password”>Create Password:</label>
<input type=”password” id=”password” name=”password” required>
<div class=”form-buttons”>
<input type=”submit” value=”Submit”>
<input type=”reset” value=”Reset”>
</div>
</form>
</body>
</html>
