Home/ Questions/Q 8800143
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T00:30:34+00:00

Does the label tag work with radio buttons? If so, how do you use

  • 0

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>&#160;</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>&#160;</td>
    <td align="left"><input type="radio" name="es" value="" id="es0" /> Active &#160;
        <input type="radio" name="es" value="ON_TIME" checked="checked" id="es1" /> Completed on Time &#160;
        <input type="radio" name="es" value="LATE" id="es2" /> Completed Late &#160;
        <input type="radio" name="es" value="CANCELED" id="es3" /> Canceled</td>
</tr>

What to do?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0