Online Test Banks
Score higher
See Online Test Banks
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Use Check Boxes and Radio Buttons in Your HTML5 Form

When creating a data collection form for your website, if only a finite set of possible values is available to the user, you can give him a collection of options to choose from:

  • Check boxes: Choose more than one option.

  • Radio buttons: Choose only one option.

    Radio buttons differ from check boxes in an important way: Users can select a single radio button from a set of options but can select any number of check boxes (including none, one, or more than one).

If many choices are available (more than half a dozen), use a drop-down list instead of radio buttons or check boxes.

To create radio buttons and check boxes, take these steps:

  1. Use the <input> element with the type attribute set to radio or checkbox.

  2. Create each option with these attributes:

    • name: Give the option a name.

    • value: Specify what value is returned if the user selects the option.

You can also use the checked attribute (with a value of checked) to specify that an option should be already selected when the browser displays the form. This is a good way to specify a default selection.

This markup shows how to format check box and radio button options:

<form action="bin/guestbook.php" method="post">
<p>What are some of your favorite foods?</p>
<ul style="list-style-type: none;">
  <li><input type="checkbox" name="food" value="pizza" checked="checked">
   <li><input type="checkbox" name="food" value="icecream">Ice Cream</li>
   <li><input type="checkbox" name="food" value="eggsham">Green Eggs 
        and Ham</li>
<p>What is your gender?</p>
<ul style="list-style-type: none;">
  <li><input type="radio" name="gender" value="male">Male</li>
  <li><input type="radio" name="gender" value="female" checked="checked">

The result is shown in this figure.


In the preceding markup, each set of options uses the same name for each input control but gives a different value to each option. You give each item in a set of options the same name to let the browser know they’re part of a set.

If you want to, you can select as many check boxes as you like by default in the page markup — simply include checked="checked" in each <input> element you want selected in advance.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.