表单是用户与系统的信任对话，需注重可访问性、语义化和实时反馈：label 必须用 for/id 关联；input type 与 autocomplete 需配对；错误反馈要实时定位可操作；多步骤用 fieldset/legend 分层；提交后状态需妥善处理。
表单不是“填完就交”，而是用户和系统之间一次需要信任、清晰、不费力的对话。做得好，用户感觉不到存在；做不好，流失就在提交前一秒。
label 标签必须用 for/id 关联，别用包裹式
包裹式 <label>姓名<input></label> 看似省事，但会破坏屏幕阅读器的焦点同步，移动端点击区域也容易偏移。关联式才是可靠写法：给 <input> 加 id，<label></label> 用 for 指向它。
- 每个
input必须有唯一id，且与label for完全一致 - 避免多个
input共用一个id（浏览器不会报错，但辅助技术会失效） - 复选框/单选组的
label应包裹input本身，而非只包文字——这样整个标签区域都可点击
input type 和 autocomplete 要配对用，别只靠 placeholder
placeholder 不是标签，输入后就消失，对认知障碍或临时分心的用户极不友好。真正起效的是语义化的 type 和浏览器能识别的 autocomplete 值。
- 邮箱必须用
type="email"+autocomplete="email"，否则 iOS 键盘不会弹出 @ 符号快捷键 - 密码字段要区分场景：
autocomplete="new-password"（注册）、autocomplete="current-password"（登录） - 地址类字段优先用
autocomplete="street-address"、autocomplete="tel"等标准值，而不是自定义字符串 -
placeholder只作补充提示，比如 “例：138-XXXX-XXXX”，不能替代label
错误反馈必须实时、定位、可操作
等用户点“提交”才报错，等于把调试工作甩给用户。验证要发生在用户离开字段（blur）或输入过程中（input），且错误信息必须明确指出“哪个字段”“为什么错”“怎么改”。
- 用
aria-invalid="true"配合aria-describedby关联错误文案 ID，让屏幕阅读器自动朗读 - 视觉上别只改边框颜色——加图标、调整间距、确保对比度 ≥ 4.5:1
- JS 手动验证失败后，必须调用
input.focus()聚焦到第一个出错项，别让用户自己滚动找 - 保留已填内容，哪怕提交失败，也别清空整个表单
多步骤表单别堆在一页里，用 fieldset + legend 分层
长表单不是靠“滚动到底”完成的，而是靠心理节奏控制。把逻辑相关的字段用 <fieldset></fieldset> 包裹，用 <legend></legend> 命名，既提升语义结构，又为 JS 控制显隐提供天然锚点。
-
<fieldset disabled></fieldset>可一键禁用整组控件，比遍历每个input更可靠 - 配合 CSS 的
fieldset:disabled input选择器，能统一控制禁用态样式 - 移动端竖屏下，
<legend></legend>自动成为折叠/展开标题的理想载体 - 别用
<div class="step-1"> 模拟分步——语义丢失，无障碍支持归零 <p>最容易被忽略的，是表单提交后的状态处理：按钮禁用后没恢复、成功页没清除表单数据、错误页没保持 scroll 位置。这些细节不写进需求文档，但用户一试就感知得到。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
