对复选框和单选按钮进行分组的正确方法

Question

我有一个单选按钮列表，我知道根据W3C 标准，所有<form>控件都应该有与之关联的标签。我是这样做的：

<label class="radio-inline">
    <input id="foo1" name="gender" value="M" type="radio"> Male
</label>
<label class="radio-inline">
    <input id="foo2" name="gender" value="F" type="radio"> Female
</label>

但是，我还希望有一个“标签”，告诉用户这两个单选按钮用于该gender字段。我知道这<label>不是一个选项，因为一个<label>仅与一个表单控件相关联。我搜索了一下，发现使用<fieldset>and<legend>是要走的路：

<fieldset class="form-group">
    <legend class="legend-label">Gender</legend>
    <label class="radio-inline">
        <input id="foo1" name="gender" value="M" type="radio"> Male
    </label>
    <label class="radio-inline">
        <input id="foo2" name="gender" value="F" type="radio"> Female
    </label>
</fieldset>

我使用 CSS 将legend.legend-label要显示的样式设置为标签：

<label class="radio-inline">
    <input id="foo1" name="gender" value="M" type="radio"> Male
</label>
<label class="radio-inline">
    <input id="foo2" name="gender" value="F" type="radio"> Female
</label>

这是对单选按钮或复选框进行分组的正确方法吗？

Answer 1

就 HTML 而言，没有对它们进行分组的“正确方法”，您的两个示例都很好，您可以以任何您喜欢的方式为组添加标题……但是，就语义而言，尤其是就可访问性而言，嵌套在<fieldset>a 中<legend>是正确和推荐的。

当页面以非视觉方式呈现时，字段集和图例的使用还可以提高可访问性（例如，在没有图例的情况下，上下文可能会丢失的屏幕阅读器）。

关于这个问题，我遇到了很多困惑，因为许多开发人员似乎完全避免使用字段集，只依赖标签……公平地说，这在许多情况下就足够了。尽管如此，这仍会导致新开发人员错误地质疑字段集的有效性。如w3c.org 所述：

由于浏览器中的默认显示，作者有时会避免使用 fieldset 元素，它会在分组控件周围绘制边框。这种视觉分组也很有用，作者应该认真考虑保留它（或某种形式的视觉分组）。通过覆盖字段集的“边框”属性和图例的“位置”属性，可以在 CSS 中修改视觉效果。

如果您的输入项是相关的，并且将它们分组有助于使信息更容易理解，那么一定要采取额外的步骤来调整您的 CSS 并使用字段集。w3c.org上的文章还指出：

分组控件对于相关的单选按钮和复选框最重要。当一组单选按钮或复选框都提交单个命名字段的值时，它们是相关的。

因此，在您的性别选择无线电输入示例中，字段集非常有意义。

有关何时和何时不使用字段集的更多信息，请参阅w3.org 上的示例。