使用HTML“标签”标签与单选按钮(Using the HTML 'label' t

是否label与单选按钮标签工作？ 如果是这样，你如何使用它？ 我有一个显示这样的形式：

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

我想用label标记每个标签在左边的列来定义其在右列中的适当的控制连接。 但是，如果我用一个单选按钮，该规范似乎表明，突然实际的“称呼”标签的形式控制不再是属于label的标签，而是选择“先生，太太，等等。” 走在label标记。

我一直是可访问性和语义网的粉丝，但这样的设计并没有道理给我。 该label标记显式声明的标签。 该option标签选择选项。 你如何定义一个label的实际标签上的一组单选按钮？

UPDATE：这里是用代码的示例：

<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控制的，或者你把标签元素内的控制。

我想用标签标记每个标签在左边的列

标签是一个控制 ，而不是一组控件。

如果您要添加字幕一组控件，使用<fieldset>与<legend> （并给予<label>集合中的每个控制）。

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

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:

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

UPDATE
也许你应该只使用另一个标记为这是你的“标签” - 因为它不是一个真正的标签。

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

要回答你的问题：不，你不能称呼连接到一个单选按钮。 这是没有意义的，如果你在称呼点击，其中的一个选项会被选中。 相反，你可以给先生，太太小姐和自己的品牌，因此，如果有人点击这些词汇之一，相应的单选按钮将被选中。

<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>元素，你就不能使用for属性。 我认错，请参见下面的注释。 虽然在技术上可以，这不是什么<label>是为那些。

Answer 5:

您可以使用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>

然而，我注意到，使用这种技术的WebAim波工具给予警告关于丢失<fieldset> ，所以我不知道AT这种支持是怎样的。

Answer 6:

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

Answer 7:

标签的“对”属性对应的单选按钮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" />

文章来源: Using the HTML 'label' tag with radio buttons