Adding Check Boxes and Radio Buttons

the best time to use themwhen the possibility of multiple answers exists. To create check boxes, you use the input element along with the type attribute and a value of checkbox (see Example 5-5).

Example 5-5. Adding check boxes to the form

<p>Please choose your favorite way(s) to relax:</p>
<input type="checkbox" name="reading" id="reading" />Reading<br />
<input type="checkbox" name="sports" id="sports" />Sports<br />
<input type="checkbox" name="games" id="games" />Computer Games<br />
<input type="checkbox" name="tv" id="tv" />Television<br />
<input type="checkbox" name="movies" id="movies" />Go to the Movies<br />
<input type="checkbox" name="beer" id="beer" />Enjoy a cold beer<br />
<input type="checkbox" name="dogs" id="dogs" />Play with the dogs<br />
<input type="checkbox" name="music" id="music" />Listen to music<br />
<input type="checkbox" name="friends" id="friends" />Meet with friends and
                                                    hang out

Users can then make selections as they see fit (see Figure 5-4).

You'll notice that the name and id attributes are set to logically relate to the associated option, and a value attribute is included in each option as well. This is necessary for the check boxes to work.

one option instead of one or more options. This is handled by using the same name value (in this case, gender) and then using the value attribute to distinguish the options. You must use the value attribute in radio buttons, or the unique selection feature will not work (see Example 5-6).

Example 5-6. Adding radio buttons to the form

<form method="get" action="http://www.myserver.com/cgi-bin/mailscript/">

<h2>Gender:</h2>

<input type="radio" value="female" name="gender" id="female" />Female<br />
<input type="radio" value="male" name="gender" id="male" />Male<br />
<input type="radio" value="undisclosed" name="gender" id="undisclosed" />
Prefer not to say

</form>

Figure 5-5 shows the series of radio buttons described in Example 5-6.

radio buttons are limited to one choice only.