纯HTML无法实现真正分步提交，必须用JavaScript控制显隐、校验与提交；需动态管理required属性、使用fieldset保障可访问性与禁用能力、中间按钮设为type="button"、数据存sessionStorage并同步步数。
纯 HTML 无法实现真正的分步提交效果，必须靠 JavaScript 控制显隐、校验和提交行为。浏览器的 <form></form> 标签本身只支持一次性提交，所谓“分步”，本质是视觉与状态管理的组合技。
为什么直接加 required 会导致全表单校验失败
浏览器原生校验不区分显示与否——只要 input 在 <form></form> 内且带 required 属性，哪怕 display: none 或 aria-hidden="true"，form.checkValidity() 仍会把它纳入检查范围。
- 用户点“下一步”时，若第 2 步字段也带
required，整个表单立刻返回false，焦点可能跳到第一个未填项，打断流程 - 常见错误是用 CSS 隐藏后就以为“脱离校验”，结果验证逻辑崩掉
- 正确做法：切换步骤前，批量移除非当前步所有
required属性：document.querySelectorAll('input[required]').forEach(el => el.removeAttribute('required'))，再给当前步字段加上 - 更稳妥的替代方案：完全弃用
required，改用 JS 手动校验：validateStep(2)只查[data-step="2"] input, [data-step="2"] select
<fieldset></fieldset> 不是可选装饰，而是语义与功能刚需
用 <div> 分组看起来一样，但缺失两个关键能力：可访问性支持和批量控件禁用。
<ul>
<li>
<code><legend></legend> 是屏幕阅读器识别步骤标题的唯一可靠方式；用 <h3></h3> 替代会切断语义链
fieldset.disabled = true 可一键禁用所有子控件（包括 input、select、button），而 div 没这能力fieldset 默认边框渲染不稳定，建议统一重置：fieldset { border: 0; padding: 0; margin: 0; }
<fieldset></fieldset> 内部，否则键盘 Tab 顺序会断裂，用户按 Tab 可能直接跳过整步中间按钮必须是 type="button"，不是 type="submit"
这是最容易被忽略、却最致命的一点。任何中间步骤的按钮如果设为 type="submit"，用户按回车或点击都会触发整个 <form></form> 的默认提交行为，导致页面刷新或跳转。
立即学习“前端免费学习笔记（深入）”；
- “下一步”“上一步”按钮一律设为
type="button"，并在 JS 中绑定点击事件 - 最后一步的“提交”按钮才用
type="submit"，且应在submit事件中调用event.preventDefault()，确保不刷新，再执行最终校验与数据发送 - 别依赖
onclick="nextStep()"写在 HTML 里，应统一用addEventListener管理，方便解耦和测试 - 若需 URL 同步（如支持浏览器后退），应在切步后调用
history.pushState()，并在popstate中恢复状态，但注意：多步表单通常不配真实路由，强行加易导致 history 栈混乱
数据暂存不能只靠 DOM，要防刷新丢失
用户刷新页面或意外关闭标签页，输入内容就没了。仅靠“所有字段在一个 <form></form> 内”不够，DOM 会重绘，JS 状态清空。
- 每次切步前，把当前字段值存入
sessionStorage：sessionStorage.setItem('formData', JSON.stringify(new FormData(form))) - 页面加载时，在初始化阶段就读取：
const savedData = sessionStorage.getItem('formData')，存在则还原 - 敏感字段（如身份证号、银行卡号）不要存
localStorage；sessionStorage关闭标签页即清空，更符合安全预期 - 别只存值，还要存当前步数：
sessionStorage.setItem('formStep', String(currentStep))，否则还原后不知道该显示哪步
真正难的不是让几步“看起来分开”，而是让每一步的校验、焦点、禁用、存储、可访问性全部对齐。漏掉其中任意一环，对普通用户可能是体验卡顿，对残障用户或自动化测试工具，就是不可用。
