Bootstrap 5：解决input元素href属性不被W3验证通过的问题

错误原因 #

W3验证报错的核心原因是HTML规范不允许<input type="checkbox">元素携带href属性，和页面加载时元素是否可见无关。你当前代码里把Bootstrap折叠组件的触发属性直接加在了input上，违反了HTML语法规则。

解决方案（两种可选，均保留功能且符合规范） #

方案1：用<label>绑定复选框，将折叠属性移到label上

把折叠触发相关的属性转移到与input绑定的label标签上，label是合法的交互元素，支持Bootstrap折叠的触发逻辑，同时点击label会同步切换checkbox的状态：

<div class="form-check form-switch">
    <input class="form-check-input" 
           type="checkbox" id="check-send-password">
    <label class="form-check-label"
           for="check-send-password"
           data-bs-toggle="collapse"
           data-bs-target="#resetpassword" 
           role="button"
           aria-expanded="false" 
           aria-controls="resetpassword">
        <!-- 可添加开关提示文字，比如：显示重置密码区域 -->
    </label>
</div>

• 用data-bs-target替代原来的href（Bootstrap折叠组件支持通过data-bs-target指定目标元素，功能和href一致）
• label通过for属性与input的id绑定，保证点击label时checkbox状态同步切换
• 所有属性都符合HTML规范，W3验证可通过

方案2：将折叠属性移到input的父容器上

如果不需要单独的label文字，可以把折叠触发属性加到input的父div上，点击父容器时同时触发checkbox状态切换和折叠效果：

<div class="form-check form-switch"
     data-bs-toggle="collapse"
     data-bs-target="#resetpassword" 
     role="button"
     aria-expanded="false" 
     aria-controls="resetpassword">
    <input class="form-check-input" 
           type="checkbox" id="check-send-password">
</div>

• 父div作为折叠触发元素，符合HTML属性规则
• 点击div区域会自动触发input的状态切换（因为input在div内，点击事件会冒泡），同时执行折叠逻辑

额外优化提示 #

原代码中的aria-pressed属性更适合按钮类元素，对于checkbox场景，建议后续根据状态动态设置aria-checked属性（Bootstrap折叠组件会自动管理aria-expanded的状态，无需手动修改）。

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