label 的 for 属性无法绑定 button，因 button 不是 w3c 规范允许的合法目标元素；点击该 label 无反应，即使加 tabindex 也不会聚焦或触发 click；包裹 button 更会导致双触发和语义错误。
label 和 button 不能直接“配合”实现表单控件绑定——因为 button 不是可关联的表单控件，label 的 for 属性只对 input、select、textarea、meter、output 等可聚焦且支持 id 的元素有效。
为什么 label for="button-id" 无效
浏览器会忽略 label 的 for 属性指向 button 的情况。点击该 label 不会触发 button 的点击行为，也不会聚焦它（除非手动加 tabindex）。
-
<label for="myBtn">点我</label><button id="myBtn">按钮</button>—— 点击 label 无任何反应 - W3C 规范明确排除
button作为label的合法目标元素 - 即使加了
tabindex="0"，label仍不会将焦点自动移过去，更不会触发click
常见误用：用 label 包裹 button 导致双触发
当写成 <label><button onclick="doSomething()">操作</button></label>，这是隐式关联，但语义错误 —— label 本意是描述控件，不是包装操作按钮。
- 点击
button会执行一次onclick - 点击
label区域（哪怕只是空白 padding）也会冒泡触发button的 click，等于重复执行 - 屏幕阅读器可能读作“操作 按钮”，造成冗余或误导
- 正确做法是换掉
label，改用div或span并保留 class 样式（如layui-form-label）
真正能和 label 配合的按钮类场景
只有当你要控制的是「表单控件」（比如开关型 input[type="checkbox"]），再用 label 模拟“按钮式交互”时，才成立。
- 用
label包裹input[type="checkbox"]+ 自定义样式，实现“开关按钮”视觉效果 - 用
label[for]关联隐藏的input[type="radio"]，让文字区域变成可点击选项 - 示例：
<input type="checkbox" id="agree"><label for="agree">我已阅读并同意</label>—— 点 label 就等效点 checkbox - 此时
button完全不需要参与；若非要加操作按钮（如“提交”），应独立放在表单中，用type="submit"或 JS 绑定
最易被忽略的一点：label 的语义本质是「描述性文本」，不是「容器」也不是「触发器」。把它当按钮用，要么破坏可访问性，要么引入意外事件冒泡。真要按钮行为，就用 button；真要增强表单控件可点区域，就用 label 关联对应控件 —— 二者职责分明，不该混用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
