将 HTML 'label' 标记与单选按钮一起使用

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？

更新：这是代码的示例：

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

该怎么办？

标签标签是否可与无线电按钮一起使用？

是

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

与任何其他形式控件相同的方式。

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

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

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

如果要标题一组控件，请使用 <legend>使用CC_11（并将<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>

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

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

要标记字段的A 组（例如，几个共享相同name的无线电按钮），您将使用<fieldset>元素使用CC_17标签。

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

您可以使用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 Wave工具发出有关丢失的<fieldset>的警告，所以我不确定对此的支持是什么。

您无法声明一组按钮的标签，而是为每个按钮声明标签。在这种情况下，标签为"先生"，"太太"。和"小姐"，而不是"称呼"。

更新
也许您应该只为您的"标签"使用另一个标签 - 因为它不是真正的标签。

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

我对该主题的2美分，或者是side node （它不使用隐式关联可以放置在任何地方，但链接）：分组由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>

回答您的问题：不，您无法将Saluart连接到一个无线电按钮。如果您单击称呼，将选择其中一个选项是没有意义的。相反，您可以给先生，太太和错过自己的标签，因此，如果有人单击其中一个单词，将选择相应的单词按钮。

<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>元素中包装salunting，您只是无法使用for属性。~~我站立了，请参见下面的评论。尽管从技术上讲是可能的，但这不是<label>的目的。

标签的'属性对应于无线电按钮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" />

相关内容

最新更新

热门标签：