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>
