表单问题源于 html 结构错误，应使用语义化标签：label 与 input 须用 for/id 配对；按场景选用 type 和 autocomplete；fieldset+legend 进行逻辑分组；required 须联动 aria-invalid 并提供具体错误提示。
表单填不完、输错没提示、提交后全清空——这些问题不是用户笨，是 HTML 结构和属性用错了。核心在于：用对原生语义、让浏览器替你干活，而不是靠 JS 补救。
label 和 for 属性必须配对，不能只靠视觉对齐
很多页面把 label 和 input 并排放，样式看着像关联，但没写 for 和 id，屏幕阅读器读不出字段含义，触屏点击区域也小（只响应 input 本身，不响应 label 文字）。
- 必须用
for="xxx"指向input的id，且两者值严格一致 - 避免包裹式写法
<label>姓名<input></label>，它在某些旧浏览器或自动化测试中不可靠 - 移动端尤其关键：点击 label 文字 = 自动聚焦 input，这是免费的交互提升
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>）对可访问性无效。屏幕阅读器无法识别“这下面几个字段是一组”，也无法快捷跳转。
- 每组相关字段必须包在
<fieldset></fieldset>里，标题用<legend></legend>，不是<h3></h3> -
<legend></legend>内容会被读作“联系方式组”，然后依次读出该组内每个带 label 的控件 - 多步骤表单中，可配合
disabled属性禁用非当前步的 fieldset，比 JS 控制 DOM 更轻量
required 和 aria-invalid 要联动，不能只靠 required
required 只控制提交拦截，不提供运行时状态。用户输错邮箱格式，required 不报错；JS 校验后若只改样式，屏幕阅读器仍读不出“这个字段错了”。
- 所有必填字段都加
required，但错误状态必须由 JS 同步更新aria-invalid="true" - 错误提示文案要具体，比如
<span role="alert">邮箱域名缺少 @ 符号</span>，不能只写“格式错误” - 提交失败后，用
input.focus()聚焦第一个aria-invalid="true"的字段，别让用户手动滚动找
最容易被忽略的是：表单结构一旦定型，后续加 JS 验证或 UI 动效都难挽救语义缺陷。与其堆交互效果，不如先确保 label、input、fieldset、aria-invalid 这四样东西在 DOM 里严丝合缝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
