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

我有一个单选按钮列表，我知道根据，所有

控件都应该有与它们相关联的标签。我是这样做的：

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

在这里，我使用CSS设置

图例的样式。图例标签

显示为标签：

。图例标签{
显示：内联块；
宽度：继承；
填充：继承；
字体大小：继承；
颜色：继承；
边界：继承；
边框底部：继承；
最大宽度：100%；
边缘底部：5px；
字体大小：粗体；
}

---

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

就HTML而言，没有“正确的方法”对它们进行分组，您的两个示例都很好，您可以按自己喜欢的任何方式为组添加标题。。。但是，就语义而言，尤其是可访问性而言，使用

嵌套

是正确的，建议使用

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

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

作者有时避免使用fieldset元素，因为 浏览器中的默认显示，它围绕 分组控件。这种可视分组也很有用，而且对作者也很有用 应认真考虑保留它（或某种形式的视觉） 分组）。视觉效果可以在CSS中通过覆盖 字段集的“border”属性和 传说

如果您的输入项是相关的，并且对它们进行分组有助于使信息更容易理解，那么请务必执行额外的步骤来调整CSS并使用字段集。该条还规定：

分组控件对于相关单选按钮和 复选框。当一组单选按钮或复选框 单个命名字段的所有提交值

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

---

---

有关何时和何时不使用字段集的更多信息，请参阅。

我认为这个问题属于HTML，或者如果您是这样问的话，它是有效的HTML。但奇怪的是，由于您没有指定输入类型，它们默认为文本框，您似乎需要单选按钮。@j08691对不起，我的错误，添加了该类型back@ZeRubeus我认为这与UX和代码审查无关，因为我关心的是关于W3C的HTML onlyGreat答案的语义正确性！

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