label 的 for 属性必须严格匹配控件 id，否则点击无效；常见错误包括大小写、连字符不一致、控件缺失 id 或多个控件共用同一 id；radio/checkbox 每项需独立 id+for；嵌套写法简洁但不适用于 radio 组或动态移动控件；form 属性为补充手段，不可替代 for+id。
label 的 for 属性必须严格匹配控件 id，否则点击无效
浏览器和辅助技术只认 id，完全不看 name 或 class。哪怕 for="email" 和 name="email" 一模一样，只要控件没写 id="email"，点击文字就毫无反应。
- 常见错误现象：
for="user-name"对应id="username"（连字符不一致）、for="Phone"对应id="phone"（大小写错） - 控件缺失
id是最高频问题：<label for="phone">电话</label><input name="phone">→ 点击无聚焦 - 多个控件共用同一
id（如循环渲染未加索引），for只绑定到 DOM 中第一个匹配元素，行为不可预测 - 实操建议：用开发者工具选中
label，复制for值，在 Elements 面板 Ctrl+F 搜索该id，确认存在且唯一
radio/checkbox 组每个选项必须单独配 id + for
一组 radio 共享 name，但每个选项必须有独立 id 和独立 label。否则屏幕阅读器无法告知“当前焦点在‘男’还是‘女’”，也无法通过点击文字切换指定选项。
- 错误写法：
<label>性别:<input type="radio" name="gender" value="m">男<input type="radio" name="gender" value="f">女</label>→ 只有第一个input可响应 - 正确结构：
<input type="radio" id="gender-m" name="gender" value="m"><label for="gender-m">男</label>，同理配gender-f - 共用说明文字（如“请选择性别”）应放在
<fieldset><legend></legend></fieldset>里，而非包裹全部选项的label中 - 动态渲染时，
id必须用稳定标识拼接（如id="gender-${value}"），禁用随机字符串
嵌套写法更简洁，但只适用于单个原生控件
把控件直接写进 label 内部，天然建立关联，不用管 id 和 for，代码少、语义强、可访问性好。但它不是万能解法。
- 适用场景：
<label>密码:<input type="password" name="pwd"></label> - 不适用场景：radio 组（无法区分选项）、
<fieldset></fieldset>内部（破坏分组语义）、JS 动态移动后的控件（嵌套结构易断裂） - 嵌套时仍需保留
name，否则表单提交拿不到值 - 禁止嵌套另一个
label—— HTML 规范明确禁止
form 属性是 HTML5 新增能力，但慎用
label 的 form 属性允许它关联页面中任意位置的表单，甚至跨 form 元素。但它不解决核心可访问性问题，仅作补充。
- 典型用法：
<label form="search-form" for="q">搜索关键词</label><form id="search-form">...</form> - 注意：
form属性不能替代for+id；没有for，form不触发焦点传递 - 兼容性无虞（Chrome/Firefox/Safari/Edge 均支持），但旧版读屏支持不稳定，不能作为主关联手段
- 真实项目中，99% 场景只需
for+id或嵌套，form属边缘需求
id 唯一、for 精确、文本明确、无视觉隐藏陷阱。最容易被忽略的是动态渲染时 id 生成逻辑，以及 radio 组里把多个控件塞进一个 label 的惯性写法。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
