不能用多个独立form标签做分步，因为每次提交都是独立请求，服务端收不到上一步数据；必须用单个form配合fieldset分步，通过JavaScript管理状态、校验和数据持久化。
为什么不能用多个独立 form 标签做分步
每个 <form> 提交都是独立请求，上一步数据在服务端根本收不到——除非你手动把前几步数据塞进隐藏字段传给下一步，但那就等于自己实现状态传递，反而比单个 <form> 更容易出错。
常见错误现象：TypeError: Cannot read property 'next' of undefined（JS 未初始化当前步）、提交后 $_POST 只有最后一页字段、回退刷新直接清空所有输入。
- 所有字段必须保留在同一个
<form>内，哪怕视觉上分多页 - 用
<fieldset>包裹每步，语义清晰且天然支持disabled批量控制 - 别给非当前步的
<fieldset>加required，否则隐藏字段会触发校验失败 - 切换时用
element.style.display = 'none'比 CSS class 切换更可控，避免样式冲突
怎么阻止默认提交并正确管理步骤状态
浏览器对 <button type="submit"> 的默认行为是整页刷新，中间步骤必须拦截。漏掉 event.preventDefault()，所有 JS 逻辑都白写。
- 中间步骤按钮统一用
type="button"，彻底规避误触发提交 - 最后一步的“提交”按钮才保留
type="submit"，且不调preventDefault() - 用
data-step属性标记当前步，比如<fieldset data-step="2">，比靠索引更易维护 - 每次切换前存当前步数据到 JS 对象（如
formData），键名严格对齐input[name]，不依赖 DOM 实时读取
如何校验当前步而不影响其他字段
form.checkValidity() 会扫全部字段，包括隐藏的，必然报错。必须限定校验范围。
立即学习“前端免费学习笔记（深入）”；
- 只查当前步内的必填和格式字段：
document.querySelectorAll('[data-step="2"] :required, [data-step="2"] [type="email"]') - 对每个字段调
field.checkValidity()，失败就field.focus()，比弹 alert 更自然 - 邮箱验证优先用
type="email"，浏览器自带基础校验，兼容性好且无需硬写正则 - 别删 DOM 元素，用
display: none或aria-hidden控制可见性，确保键盘导航仍可访问
页面刷新或浏览器后退时数据不丢的关键点
原生后退会重载页面，JS 状态全清。要保留，必须主动存取，但不是所有字段都适合存。
- 仅用
sessionStorage存formData和当前步索引：sessionStorage.setItem('formStep', '2')、sessionStorage.setItem('formData', JSON.stringify(data)) - 初始化时优先读
sessionStorage，存在则跳转对应步并还原数据，放在 JS 最开头执行 - 敏感字段（如身份证号、银行卡号）绝不可存
localStorage或sessionStorage - 不要监听
popstate做路由跳转——多步表单通常不配真实路由，强行加会让 history 栈混乱
history.pushState({ step: 2 }, '', '?step=2') 更新地址栏，简单但有效。 
