HTML 表单本身不支持分页，必须靠后端或 JavaScript 控制
HTML <form></form> 只是数据容器和提交通道，没有内置分页逻辑。所谓“表单分页”，实际是把一个长表单拆成多步，每次只展示部分字段，用户点击“下一步”才加载/显示下一部分——这本质是 UI 状态管理，不是 HTML 自带能力。
常见错误现象：TypeError: Cannot read property 'next' of undefined（JS 分页逻辑没初始化好）、表单提交后只拿到最后一步的数据（没合并各步 input 值）、回退时输入内容丢失（没缓存中间状态）。
- 纯前端分页：用 JavaScript 切换
fieldset或div的display状态，所有字段保留在 DOM 中，提交前收集全部input值 - 服务端分页：每次“下一步”都发一次
POST，后端存临时数据（如 session 或数据库），返回下一页 HTML 片段；适合敏感/大数据量场景 - 混合方式：前端暂存当前步数据，最后一步统一提交；需注意
required属性只校验当前可见字段，得手动控制setCustomValidity()
用 fieldset + legend 组织多步表单结构最稳妥
比用一堆 div 更语义化，屏幕阅读器友好，且天然支持 :disabled 批量禁用一组控件。关键不是“怎么写”，而是“怎么切分”：每步的字段应有明确业务边界（比如“1. 联系信息 → 2. 支付方式 → 3. 确认”），而不是按字段数量硬拆。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<form id="multiStepForm">
<fieldset id="step1">
<legend>联系信息</legend>
<input name="email" required>
<input name="phone">
</fieldset>
<fieldset id="step2" style="display:none">
<legend>支付方式</legend>
<input name="cardNumber">
</fieldset>
<button type="button" onclick="goToStep(2)">下一步</button>
</form>
- 不要给每步
fieldset加required，否则隐藏步的字段会触发校验失败 - 切换时用
element.style.display = 'none'比classList.toggle()更可控，避免 CSS 冲突 - 禁用非当前步的
input（input.disabled = true），防止用户用 DevTools 修改并绕过 JS 控制
localStorage 缓存中间数据时要注意有效期和字段覆盖
用户刷新页面后能回到当前步，靠的是把每步填的数据存在 localStorage。但直接 JSON.stringify() 整个表单对象容易出问题：字段名冲突（比如两步都有 name）、未填写字段被存为 null 或空字符串、敏感信息（如密码）误存。
- 按步存：键名用
"form_step_1"、"form_step_2"，避免混在一起 - 只存用户改过的字段：
if (input.value !== input.defaultValue) { save(input.name, input.value) } - 清空缓存时机要明确：成功提交后调用
localStorage.removeItem()，不要等用户关浏览器 - 注意 Safari 无痕模式下
localStorage会抛QuotaExceededError，需 try/catch 包裹
后端接收多步数据时，别依赖前端传来的“step”参数做流程校验
有人在每步提交时加 <input type="hidden" name="step" value="2">，然后后端用这个判断“该不该收这步数据”。这是危险的——攻击者可直接 POST step=5 跳过前面校验步骤。
真正可靠的校验在服务端：检查 session 中是否已存 step1 数据、当前请求字段是否属于该步允许提交的白名单、必要字段是否存在且格式合法。
- 后端应维护一个状态机：step1 完成 → 允许接收 step2；step2 失败 → 不进 step3
- 不要在 URL 里暴露 step 编号（如
/form?step=3），容易被篡改 - 如果用 token 控制流程，每个 step 提交时生成新 token 并绑定 session，旧 token 一次性失效
分页表单最难的不是切换动画或样式，而是状态一致性——前端显示的步数、localStorage 存的字段、session 记的进度、数据库最终落库的数据，四者必须严格对齐。任何一环脱节，用户就会卡在“明明填了却说没填”或者“点提交没反应”的地方。
