Twitter Bootstrap：如何为收音机和复选框添加标签？

Posted 2023-03-06

【中文标题】Twitter Bootstrap：如何为收音机和复选框添加标签？

【英文标题】：Twitter Bootstrap: how to put a label for radio and checkbox?

【发布时间】：2012-12-17 00:02:20

【问题描述】：

是否存在引入单选和复选框选项的 TB 方式？例如：

Foo 选项介绍：

富一 富二

基本上，类似于<label> 对<input> 的作用等。以下是2 个单选选项的代码，但没有“标签”：

<div class="control-group">
    <div class="controls">
        <label class="radio" for="foo_foo1">
            <input type="radio" name="foo" value="foo1" id="foo_foo1">
            Foo One
        </label>
        <label class="radio" for="foo_foo2">
            <input type="radio" name="foo" value="foo2" id="foo_foo2">
            Foo Two
        </label>        
    </div>
</div>

首选结核病解决方案。

【问题讨论】：

仅供参考：如果您有 <label><input /></label>，则 for/id 属性是多余的。只有当输入出现在它所属的标签之外时，它们才是必需的。

好收获。不过，我确实需要一些 JS。但你是对的。

【参考方案1】：

<fieldset> 和 <legend> 怎么样？

如这里的第一个示例：http://twitter.github.com/bootstrap/base-css.html#forms

还是信息警报？ http://twitter.github.com/bootstrap/components.html#alerts

【讨论】：

没有。 <legend> 可能在语义上不正确，而且我已经在表单中使用它来介绍表单的子集是什么。警报是一种骇人听闻的解决方案。

为什么它会在语义上不正确？字段集用于对表单控件进行分组，并且允许嵌套。 w3.org/wiki/HTML/Elements/fieldset

是的，相关表单控件的分组。我将收音机（及其所有选项）视为一个控件。我想这是一个主观的事情。

另外，有效的 HTML 并不意味着它在语义上是正确的。使用<b> 是有效的，但这在语义上是不正确的。

当你说你已经在使用 fieldset/legend 时，听起来你害怕将它用于收音机，因为你已经在其他地方有了一个。如果您仍然对在此处使用 fieldset/legend 有所保留，您可以随时使用select，这只是呈现与收音机相同的行为的不同方式。根据收音机的呈现方式，用户可能会发现选择不那么令人困惑。

【参考方案2】：

我认为您只想在单选按钮上方有一个标签。像这样：

<div class="control-group">
    <label for="foo_controls">Foo Options Introduction:</label>
    <div id="foo_controls" class="controls">
        <label class="radio">
            <input type="radio" name="foo" value="foo1" id="foo_foo1">
            Foo One
        </label>
        <label class="radio">
            <input type="radio" name="foo" value="foo2" id="foo_foo2">
            Foo Two
        </label>
    </div>
</div>

【参考方案3】：

从 Bootstrap 3 开始，您必须在标签上使用 checkbox-inline and radio-inline 类。

<label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>