label应放在input前面（显式绑定时）或嵌套在label内（隐式绑定时），以确保语义正确、焦点顺序合理及屏幕阅读器正常读取；复选框/单选按钮例外，label通常后置。
label应该放在input前面还是后面？
label位置不影响语义绑定，但影响视觉流和键盘焦点顺序。浏览器默认按DOM顺序聚焦，所以
常见错误是把label写在input之后，导致Tab键聚焦时先跳到输入框、再跳到label（逻辑反了），屏幕阅读器也会先读“请输入密码”，再读“密码”，语义断裂。
- 登录表单中，
username、password等字段的label统一前置，保持阅读动线从左到右、从上到下 - 复选框/单选按钮例外：label通常后置，因为用户习惯先看到选项再确认（如“记住我”
<input type="checkbox"><label>记住我</label>） - 不要用CSS强行反转视觉顺序（比如
flex-direction: row-reverse），这会让辅助技术读取顺序和视觉顺序不一致
登录表单里该用显式for/id还是隐式嵌套？
隐式嵌套（把input直接写进label标签内）在登录表单中更稳妥，尤其当字段简单、无复杂布局需求时。
显式绑定（for + id）适合需要复用label文本、或label需独立定位（比如和input不在同一行、或带图标/帮助按钮）的场景，但风险高：ID拼错、重复、动态渲染未同步都会让绑定失效。
- 纯文本输入框（
type="text"、type="password"）优先用嵌套：<label>用户名：<input name="username"></label> - 如果label里要加
<span class="icon-help"></span>或错误提示文案，改用显式绑定，避免结构混乱 - 禁止混用：既嵌套又写
for，部分浏览器会触发两次focus事件
“登录”按钮要不要加label？
不需要，也不应该加label。button元素本身是可聚焦、可交互的语义化控件，自带可访问名称（按钮文本就是它的aria-label），加label反而破坏语义，多数浏览器会忽略或报错。
同理，type="submit"的input也不该被label包裹或绑定。
- 正确写法：
<button type="submit">登录</button>或<input type="submit" value="登录"> - 若按钮文字不够明确（如只用图标），应改用
aria-label或aria-labelledby，而不是硬套label - 表单底部的“忘记密码？”链接属于独立导航，不是控件标签，用普通
<a></a>即可
移动端登录表单的label隐藏陷阱
别为了“简洁”把label设为display: none或visibility: hidden，这会让屏幕阅读器完全跳过它——用户听到“编辑文本”却不知道这是邮箱还是验证码。
真要视觉隐藏（比如只留placeholder），必须用无障碍友好的方式隐藏：
- 用
position: absolute; clip: rect(1px, 1px, 1px, 1px);隐藏label文本，但保留在DOM中供辅助技术读取 - 同时确保
placeholder只是补充提示，不能替代label（WCAG 2.1明确要求） - iOS VoiceOver在登录页对label缺失极其敏感，一旦没绑定，用户可能反复Tab却找不到“密码”字段在哪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
