label标签是表单可访问性的核心，必须正确关联控件：隐式包裹更可靠，显式for/id绑定易出错；禁用display:none隐藏控件；placeholder和aria-label不能替代label。
label 标签不是视觉装饰，它直接决定表单控件能否被键盘用户、屏幕阅读器正确识别——写错就等于把输入框“藏”了起来。
点击文字就能聚焦 input，这是浏览器原生行为
用户点击 label 文本时，浏览器自动将焦点转移到关联的 input、textarea 或 select 上。这个行为不依赖 JS，是 HTML 规范强制要求的底层机制。
- 只对可聚焦控件生效：比如
input[type="text"]、input[type="checkbox"]、textarea；input[type="hidden"]或div加了label也无效 - 视觉隐藏控件时，别用
display: none或visibility: hidden，否则点击label失效；应改用position: absolute; clip: rect(1px, 1px, 1px, 1px) - 移动端尤其依赖这个特性——复选框默认点击区域只有 12×12px，靠
label才能点得准
两种写法都有效，但隐式包裹更少出错
显式绑定（for + id）和隐式包裹（把控件塞进 label 里）都被浏览器支持，但风险差异很大：
- 隐式包裹：
<label>邮箱<input type="email" name="email"></label>—— 无需配对，DOM 移动也不怕断关联 - 显式绑定：
<label for="email">邮箱</label><input id="email" type="email">——for和id必须完全一致，大小写、空格、拼写全要对上 - 禁止混用：既写
for="email"又把input塞进label，部分浏览器会触发两次focus事件
没 label 的表单在无障碍场景下基本不可用
屏幕阅读器读不出“这是密码框”，键盘用户 Tab 到那里直接跳过——不是体验差，而是功能缺失：
-
placeholder不能替代label：它不构成可访问名称（accessible name），且输入后消失 -
aria-label是补充，不是替代：写了aria-label但没label元素，Tab 焦点仍可能跳过该控件 - 动态生成表单时，如果用
replaceWith()或innerHTML替换掉原始input，id就断了，必须手动重建关联或改用隐式包裹
最常被忽略的是：label 的语义只在 DOM 结构和属性真正匹配时才成立。哪怕代码一开始写对了，后续 JS 操作一动 DOM，关联就可能失效——这时候靠显式绑定的表单比隐式包裹的更容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
