label 的 for 属性必须严格匹配 input 的 id。二者须字符串完全相同、区分大小写，且 id 全局唯一；name 不可用于关联，aria-labelledby 仅增强可访问性，不触发交互；嵌套 input 到 label 内是可靠替代方案。
label 的 for 属性必须匹配 input 的 id
这是最常用也最可靠的关联方式。label 通过 for 属性指向一个 input 元素的 id，点击 label 就能聚焦或切换对应表单控件。
常见错误是拼写不一致，比如 for="user-name" 对应了 id="username"（少了个短横）——浏览器完全无法识别这种“近似匹配”。
-
input必须有明确的id，且该id在整个页面唯一 -
label的for值必须与input的id字符串完全相同（区分大小写） - 不支持用
name或class替代id进行关联
把 input 写在 label 标签内部也能自动关联
如果不想额外写 id 和 for，可以把 input 直接嵌套进 label 里。这种方式天然绑定，无需属性配对，语义清晰且兼容性好（IE9+ 都支持）。
注意：只有当 input 是 label 的直接子元素或深层后代时才生效；但更推荐直接子级写法，避免意外包裹其他内容导致点击区域异常。
<label> 用户名： <input type="text" name="username"></label>
为什么不用 name 关联？
name 是提交时的字段标识，不是 DOM 定位依据。浏览器不会根据 name 查找并绑定 label —— 即使你写了 for="username" 而 input 只有 name="username"，点击 label 也不会有任何反应。
这个坑常出现在复制粘贴旧代码时：有人误以为 name 和 for 对应就行，结果表单可访问性失效，屏幕阅读器也无法正确播报。
-
name影响表单提交和 JS 获取值（如form.username.value） -
id才是 DOM 中用于锚点、CSS 选择、label关联的唯一标识 - 一个
name可以对应多个input（如单选组），但id绝对不能重复
aria-labelledby 是补充方案，不是替代方案
当需要让一个 label 关联多个 input，或者 input 已经被其他结构包裹（比如放在表格里不便加 id），可以用 aria-labelledby 指向一个或多个元素的 id。
但它只提升可访问性（供读屏软件使用），**不会触发原生交互行为**：点击带 aria-labelledby 的文本，input 不会获得焦点或切换状态。
- 仍需配合
for+id或嵌套方式实现可点击 -
aria-labelledby的值是空格分隔的多个id，如aria-labelledby="label1 label2" - 不要为了“看起来高级”而弃用
for——基础功能必须靠它
实际项目里最容易忽略的是 id 的唯一性和大小写一致性，尤其多人协作或模板拼接时，id 动态生成出错，for 就彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
