label标签不是装饰，没写对就等于隐藏输入框；for与id必须逐字完全一致（大小写、符号、空格均敏感），否则点击无效、tab跳过、屏幕阅读器无法识别。
label 标签不是锦上添花的装饰，没写对就等于把输入框对键盘用户和屏幕阅读器“藏起来”了——点击无反应、Tab 跳过、VoiceOver 读不出字段用途，都是因为关联没建立。
label for 和 input id 必须逐字完全一致
浏览器不做模糊匹配，只做字符串全等判断。大小写、连字符、下划线、空格、拼写差一个字符，label 点击就失效。
- 错误示例：
<label for="email">邮箱</label>+<input id="Email" ...>（大小写不一致） - 错误示例：
<label for="user_email">邮箱</label>+<input id="user-email" ...>（下划线 vs 连字符） - 正确做法：复制粘贴
id值到for中；或用构建工具自动生成，避免手敲 - 动态渲染（如 React/Vue）中，必须确保
id在 DOM 插入后真实存在，且不重复；SSR 与 hydration 的id不一致会导致首次点击无效
隐式包裹比显式绑定更可靠但有边界
把 input 直接写进 label 内部，天然规避 for/id 匹配风险，也省去维护成本。
- 适用场景：
checkbox、radio、单行搜索框等布局紧凑、无需复用 label 文本的情况 - 正确写法：
<label>接收通知 <input type="checkbox" name="notify"></label> - 风险点：label 内含换行、注释、JS 动态插入内容时，DOM 结构可能断裂，导致关联失效
- 禁止混用：既包裹
input又写for，部分浏览器会触发两次focus，行为不统一
哪些元素能被 label 关联？别乱套
label 只对可聚焦、可交互的表单控件生效，不是所有元素都能“挂上”。
- 支持的控件：
input（除type="hidden"）、textarea、select、button、output（需配合for） - 常见错误：
<label for="desc">说明</label><div id="desc"></div>——div不可聚焦，点击无反应 - 别给
input[type="hidden"]加label：语义错误，辅助技术直接忽略 - 自定义组件（如封装的 Switch）若未透传
tabindex或role，即使包在label里，键盘也无法操作
移动端和无障碍依赖原生绑定，不能靠 CSS 或 JS 补救
点击 label 聚焦 input 是浏览器原生行为，不是靠 onclick 或 focus() 模拟出来的。一旦 DOM 移动或替换，关联就断了。
-
display: none或visibility: hidden的input，label点击必然失效；视觉隐藏请用position: absolute; clip: rect(1px, 1px, 1px, 1px) - JS 动态替换
input（如replaceWith()）后，for/id关系即中断；此时要么重建id，要么改用隐式包裹避免 DOM 移动风险 - iOS VoiceOver 和 Android TalkBack 都依赖这个绑定，CSS 扩大点击区域或 JS 绑定
click事件无法替代语义关联
最常被忽略的是：表格中每行 radio/checkbox 必须有独立 id 和对应 label，共用 id 或只写一个 label 就会让除第一行外全部失效——这种问题在动态渲染表格时尤其隐蔽，且调试时控制台不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
