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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了正确的分组复选框和单选按钮的方法相关的知识,希望对你有一定的参考价值。

我有一个单选按钮列表,我知道根据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上的示例。

以上是关于正确的分组复选框和单选按钮的方法的主要内容,如果未能解决你的问题,请参考以下文章

关于复选框和单选按钮的问题

带有选择、复选框和单选按钮的 Angular JS 表单

使用 jquery 验证克隆的复选框和单选按钮

jQuery 验证,将错误消息放在复选框和单选按钮组下方

Google Chrome 中的引导复选框和单选按钮标签问题

在javascript单击处理程序中隐藏和单选按钮和复选框标签