纯html+css可跳转步骤容器通过display:none控制section显隐，保持所有步骤在dom中；用css grid实现响应式进度条；每步独立form或不用form标签，配合formdata手动收集数据并实时保存输入状态。
如何用纯HTML+CSS实现可跳转的步骤容器
多步骤表单本质是「同一页面内切换可见区域」，不需要iframe或页面跳转。核心是把每个步骤包裹在独立的 <section></section> 或 <div> 中，用 <code>display: none 控制显隐，再配合按钮控制当前步骤索引。
关键点在于：所有步骤必须保留在DOM中（不能用 v-if 或 ngIf 这类销毁式条件渲染），否则用户回退时会丢失已填数据。常见错误是误用 visibility: hidden —— 它仍占布局空间且无法阻止表单控件被提交。
- 给每个步骤容器加唯一
id，例如step-1、step-2 - 用一个全局变量（如
currentStep = 1）跟踪状态，而非依赖DOM class切换 - 前进/后退按钮不直接操作样式，而是调用统一函数更新
currentStep并触发重绘
用CSS Grid实现响应式进度条，不依赖JavaScript计算宽度
进度条不是装饰，它要准确反映「已完成步骤数 / 总步骤数」。硬编码 width: 66% 很危险——一旦新增步骤就得手动改所有地方。更可靠的做法是用 CSS Grid 的列轨道自动均分：
.progress-bar {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3步就写3，4步就写4 */
gap: 8px;
}
.progress-step {
height: 6px;
background: #e0e0e0;
}
.progress-step.active {
background: #2196f3;
}
.progress-step.completed {
background: #4caf50;
}
这样增减步骤只需改 repeat() 参数，无需动JS逻辑。注意：不要用 flex + calc()，移动端缩放时容易出现1px错位。
表单验证失败时如何阻止步骤切换
用户点「下一步」却没填完当前字段，不能靠JS弹alert糊弄——得聚焦到第一个错误项，并让该字段获得视觉反馈（如红边框+错误文案）。重点是：验证必须在 click 事件中同步执行，而不是等表单 submit。
- 对每步的必填字段用
querySelectorAll('input[required]')批量检查.checkValidity() - 如果任意一个返回
false，调用.reportValidity()触发原生提示，并return false阻止步骤变更 - 避免用
event.preventDefault()后自己模拟提示——会破坏屏幕阅读器兼容性 - 禁用「下一步」按钮直到当前步骤验证通过，比事后拦截更友好
为什么不能用 <form></form> 标签包裹全部步骤
整个向导套一个 <form></form> 看似合理，但会导致两个实际问题：一是所有步骤的 input 在页面加载时就参与表单校验（即使不可见），二是提交时会把未显示步骤的空值也序列化进去。
正确做法是每个步骤用独立 <form></form>，或干脆不用 <form></form> 标签——用 FormData API 手动收集当前步骤的字段值。这样既能利用原生验证API，又避免跨步骤干扰。
复杂点在于：当用户反复进出某一步，需要保留其输入状态。这时候别依赖 value 属性初始值，而要用 input 事件实时存到内存对象里，比如 formData['step2']['email'] = e.target.value。
