label 和 for 必须严格配对，确保 for 值与 input 的 id 完全一致且唯一；禁用包裹式写法；type 和 autocomplete 需按语义选用；fieldset+legend 是唯一可靠分组方案；required 须与 aria-invalid 联动并提供具体错误提示。
label 和 for 必须严格配对，不能靠视觉“看起来像”
很多页面把 label 和 input 并排放，CSS 控制样式让它们对齐，但没写 for 和 id，结果屏幕阅读器读不出字段含义，触屏点击区域也只响应 input 本身——用户点文字没反应。
必须确保：label 的 for 属性值与对应 input 的 id 完全一致；id 在整个页面中唯一；避免用包裹式写法 <label>姓名<input></label>，它在旧浏览器和自动化测试中不可靠。
移动端尤其关键：点击 label 文字 = 自动聚焦 input，这是免费的交互提升，不用 JS 就能实现。
input type 和 autocomplete 要按语义选，别全用 text
用 type="text" 扛所有输入，等于主动放弃浏览器原生能力：键盘弹错、校验缺失、自动填充失效，全是连锁反应。
常见搭配建议：
- 邮箱字段必须用
type="email"，触发邮箱键盘 + 浏览器基础格式校验（如检查 @ 符号） - 密码字段用
type="password"+autocomplete="current-password"，否则 Chrome 可能拒绝保存 - 手机号用
type="tel"，iOS 会显示数字键盘；纯数字范围用type="number"+min/max - 地址类字段优先用标准
autocomplete值：autocomplete="street-address"、autocomplete="country"等，别自定义字符串
fieldset + legend 是分组唯一可靠方案
用 div 加 class 模拟分组（比如 <div class="section-title">联系方式</div>）对可访问性无效。屏幕阅读器无法识别“这下面几个字段是一组”，也无法快捷跳转。
fieldset + legend 是 HTML 原生分组机制：
-
legend内容会被读作“联系方式组”，然后依次读出该组内每个带label的控件 - 多步骤表单中，可配合
disabled属性禁用非当前步的fieldset，比 JS 控制 DOM 更轻量 - 不要为了省事用 CSS 隐藏
legend，可用position: absolute; clip: rect(1px, 1px, 1px, 1px)实现视觉隐藏但保留可访问性
required 和 aria-invalid 必须联动，不能只靠 required
required 只控制提交拦截，不提供运行时状态。用户输错邮箱格式，required 不报错；JS 校验后若只改样式，屏幕阅读器仍读不出“这个字段错了”。
正确做法：
- 所有必填字段都加
required，但错误状态必须由 JS 同步更新aria-invalid="true" - 错误提示文案要具体，比如“邮箱域名缺少 @ 符号”，不能只写“格式错误”
- 提交失败后，用
input.focus()聚焦第一个aria-invalid="true"的字段，别让用户手动滚动找
最容易被忽略的是：表单结构一旦定型，后续加 JS 验证或 UI 动效都难挽救语义缺陷。控件没 label、没 id、没 fieldset，再复杂的前端逻辑也补不回可访问性根基。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
