使用带有单选按钮的 HTML 'label' 标签

Using the HTML 'label' tag with radio buttons

提问by GlenPeterson

Does the labeltag work with radio buttons? If so, how do you use it? I have a form that displays like this:

label标签是否适用于单选按钮？如果是这样，你如何使用它？我有一个显示如下的表单：

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 labeltag 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 labeltag, but rather the options "Mr., Mrs., etc." go in the labeltag.

我想使用label左列中每个标签的标记来定义其与右列中相应控件的连接。但是如果我使用单选按钮，规范似乎突然表明表单控件的实际“Salutation”标签不再属于label标签，而是选项“先生，夫人等”。进入label标签。

I've always been a fan of accessibility and the semantic web, but this design doesn't make sense to me. The labeltag explicitly declares labels. The optiontag selection options. How do you declare a labelon the actual label for a set of radio buttons?

我一直是可访问性和语义网络的粉丝，但这种设计对我来说没有意义。该label标签显式声明的标签。该option标记选择选项。您如何label在一组单选按钮的实际标签上声明 a ？

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?

该怎么办？

回答by Quentin

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 forattribute that matches the idof the control, or you put the control inside the label element.

您要么给它一个for与id控件的匹配的属性，要么将控件放在 label 元素中。

I'd like to use the label tag for each label in the left column

我想为左列中的每个标签使用标签标签

A label is for acontrol, 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).

如果要为一组控件添加标题，请使用 a<fieldset>和 a <legend>（并<label>为该组中的每个控件指定 a ）。

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

回答by Paul D. Waite

Ah yes. Here's how it works.

是的。这是它的工作原理。

<label>labels individual fields, hence each <input type="radio">gets its own <label>.

<label>标记各个字段，因此每个字段<input type="radio">都有自己的<label>.

To label a groupof fields (e.g. several radio buttons that share the same name), you use a <fieldset>tag with a <legend>element.

要标记一组字段（例如，共享相同的几个单选按钮name），您可以使用<fieldset>带有<legend>元素的标签。

<fieldset>
    <legend>Salutation</legend>

    <label for="salutation_mr">Mr <input id="salutation_mr" name="salutation" type="radio" value="mr"><label>

    <label for="salutation_mrs">Mrs <input id="salutation_mrs" name="salutation" type="radio" value="mrs"><label>

    <label for="salutation_miss">Miss <input id="salutation_miss" name="salutation" type="radio" value="miss"><label>

    <label for="salutation_ms">Ms <input id="salutation_miss" name="salutation" type="radio" value="ms"><label>
</fieldset>

回答by Scribblemacher

You can use the aria-role="radiogroup"to associate the controls without using a <fieldset>. This is one of the techniques suggested by WCAG 2.0.

您可以使用aria-role="radiogroup"来关联控件，而无需使用<fieldset>。这是WCAG 2.0 建议的技术之一。

<div role="radiogroup" aria-labelledby="profession_label" aria-describedby="profession_help">
  <p id="profession_label">What is your profession?</p>
  <p id="profession_help">If dual-classed, selected your highest leveled class</p>
  <label><input name="profession" type="radio" value="fighter"> Fighter</label>
  <label><input name="profession" type="radio" value="mage"> Mage</label>
  <label><input name="profession" type="radio" value="cleric"> Cleric</label>
  <label><input name="profession" type="radio" value="theif"> Thief</label>
</div>

However, I noticed that using this technique the WebAim Wave tool to give a warning about a missing <fieldset>, so I'm not sure what AT support for this is like.

但是，我注意到使用这种技术的 WebAim Wave 工具会发出有关丢失 的警告<fieldset>，所以我不确定 AT 对此的支持是什么样的。

回答by Seza

You can't declare a label for a set of buttons, but for each button. In this case, the labels are "Mr.", "Mrs." and "Miss", not "Salutation".

您不能为一组按钮声明标签，而是为每个按钮声明标签。在这种情况下，标签是“先生”、“夫人”。和“小姐”，而不是“称呼”。

UPDATE
Maybe you should just use another tag for this "label" of yours - since it's not really a label.

更新
也许你应该为你的这个“标签”使用另一个标签——因为它不是一个真正的标签。

<tr>
    <th align="right" scope="row"><span class="label">Activity:</span></th>
    <td>&#160;</td>
    <td align="left"><label><input type="radio" name="es" value="" id="es0" /> Active &#160;</label>
    [... and so on]
</tr>

回答by BananaAcid

my 2 cents to the topic, or rather a side node (it does not use implicit association to be able to be placed anywhere, but linking): groupingis done by the nameattribute, and linkingby the idattribute:

我的2美分的话题，或者更确切地说，一个侧节点（它不使用内隐联想能够放置在任何地方，但链接）： 分组通过完成name属性，并链接由id属性：

<ol>
    <li>
        <input type="radio" name="faqList" id="faqListItem1" checked />
        <div>
            <label for="faqListItem1">i 1</label>
        </div>
    </li>
    <li>
        <input type="radio" name="faqList" id="faqListItem2" />
        <div>
            <label for="faqListItem2">i 2</label>
        </div>
    </li>
    <li>
        <input type="radio" name="faqList" id="faqListItem3" />
        <div>
            <label for="faqListItem3">i 3</label>
        </div>
    </li>
</ol>

回答by Nic Wortel

To answer your question: no, you can't connect Salutation to one of the radio buttons. It wouldn't make sense that if you'd click on Salutation, one of the options would be selected. Instead, you can give Mr, Mrs and Miss their own labels, so if someone clicks on one of those words, the corresponding radio button will be selected.

回答您的问题：不，您不能将称呼连接到单选按钮之一。如果您单击“称呼”，则会选择其中一个选项是没有意义的。相反，您可以给 Mr、Mrs 和 Miss 自己的标签，这样如果有人点击其中一个词，相应的单选按钮就会被选中。

<input id="salutation_mr" type="radio" value="mr" name="salutation">
<label for="salutation_mr">Mr.</label>
<input id="salutation_mrs" type="radio" value="mrs" name="salutation">
<label for="salutation_mrs">Mrs.</label>
<input id="salutation_miss" type="radio" value="miss" name="salutation">
<label for="salutation_miss">Miss</label>

I do think that you could still wrap Salutation inside a <label>element, you just can't use the forattribute.I stand corrected, see the comments below. Although it's technically possible, it's not what <label>was meant for.

我确实认为您仍然可以将 Salutation 包装在<label>元素中，只是不能使用该for属性。我的立场更正，请参阅下面的评论。虽然在技术上是可行的，但这并不是它的<label>目的。

回答by George

The Label's 'for' attribute corresponds to the Radio buttons ID. So...

标签的“for”属性对应于单选按钮 ID。所以...

<label for="thisRad">Radio Button 1</label>
<input type="radio" id="thisRad" />

Hope it helps.

希望能帮助到你。

You'd want yours to look something like this...

你会希望你的看起来像这样......

Salutation<br />
<label for="radMr">Mr.</label><input type="radio" id="radMr" />
<label for="radMrs">Mrs.</label><input type="radio" id="radMrs" />
<label for="radMiss">Miss.</label><input type="radio" id="radMiss" />