多步骤引导表单必须用单个包裹所有步骤，通过分组并动态禁用/启用，配合aria-hidden、tabindex、focus管理和aria-live保障可访问性，禁用fieldset实现干净数据隔离，最终提交前统一校验。
多步骤引导表单不是靠几个 <div> 切换就能算“实现”的——关键在于状态管理、DOM 可访问性、表单语义完整性和提交时机控制。没处理好这几点，用户用键盘 tab 导航会卡住，屏幕阅读器读不出当前步，后端还可能收不到全部字段。
<h3>如何用原生 HTML + JS 控制步骤切换而不破坏表单结构</h3>
<p>核心原则：整个表单仍是单个 <code><form></form>，所有输入控件保留在同一 DOM 树下，仅通过 CSS display: none 或 visibility: hidden 控制可见性。不能把每步拆成独立 <form></form>，否则：
-
required属性在隐藏字段上仍会触发验证，导致点击“下一步”时弹出错误提示 - 用户按回车键，浏览器可能找不到当前可见区域内的
type="submit"按钮而静默失败 - 用
FormData(this)收集数据时，被隐藏但未禁用的字段依然会被包含，容易造成脏数据
推荐做法是为每步包裹在 <fieldset></fieldset> 中，并用 aria-hidden="true" 和 tabindex="-1" 配合控制可访问性：
为什么不能只靠 CSS 切换，还得手动管理 focus 和 aria-live
纯视觉切换（比如只改 opacity 或 transform）对辅助技术无效。用户用键盘 tab 时，焦点仍会落到隐藏步骤的输入框上，造成操作断层。必须同步做三件事：
- 切换步骤时，调用
element.focus()聚焦到当前步第一个可交互元素（通常是第一个<input>或<button></button>） - 为当前步的
<legend></legend>或标题添加aria-live="polite"，让屏幕阅读器主动播报“现在是第 2 步：联系方式” - 每次切换前，把上一步的
fieldset设为disabled（注意：不是禁用 input，而是禁用整个 fieldset，这样其子元素不会参与表单提交）
禁用 <fieldset disabled></fieldset> 后，里面的 required 字段不再触发验证，FormData 也不会收集它们的值——这才是干净的数据隔离方式。
提交时怎么确保只发当前有效字段，且不漏掉隐藏但已填的值
常见误区是“最后一步才收集全部数据”，结果发现用户在第 1 步填了姓名、第 3 步改了邮箱，但第 2 步跳过没填——这时你得决定：是阻止提交，还是允许部分字段为空？答案取决于业务逻辑，但技术上必须明确：
- 不要在每步都调用
form.submit()，那会多次触发完整提交流程 - 最终提交前，遍历所有
fieldset:not([disabled])下的input、select、textarea，检查是否满足required和pattern约束 - 如果某字段有值但被
disabled的fieldset包裹，它不会出现在FormData中；若需保留历史填写内容，应在 JS 中单独缓存对象，而不是依赖 DOM 状态 - 后端必须能接受部分字段缺失（如中间步骤暂存），不能假设所有
name都存在
也就是说，前端的“步骤”只是 UI 引导层，真正的数据完整性校验和字段必填逻辑，必须由后端兜底或由前端在最终 submit 前统一跑一遍校验规则。
最易被忽略的一点：移动端软键盘弹起后，页面滚动位置错乱，导致“下一步”按钮被遮挡。别只加 scrollIntoView，得监听 resize 事件，在键盘收起后再恢复焦点——否则用户点完“下一步”，光标还在上一个输入框里。
