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

Posted 2021-03-27

我有一个单选按钮列表，我知道根据W3C standards，所有<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>只与一个表单控件相关联。我google了一下，发现使用<fieldset>和<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的样式，使其像标签一样显示：

.legend-label {
    display: inline-block;
    width: inherit;
    padding: inherit;
    font-size: inherit;
    color: inherit;
    border: inherit;
    border-bottom: inherit;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

这是组合单选按钮或复选框的正确方法吗？

答案

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

当页面以非可视方式呈现时（例如，通过没有图例的屏幕阅读器，可能缺少上下文），字段集和图例的使用也改善了可访问性。

我在这个问题上遇到了很多困惑，因为许多开发人员似乎完全避免使用字段集，仅仅依赖于标签......在许多情况下，这是公平的。但是，这导致新开发人员错误地质疑字段集的有效性。如w3c.org所述：

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

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

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

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

---

有关何时以及何时不使用fieldsets的更多信息，请参阅w3.org上的示例。