Adding Checkboxes and Radio Buttons - Exercise

Contact Us or call 1-877-932-8228
Adding Checkboxes and Radio Buttons - Exercise

Adding Checkboxes and Radio Buttons

Duration: 10 to 15 minutes.

In this exercise, you will add a checkbox and radio buttons to the registration form. At completion, the form should look like this:Final Registration Form

  1. Open Forms/Exercises/RegistrationForm.html for editing if you don't have it open already.
  2. Add the following input elements:
    • 2 radio buttons:
      1. the name should be "gender" for both.
      2. the id should be given unique values, say "genderm" and "genderf".
      3. the value should also be unique, say "m" and "f".
      4. the user should see the radio buttons labeled as "male" and "female", respectively.
    • checkbox: name and id should be "terms"
  3. When you are done, open the page in a browser, and fill out and submit the form. You will need internet access to see the resulting page.


<meta charset="UTF-8">
<title>Registration Form</title>
<h1>Registration Form</h1>
<form method="post" action="">
	<input type="hidden" name="emailMe" id="emailMe" value="">

	<label for="username">User name:</label>
	<input type="text" name="username" id="username" size="15">
	<label for="pw">Password:</label>
	<input type="password" name="pw" id="pw" size="15">
	<input type="radio" name="gender" id="genderm" value="m"><label for="genderm">Male</label>
	<input type="radio" name="gender" id="genderf" value="f"><label for="genderf">Female</label>
	<label for="terms">Click to accept our terms:</label>
	<input type="checkbox" name="terms" id="terms">
	<input type="submit" name="submitbutton" id="submitbutton" value="Register">
	<input type="reset" name="resetbutton" id="resetbutton">