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

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

By Ed Tittel, Chris Minnick

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.