将 HTML“label”标签与单选按钮一起使用

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

是的

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

与任何其他窗体控件相同。

您可以为其指定一个与控件匹配的属性，也可以将控件放在 label 元素内。forid

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

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

如果要为一组控件添加标题，请使用带有 a 的 a（并为该集中的每个控件提供 a）。<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>

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

不能为一组按钮声明标签，而只能为每个按钮声明标签。 在本例中，标签是“先生”、“夫人”和“小姐”，而不是“称呼”。

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

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

回答您的问题：不可以，您不能将 Salutation 连接到其中一个单选按钮。如果您单击“称呼”，则会选择其中一个选项，这是没有意义的。相反，您可以为 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>

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

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

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

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

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

我对主题的 2 美分，或者更确切地说是一个侧节点（它不使用隐式关联来能够放置在任何地方，而是链接）：按属性进行分组，并按属性进行链接：nameid

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