label标签是表单可访问性与交互的基础，必须正确绑定：for需匹配唯一id（不可数字开头、区分大小写），或采用嵌套隐式绑定（仅限一个可聚焦子元素）；radio/checkbox每项须独立label；隐藏控件仍需有效label。
label 标签不是装饰性文字，它是表单可访问性和交互逻辑的基础设施。不加 label 或绑定错误，会导致屏幕阅读器无法朗读字段含义、移动端点击区域过小、键盘用户无法用 Tab + Enter 操作复选框——这不是“体验优化”，而是基础功能缺失。
for 属性绑定必须匹配 id，且 id 必须唯一
显式绑定靠 for 和 id 一一对应。浏览器只做字符串比对，不校验元素是否存在或类型是否合法。
- 如果
<label for="email">邮箱</label>，但页面里没有id="email"的表单控件，点击标签完全无效 - 多个控件用了同一个
id（比如复制粘贴没改），for只会关联到 DOM 中第一个匹配的元素 -
id值不能以数字开头（如id="1user"），部分旧版 Safari 会忽略该绑定 -
for属性值区分大小写，for="Email"和id="email"不匹配
嵌套写法无需 id，但只认第一个可聚焦子元素
把 input 直接写在 label 里面，是隐式绑定，省去 id 管理，适合简单场景。
- 这种写法下，
label内部只能有一个可聚焦的表单控件（如input、select、textarea），多塞一个就会失效 - 常见错误：在
label里混入span、div或多个input，比如<label>年龄：<input type="number"><input type="range"></label>——只有第一个生效 - 嵌套时，
label的文本内容和控件顺序不影响功能，但语义上建议文字在前、控件在后（便于屏幕阅读器自然朗读）
radio/checkbox 组合中，每个选项都要独立 label
一组 radio 或 checkbox 不是共用一个 label，而是每个选项配一个 label，否则无法单独点击切换。
- 错误写法：
<label for="gender">性别：<input type="radio" name="gender" value="m">男 <input type="radio" name="gender" value="f">女</label>——for只能指向一个id，这里根本没设id，整个绑定失效 - 正确做法：每个
input都有唯一id，各自配label；或每个都用嵌套方式：<label><input type="radio" name="gender" value="m">男</label> - 注意
name属性必须一致才能构成单选组，id则必须互异
最容易被忽略的是：即使视觉上用了 CSS 隐藏了 input（比如自定义 checkbox 样式），label 仍必须存在且正确绑定——否则键盘用户和屏幕阅读器就彻底失去操作入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
