Creating a Form - HTML5 - page 156

workinG wiTH radio buTTons

Radio buttons allow the user to choose one item from two or more options. Users can switch their
choices, and the previously chosen option is deselected so that only one option is selected. To make
it possible for browsers to understand which radio buttons are part of the same group, the name
attribute must be the same for all the options. Here's a simple example with two options:
<input type=”radio” name=”gender” id=”male” value=”male” />
<label for=”male”>Male</label>
<input type=”radio” name=”gender” id=”female” value=”female” />
<label for=”female”>Female</label>

In this example, the name attribute is defined as gender
for both <input> tags, whereas the id and value attri-
butes are different. As with the text and textarea form
controls, the id attribute is used by the <label> for iden-
tification. The value attribute contains the text string to
be submitted if the associated radio button is selected.
For example, if someone chooses the Male radio button
option, the value sent is male .

Common practice is to place the label to the right of
the radio button, as shown in Figure 19-4. How you
group radio buttons is determined by the design and
the number of options in a group.

FiGure 19-4

It is possible to preselect a radio button in a group by adding the attribute checked , like this:
<input type=”radio” name=”gender” id=”female” value=”female” checked=”checked” />

If you didn't want the radio button to be checked you would set the checked attribute to an empty
string, that is, checked=”“ , or remove the attribute entirely.

oFFerinG cHeckboX oPTions

Unlike radio buttons, checkbox form controls allow the user to select as many options as desired,
not just one. Although checkboxes often appear near each other, they are not grouped by the name
or other attribute.
<input type=”checkbox” name=”redCheckbox” id=”redCheckbox” value=”red” />
<label for=”redCheckbox”>Red</label>
<input type=”checkbox” name=”greenCheckbox” id=”greenCheckbox” value=”green” />
<label for=”greenCheckbox”>Green</label>
<input type=”checkbox” name=”blueCheckbox” id=”blueCheckbox” value=”blue” />
<label for=”blueCheckbox”>Blue</label>

Again, the value attribute contains the information to be transmitted if the checkbox is selected.
Like radio buttons, the label is typically placed after the checkbox (Figure 19-5).