label for 属性必须与 input id 逐字符严格匹配才能跨区域生效，大小写、连字符、下划线均需一致；radio/checkbox 每项须有独立 id+for；嵌套写法仅限单控件且无插层；button 提交需用 form 属性而非 for。
label for 属性必须和 input id 逐字符匹配才能跨区域生效
label 能跨区域关联控件，靠的不是位置、父子关系或 class，而是 for 和 id 的严格字符串一致。哪怕 DOM 中 label 在页首、input 在页尾，只要 for="search-input" 和 id="search-input" 完全相等（大小写、连字符、下划线全对），点击就聚焦、读屏就朗读。
常见失效现象：click on label does nothing、Tab 键跳过该控件、屏幕阅读器报“无标签”。几乎全是匹配失败导致的。
-
for="email"对应id="user-email"→ 失效（连字符不一致） -
for="Username"对应id="username"→ 失效（大小写敏感） -
for="phone"对应name="phone"→ 失效（for不认name） - React/Vue 中动态生成
id={`input-${index}`}，但index为undefined→id="input-"→ 匹配失败
验证方法：在 DevTools 中选中 label，看右侧 for 值能否点击跳转到对应 input#xxx；再手动点文字，确认焦点是否落到目标控件上。
radio/checkbox 每一项都必须有独立 id + for，不能共用
一组 radio 共享 name 是为了互斥，但每个选项必须有自己唯一的 id 和对应的 label[for]。否则键盘用户无法用方向键切换、屏幕阅读器无法区分“男/女”，移动端点击区域也只剩 checkbox 本身那么小。
错误写法：<label for="gender">性别</label><input type="radio" name="gender" value="m">男 —— for="gender" 指向一个不存在的 id，且没给任何选项设 id。
- 每个
<input type="radio">必须带id（如id="gender-m"） - 每个
<label for="gender-m"></label>必须显式指向该id，不是name - 不要用一个
label包住整组 radio —— 语义断裂，辅助技术完全丢失单个选项 - 嵌套方式可行但需分项：
<label><input type="radio" name="theme" value="dark">深色模式</label>
submit 按钮用 form 属性跨容器提交，不是 for
for 只用于关联可聚焦控件（input、select、textarea 等），对 button 无效。当提交按钮不在 <form></form> 内部时，得用 form 属性指定目标表单 ID。
- 按钮必须是
type="submit"，否则form="xxx"被忽略 -
form属性值是目标<form id="login-form"></form>的id，不是class或name - 一个按钮只能关联一个表单（
form="a b"不被支持，空格分隔无效） - 兼容性注意：IE10+ 支持，旧版 IE 需降级为
document.getElementById('login-form').submit()
示例：<button type="submit" form="search-form">搜索</button><form id="search-form">...</form>
嵌套写法能绕过 id 管理，但只适用于单控件场景
把 input 直接写进 label 里，是隐式关联，不用 for 和 id，最不容易出错。但它有硬性限制：只能包一个原生可聚焦控件，且不能中间插层。
- ✅ 正确：
<label>密码：<input type="password" name="pwd"></label> - ❌ 错误：
<label>性别：<input type="radio" name="g" value="m">男<input type="radio" name="g" value="f">女</label>（只绑定第一个） - ❌ 错误：
<label><div><input></div></label>（div插层导致语义断裂） - ⚠️ 动态渲染时慎用：JS 移动控件位置后，嵌套结构可能失效，
label.control也不是标准 API，别依赖它做逻辑判断
真正容易被忽略的是：嵌套虽省事，但一旦表单要支持键盘导航、屏幕阅读器逐项朗读，或者将来加 JS 控制逻辑，显式 for/id 才是最可控、可测试、可维护的方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
