Program Code : Use text box, combo box and check box on html code
Program Code :
<!DOCTYPE html>
<html>
<head>
<title>ITI Admission Form</title>
<style>
body {
font-family: Arial;
background-color: #f0f8ff;
padding: 30px;
}
.form-box {
background-color: #ffffff;
padding: 25px;
width: 400px;
margin: auto;
border-radius: 10px;
box-shadow: 0 0 10px gray;
}
h2 {
text-align: center;
color: #003366;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type=”text”], select {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.checkbox-group {
margin-bottom: 15px;
}
.submit-btn {
background-color: #003366;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
width: 100%;
cursor: pointer;
}
.submit-btn:hover {
background-color: #005599;
}
</style>
</head>
<body>
<div class=”form-box”>
<h2>ITI Admission Form</h2>
<form>
<!– Textbox –>
<label for=”name”>Full Name:</label>
<input type=”text” id=”name” name=”name” placeholder=”Enter your name”>
<!– Combo box –>
<label for=”trade”>Select Trade:</label>
<select id=”trade” name=”trade”>
<option value=””>– Select –</option>
<option value=”electrician”>Electrician</option>
<option value=”fitter”>Fitter</option>
<option value=”welder”>Welder</option>
<option value=”copa”>Computer Operator (COPA)</option>
<option value=”mechanic”>Mechanic (Motor Vehicle)</option>
</select>
<!– Checkbox –>
<label>Documents Submitted:</label>
<div class=”checkbox-group”>
<input type=”checkbox” id=”marksheet” name=”documents” value=”marksheet”>
<label for=”marksheet”>10th Marksheet</label><br>
<input type=”checkbox” id=”photo” name=”documents” value=”photo”>
<label for=”photo”>Passport Size Photo</label><br>
<input type=”checkbox” id=”aadhar” name=”documents” value=”aadhar”>
<label for=”aadhar”>Aadhar Card</label>
</div>
<!– Submit –>
<input type=”submit” value=”Submit Form” class=”submit-btn”>
</form>
</div>
</body>
</html>
