如何为Bootstrap按钮组添加关联标签并解决NU HTML校验报错

问题根因 #

校验报错原因 #

HTML规范中<label>的for属性只能指向可交互的非隐藏表单控件（比如input、select、textarea等），你当前将for指向了<div>元素，<div>不属于表单控件，因此触发校验报错。

布局错位原因 #

Bootstrap默认<label>为行内块级元素，当父容器宽度足够时，行内块元素会和后续元素横向排列；其他表单控件的标签默认独占一行是因为对应的控件是块级元素，或者标签本身设置了块级样式。

解决方案 #

可以通过以下修改同时解决两个问题：

1. 移除<label>的for属性，给<label>设置唯一id，给按钮组容器添加aria-labelledby属性关联这个id，实现无障碍语义关联，符合HTML规范
2. 给<label>添加d-block类，强制标签独占一行，和其他表单布局保持一致
3. 如果需要保留「点击标签自动聚焦/选中第一个选项」的交互，可以额外给<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">
           <!-- 加d-block独占一行，设置id供按钮组关联，可选加for="btnradio1"实现点击选第一个 -->
           <label id="aptmt-label" class="d-block">select item</label>
           <!-- 用aria-labelledby关联外层标签，实现语义绑定 -->
           <div class="btn-group btn-group-sm" role="group" aria-labelledby="aptmt-label" 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>

可选更规范的语义化方案 #

如果追求更标准的表单组语义，可以用<fieldset>包裹整个单选组，用<legend>作为组标签，原生支持组关联，无需额外ARIA属性：

<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 class="form-label fs-6">select item</legend>
               <div class="btn-group btn-group-sm" 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>

内容的提问来源于stack exchange，提问作者w461