Using the HTML 'label' tag with radio buttons
Posted
by
GlenPeterson
on Stack Overflow
See other posts from Stack Overflow
or by GlenPeterson
Published on 2012-11-07T16:20:34Z
Indexed on
2012/11/07
17:00 UTC
Read the original article
Hit count: 394
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?
© Stack Overflow or respective owner