Assembling Forms and Applications - HTML5 with CSS3 - page 255

The radio buttons in a web form work the same way; selecting a button will automatically deselect
whichever one in the list was previously selected. Hence, radio buttons are ideal when you need to offer a
multiple-choice list of options where only one choice is allowed (unlike checkboxes, which allow multiple
choices). Once a radio button has been checked, it can't be unchecked unless another button in the set is
checked in its stead.
To define a set of radio buttons, each one must share the same name attribute, and the value of the
selected radio button is taken as the value for the entire set when the form is submitted. As with
checkboxes, each radio button control can carry a value attribute to pass along additional information
about the selected option, and in this case a value is essential. Without a value attribute, the submitted
value would simply be “on” for the entire set of options, without any indication of which option was
selected. You could have a set with only one option, but in that case a radio button probably isn't the right
control for the job; use a checkbox for a single option.
Also like checkboxes, you can preselect a radio button by including the checked attribute. However, only
one radio button in a set may be preselected. In the event of multiple preselected radio buttons, only the
last one in the set will be checked when a browser renders the form.
Listing 8-11 shows a set of radio buttons, each with the same name attribute to define the set and a
different value attribute to distinguish the options.
Listing 8-11 . A set of radio buttons
<ul>
<li>
<label>
<input type="radio" name="cape-length" value="S"> Short (36")
</label>
</li>
<li>
<label>
<input type="radio" name="cape-length" value="M"> Medium (48")
</label>
</li>
<li>
<label>
<input type="radio" name="cape-length" value="L"> Long (72")
</label>
</li>
<li>
<label>
<input type="radio" name="cape-length" value="XL"> Extra-long (96")
</label>
</li>
</ul>
Figure 8-13 shows this set of radio buttons in Internet Explorer on Windows 7, and we've removed the list
item markers with a simple CSS rule ( ul { list-style: none; } ). As with most other form controls,
radio buttons may appear different in other browsers or on other operating systems. In this example, one