HTML and CSS Reference
In-Depth Information
You can group check boxes together and assign them the same control name. This allows
multiple values associated with the same name to be chosen:
<p>
Check all symptoms that you are experiencing:
</p>
<label><input type=“checkbox” name=“symptoms” value=“nausea” />
Nausea
</label>
<label><input type=“checkbox” name=“symptoms” value=“lightheadedness” />
Light-headedness
</label>
<label><input type=“checkbox” name=“symptoms” value=“fever” />
Fever
</label>
<label><input type=“checkbox” name=“symptoms” value=“headache” />
Headache
</label>
When this form is submitted to a script for processing, each check box that's checked
returns a value associated with the name of the check box. If a check box isn't checked,
neither the field name nor value will be returned to the server—it's as if the field didn't
exist at all.
You may have noticed that when I applied labels to these check box elements, I put the
input
tags inside the
label
tags. There's a specific reason for doing so. When you asso-
ciate a label with a check box (or with a radio button, as you'll see in the next section),
the browser enables you to check the box by clicking the label as well as by clicking the
button. That can make things a bit easier on your user.
In the examples thus far, I have tied labels to fields by putting the field name in the
for
attribute of the label, but that doesn't work for check boxes because multiple form fields
have the same name, and the browser would not figure out which check box the label
applies to. Instead I put the
input
tag inside the
label
tag. I could achieve the same
result by assigning a unique
id
to each check box and associating them with the labels
that way, but nesting the tags is easier.
Creating Radio Buttons
Radio buttons, which generally appear in groups, are designed so that when one button in
the group is selected, the other buttons in the group are automatically unselected. They
enable you to provide users with a list of options from which only one option can be
selected. To create a radio button, set the
type
attribute of an
<input>
tag to
radio
. To
create a radio button group, set the
name
attributes of all the fields in the group to the
same value, as shown in Figure 11.8. To create a radio button group with three options,
the following code is used:
Input
▼
<p>
Select a color:
</p>
<label style=”display: block”><input type=“radio” name=“color” value=“red” />
Red
</label>
<label style=”display: block”><input type=“radio” name=“color” value=“blue” />
Blue
</label>
