将标签与输入关联，而不是 id？答案

【问题标题】：Associate label to input with class not id?将标签与输入关联，而不是 id？
【发布时间】：2021-04-02 23:00:30
【问题描述】：

我知道您可以使用 for 和 id 属性将标签与输入相关联。但是，您可以使用类而不是 id 吗？谢谢

<label for="rooms">Number of rooms</label>
<select id="rooms">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
</select>

【问题讨论】：

标签： html forms

【解决方案1】：

类不是唯一的（同一个类可以有多个元素），所以不是。

如果您想在不使用 ID 的情况下将标签与输入相关联，您可以通过将所述输入在标签内隐式分配它：

<label>Number of rooms
    <select name="rooms">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</label>

【讨论】：

对此的支持不如for 属性好。（尽管主要问题是旧的 IE，而且它可能已经死了，现在这无关紧要）。
很好 - 我不知道能够将控件嵌套在标签内
@Quentin：是的，除非他正在制作某种扭曲的本地应用程序，环境只使用 IE6，否则这样做应该没有问题。使用 IE6 的人应该（恕我直言）看到损坏的网站，并附加通知让他们升级。如果他们不想，你可以想象他们可以自己做些什么。
我同意@Truth，我只是希望我可以实现类似this site in Australia (article on UK website The Register) 的东西，这实际上为购买的商品添加了IE7 税......天才！！

【解决方案2】：

以下是您不想使用 ID 或嵌套控件时的示例：

我正在创建一个使用模板的 BackboneJS 应用程序。因为模板可以复制，所以避免使用 ID 很重要，因为它会在 DOM 中创建多个具有相同 ID 的元素。
我也在使用 Bootstrap，如果它被包裹在 <label> 元素中，它将以不同的（和不受欢迎的）方式呈现控件。

此时，我能找到的唯一解决方案是包装控件元素并使用默认 CSS 来获得所需的输出。如果有人有更优雅的解决方案，请加入。

【讨论】：

【解决方案3】：

不，您不能使用元素的class，因为同一个类可以被多个元素使用 - 在这种情况下，label 将用于哪个元素？

【讨论】：

【解决方案4】：

不，你不能。您可以使用的唯一属性是id 属性。

使用类（描述相关元素的组）没有意义，因为标签只能与一个表单控件相关联。

【讨论】：

【解决方案5】：

你可以这样做：

<label class="col-md-12 input-group input-group-sm">
    <span class="col-sm-5 control-label text-nowrap">Code</span>
    <input class="form-control listen code" type="text" size="15" required/>
</label>

【讨论】：