Does the label
tag work with radio buttons? If so, how do you use it? I have a form that displays like this:
First Name: (text field)
Hair Color: (color drop-down)
Description: (text area)
Salutation: (radio buttons for Mr., Mrs., Miss)
I'd like to use the label
tag for each label in the left column to define its connection to the appropriate control in the right column. But If I use a radio button, the spec seems to indicate that suddenly the actual "Salutation" label for the form control no longer belongs in the label
tag, but rather the options "Mr., Mrs., etc." go in the label
tag.
I've always been a fan of accessibility and the semantic web, but this design doesn't make sense to me. The label
tag explicitly declares labels. The option
tag selection options. How do you declare a label
on the actual label for a set of radio buttons?
UPDATE: Here is an example with code:
<tr><th><label for"sc">Status:</label></th>
<td> </td>
<td><select name="statusCode" id="sc">
<option value="ON_TIME">On Time</option>
<option value="LATE">Late</option>
</select></td></tr>
This works great. But unlike other form controls, radio buttons have a separate field for each value:
<tr><th align="right"><label for="???">Activity:</label></th>
<td> </td>
<td align="left"><input type="radio" name="es" value="" id="es0" /> Active  
<input type="radio" name="es" value="ON_TIME" checked="checked" id="es1" /> Completed on Time  
<input type="radio" name="es" value="LATE" id="es2" /> Completed Late  
<input type="radio" name="es" value="CANCELED" id="es3" /> Canceled</td>
</tr>
What to do?
Does the label tag work with radio buttons?
Yes
If so, how do you use it?
Same way as for any other form control.
You either give it a for
attribute that matches the id
of the control, or you put the control inside the label element.
I'd like to use the label tag for each label in the left column
A label is for a control, not a set of controls.
If you want to caption a set of controls, use a <fieldset>
with a <legend>
(and give a <label>
to each control in the set).
<fieldset>
<legend> Salutation </legend>
<label> <input type="radio" name="salutation" value="Mr."> Mr. </label>
<label> <input type="radio" name="salutation" value="Mrs."> Mrs. </label>
<!-- etc -->
</fieldset>