Question

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

First Name: (text field)
Hair Color: (color drop-down)
Description: (text area)
Salutation: (radio buttons for Mr., Mrs., Miss)

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

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

更新以下是代码示例：

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

这很有效。但与其他表单控件不同，单选按钮为每个值都有一个单独的字段：

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

怎么办？

Answer 1

标签标签是否适用于单选按钮？

是

如果是这样，你如何使用它？

与任何其他表单控件相同。

您要么为其提供与控件的for匹配的id属性，要么将控件放在label元素中。

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

标签用于 a 控件，而不是一组控件。

如果您想为一组控件添加标题，请使用带有<fieldset>的{{1}}（并为该组中的每个控件提供<legend>）。

<label>

Answer 2

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

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

要标记组字段（例如，共享相同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>

Answer 3

您无法为一组按钮声明标签，但是对于每个按钮。在这种情况下，标签是＆＃34; Mr。＆＃34;，＆＃34; Mrs。＆＃34;并且＆＃34;小姐＆＃34;而不是＆＃34; Salutation＆＃34;。

更新
也许你应该只为这个＆＃34;标签使用另一个标签＆＃34;你的 - 因为它不是真正的标签。

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

Answer 4

回答你的问题：不，你不能将Salutation连接到其中一个单选按钮。如果你点击Salutation，选择其中一个选项是没有意义的。相反，你可以给先生，夫人和小姐自己的标签，所以如果有人点击其中一个单词，将选择相应的单选按钮。

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

~~我认为你仍然可以在<label>元素中包含Salutation，你只是不能使用for属性。~~我的观点已经更正，请参阅下面的评论。虽然技术上可行，但它不是<label>的意思。

Answer 5

您可以使用aria-role="radiogroup"关联控件，而无需使用<fieldset>。这是one of the techniques suggested by 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>

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

Answer 6

我对该主题的2美分，或者更确切地说是侧节点（它不使用隐式关联来放置在任何地方，但链接）：分组由name属性完成，链接由id属性完成：

＆＃13;

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

＆＃13;

Answer 7

Label的'for'属性对应单选按钮ID。所以......

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

希望它有所帮助。

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

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

使用带有单选按钮的HTML“标签”标签

7 个答案: