Question

我有一个单选按钮列表，我知道根据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>

但我还希望有一个标签＆＃39;告诉用户这两个单选按钮用于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;
}

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

Answer 1

就HTML而言，没有“正确的方法”对它们进行分组，你的两个例子都很好，你可以用任何你喜欢的方式为这个组添加标题......但是，至于关注语义，特别是可访问性，使用<fieldset>嵌套<legend>是正确的并且是推荐的。

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

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

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

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

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

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

有关何时以及何时不使用字段集的详细信息，请参阅w3.org上的示例。

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

1 个答案: