label的for属性必须严格匹配input的id，区分大小写、空格和连字符；label包裹input时可省略for/id；radio/checkbox需name一致才能分组；label仅控制绑定的单个input；css可扩展label点击区域以提升移动端体验。
label 的 for 属性必须严格匹配 input 的 id
这是最常见失效原因：浏览器只认 for 和 id 的字符串完全一致（区分大小写、空格、连字符）。比如 <label for="user-name">用户名</label> 必须对应 <input id="user-name" type="text">，写成 userid、userName 或漏掉 id 都会断开关联。
注意：name 属性不参与 label 绑定，只用于表单提交；id 在页面中必须唯一，重复会导致 label 随机绑定到某个 input。
label 包裹 input 时无需 for/id 也能触发
当 input 直接放在 label 标签内部，浏览器自动建立关联，此时 for 和 id 可省略：
<label>同意协议 <input type="checkbox"></label>
这种写法更简洁，但要注意结构限制：label 内只能有一个可交互的表单控件，否则点击行为可能不可预测；另外，若 input 后面还有文字或元素，需用 <span></span> 等包裹，避免语义混乱。
radio/checkbox 点击 label 无法批量选中？检查 name 是否一致
多个 radio 要互斥选择，必须共享同一个 name 值；checkbox 若想分组操作（如全选），label 本身不提供批量逻辑，需额外 JS。
-
label永远只控制它绑定的那一个input - 点击
<label for="a"></label>不会影响<input id="b">，哪怕它们name相同 - 如果希望点击一个 label 控制多个 checkbox，得用 JS 监听 click 并手动设置
checked
移动端点击区域小？用 CSS 扩展 label 的可点击范围
原生 label 的点击热区仅限文字和内联内容，对小尺寸 checkbox/radio 很不友好。直接给 label 加样式即可：
例如让整个 label 区域都可点：
label {
display: block;
padding: 12px 16px;
cursor: pointer;
}
注意：不要给 input 本身设 display: none 后又忘了加 position: absolute; left: -9999px 等辅助方案——否则 label 失去绑定目标，点击无效。
真正容易被忽略的是：label 的可访问性依赖于 DOM 关联是否健全，而不仅是视觉效果。即使样式再漂亮，for 和 id 不配对，屏幕阅读器就无法正确播报控件关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
