label 的 for 属性是可访问性的硬性依赖，必须严格匹配控件的 id（而非 name），且 id 需唯一、大小写敏感；radio/checkbox 每项须独立配对；嵌套 label 仅适用于单控件；form 属性支持跨表单关联。
label 的 for 属性不是可有可无的装饰，它是让点击文本触发控件、支持读屏软件、满足 WCAG 可访问性要求的硬性依赖。没配对或配错，就等于废了一半表单交互。
for 属性必须严格匹配控件的 id
浏览器和辅助技术只认 id，完全不看 name。哪怕 name 和 for 一模一样，只要控件没写 id 或大小写/连字符不一致，点击 label 就不会聚焦或切换控件。
-
for="email"必须对应<input id="email">，不能是id="Email"或id="user-email" - 控件缺失
id是最常见错误： → 点击无效 - 多个控件共用同一
id（比如 JS 动态渲染时未去重），for只会绑定到 DOM 中第一个匹配的元素
radio 和 checkbox 组必须每个选项单独配对
一组 radio 共享 name，但每个选项必须有唯一 id 和独立 label；否则屏幕阅读器无法告知用户“当前焦点在‘男’还是‘女’”，也无法通过点击文本切换指定选项。
- 错误写法：
<label>性别：<input type="radio" name="gender" value="m">男</label>（只包一个label，且没id） - 正确写法：
<input type="radio" id="gender-m" name="gender" value="m"><label for="gender-m">男</label> - 别漏掉所有选项——哪怕只有两个，也得各自有
id+for
嵌套写法更简单，但有适用边界
把控件直接写进 label 内部，天然建立关联，不用管 id 和 for，代码少、语义强、可访问性好。但它只适用于单个控件，且不适用于需要动态移动或分组管理的场景。
- 适合：
<label>密码：<input type="password" name="pwd"></label> - 不适合：
radio组（无法区分选项）、fieldset内部（破坏语义分组）、JS 拖拽后重新插入 DOM 的控件（嵌套结构易断裂） - 注意：嵌套时仍需保留
name，否则表单提交拿不到值
form 属性用于跨表单关联（HTML5）
当 label 在 <form></form> 外部，但逻辑上属于某个表单时，可用 form 属性指定目标表单的 id。此时 for 仍要指向控件 id，只是这个控件可以不在同一个 <form></form> 标签内。
- 典型场景：全局搜索框的
label放在页头，而input在导航栏右侧，但都属于<form id="search-form"></form> - 写法：
<label for="q" form="search-form">搜索</label><input id="q" name="q"> - 注意：
form值必须是页面中真实存在的<form></form>的id，否则提交时该字段可能被忽略
最容易被忽略的是：for 匹配失败时，页面看起来完全正常，但键盘用户无法用 Tab 键跳转到对应控件，视障用户听不到标签描述，移动端点击区域也没扩大——问题藏得深，上线后才暴露。每次加 label，先查 id 是否存在、是否唯一、是否拼写一致，比事后调试快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
