i. Checkbox,
ii. Radio button.
<!DOCTYPE html>
<html>
<head>
<title>Volunteer Sign up form</title>
<center><img src="image.jpg" alt="college" width="25%"></center>
</head>
<body bgcolor="cyan">
<h1><center>Volunteer Signup</center></h1>
<p>The HELP Group is seeking volunteers to serve our community. Fill in the information below to indicate how you would like to become involved.</p>
<form action="frm.php">
<label for="name">Name</label><br>
<input id="name" type="text" name="name" required/><br>
<label for="eaddress">Email Address</label><br>
<input id="eaddress" type="text" name="eaddress" required/><br>
<label for="phone">Phone</label><br>
<input id="phone" type="tel" name="phone" required/><br>
<label for="street">Street</label><br>
<input id="street" type="text" name="street" required/><br>
<label for="city">City<span>*</span></label><br>
<input id="city" type="text" name="city" required/><br>
<label for="state">State<span>*</span></label><br>
<input id="state" type="text" name="state" required/><br>
<label for="zip">Zip<span>*</span></label><br>
<input id="zip" type="text" name="zip" required/><br>
<label>Include my contact information on lists distributed to other attendees.</label><br>
<input type="radio" value="none" id="radio_1" name="info"/>
<label for="radio_1" class="radio"><span>Yes</span></label>
<input type="radio" value="none" id="radio_2" name="info"/>
<label for="radio_2" class="radio"><span>No</span></label>
<p>Meal Preference</p>
<select>
<option selected value="" disabled selected></option>
<option value="v">Vegetarian</option>
<option value="n">Nonveg.</option>
</select><br><br>
<label>Days Attending </label><br>
<input type="checkbox" value="none" id="radio_3" name="day"/>
<label for="radio_3" class="radio"><span>Sunday</span></label>
<input type="checkbox" value="none" id="radio_4" name="day"/>
<label for="radio_4" class="radio"><span>Monday</span></label>
<input type="checkbox" value="none" id="radio_5" name="day"/>
<label for="radio_5" class="radio"><span>Tuesday</span></label>
<input type="checkbox" value="none" id="radio_6" name="day"/>
<label for="radio_6" class="radio"><span>Wednesday</span></label>
<input type="checkbox" value="none" id="radio_7" name="day"/>
<label for="radio_7" class="radio"><span>Thursday</span></label>
<input type="checkbox" value="none" id="radio_8" name="day"/>
<label for="radio_8" class="radio"><span>Friday</span></label>
<input type="checkbox" value="none" id="radio_9" name="day"/>
<label for="radio_9" class="radio"><span>Saturday</span></label><br><br>
<label>Activities Attending</label><br>
<input type="radio" value="none" id="radio_10" name="activity"/>
<label for="radio_10" class="radio"><span>CEO luncheon</span></label>
<input type="radio" value="none" id="radio_11" name="activity"/>
<label for="radio_11" class="radio"><span>Finance seminar</span></label>
<input type="radio" value="none" id="radio_12" name="activity"/>
<label for="radio_12" class="radio"><span>Leadership seminar</span></label>
<input type="radio" value="none" id="radio_13" name="activity"/>
<label for="radio_13" class="radio"><span>Marketing workshop</span></label>
<input type="radio" value="none" id="radio_14" name="activity"/>
<label for="radio_14" class="radio"><span>Teamwork seminar</span></label><br><br>
<label for="visit">Special Requirements</label><br>
<textarea id="visit" rows="3"></textarea><br><br>
<label>Did you attend last years conference?</label>
<div class="question-answer">
<input type="radio" value="none" id="radio_15" name="contact"/>
<label for="radio_15" class="radio"><span>Yes</span></label>
<input type="radio" value="none" id="radio_16" name="contact"/>
<label for="radio_16" class="radio"><span>No</span></label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output Screenshot
No comments:
Post a Comment