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