如何将标签应用于引导程序中设置的按钮组答案

【问题标题】：how to apply a label to the button group set in bootstrap如何将标签应用于引导程序中设置的按钮组
【发布时间】：2021-12-09 06:37:47
【问题描述】：

Nu html 检查器抱怨

label元素的for属性的值必须是非隐藏表单控件的ID。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
      <div class="form-group col-md-12">
           <label for="aptmt">select item</label>  <!-- ERROR -->
           <div class="btn-group btn-group-sm" id="aptmt" role="group" aria-label="Basic radio toggle button group">
                <input type="radio" class="btn-check " name="apt" id="btnradio1" value="0">
                <label class="btn " for="btnradio1">both</label>
                        
                <input type="radio" class="btn-check " name="apt" id="btnradio2" value="2">
                <label class="btn " for="btnradio2">upper</label>
                        
                <input type="radio" class="btn-check " name="apt" id="btnradio3" value="1">
                <label class="btn " for="btnradio3">lower</label>
           </div>
     </div>
</div>

虽然这不会导致真正的问题，但它的行为确实与其他标签不同。如果列太宽，按钮组将位于标签的右侧，而所有其他标签都保留在输入框上方。

知道如何将标签select item 连接到整个组吗？

【问题讨论】：

你所说的“连接...到整个组”是什么意思？您的意思是在创建标签时选择所有内容吗？如果是这样，您应该使用复选框而不是收音机
如果您只是想从 HTML 检查器中删除该消息，那么您可以为该文本使用另一个元素而不是 label
连接我的意思是标签粘在按钮组上并且表现得和另一个一样。这是关于标记组，例如enter sex 用于无线电male 和female
它不仅与 HTML 检查器有关，正如我所说，它会在表单中造成不一致，因为标签和按钮组对的行为与标签和放置框对的行为不同。跨度>
谢谢！我会试试这个。很高兴接受这个作为答案

标签： html forms twitter-bootstrap bootstrap-4

【解决方案1】：

标签元素的主要作用是在您单击标签时聚焦/突出显示相关选项。有一些与可访问性相关的优势，但我认为这不是您关心的问题。标签适用于单个输入控件，而不是您似乎正在尝试的多个控件。 Refer here for more technical info

基本上，标签应该附加到单个“输入控件”。因此不同的行为。您可能想要使用 fieldset 或类似的东西，具体取决于您的具体需求，但主要是为了便于访问

【讨论】：

【解决方案2】：

您可以尝试将选择项标签包装为如下所示的包装器。告诉我这是否有效。如果没有，我们会找到不同的解决方案。

https://www.w3schools.com/tags/tag_fieldset.asp

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
      <div class="form-group col-md-12">
<fieldset>
           <legend for="aptmt">select item </legend>  <!-- ERROR -->
           <div class="btn-group btn-group-sm" id="aptmt" role="group" aria-label="Basic radio toggle button group">
                <input type="radio" class="btn-check " name="apt" id="btnradio1" value="0">
                <label class="btn " for="btnradio1">both</label>
                        
                <input type="radio" class="btn-check " name="apt" id="btnradio2" value="2">
                <label class="btn " for="btnradio2">upper</label>
                        
                <input type="radio" class="btn-check " name="apt" id="btnradio3" value="1">
                <label class="btn " for="btnradio3">lower</label>
           </div>
           </fieldset>
     </div>
</div>

【讨论】：

不，不起作用。
使用字段集更改了我的答案。