多步骤表单必须用单个form包裹全部步骤，使用fieldset分步、动态控制required、sessionstorage存步数和数据，并确保“下一步”为type="button"、“提交”为type="submit"。
form标签不能拆，但必须只提交一次
多步骤表单里，form 标签必须包裹全部步骤，不能为每步新建一个 form。否则浏览器会丢失字段 name 映射、重置验证状态、破坏键盘 Tab 顺序，而且后端收不到完整数据。
常见错误是把每步写成独立 form，结果最后一步点提交，只发了当前步的字段——因为其他 form 已被 DOM 移除或未参与序列化。
- 所有步骤容器（
fieldset或div）必须嵌套在同一个form内 -
form的action和method只设一次，指向最终提交目标 - 中间“下一步”按钮必须是
type="button"，否则回车或点击会直接触发表单提交 - 最后一步的“提交”按钮才用
type="submit"，且应调用form.submit()而非 JS 模拟 click
required 属性必须动态开关，否则校验全崩
浏览器原生校验不认 CSS 显隐，只看 DOM 结构。只要 input 在 form 里且带 required，哪怕 display: none 或 visibility: hidden，form.checkValidity() 仍会把它算进去。
用户点“下一步”时，若第 2 步字段也带 required，整个表单立刻报错，焦点还可能跳到第一个未填字段，体验断裂。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 切换步骤前，先移除所有非当前步字段的
required属性：document.querySelectorAll('input[required]').forEach(el => el.removeAttribute('required')) - 再给当前步字段加上：
document.querySelectorAll('[data-step="2"] input').forEach(el => el.setAttribute('required', '')) - 更稳妥的做法是彻底弃用
required，改用 JS 手动检查：validateStep(2)只查[data-step="2"] input, [data-step="2"] select
用 fieldset 而不是 div 包裹每步，不只是为了好看
fieldset 提供两个不可替代的底层能力：语义可访问性 和 批量禁用。用 div 替代，屏幕阅读器读不出上下文，键盘 Tab 会跳过整步，旧版 IE 渲染还可能异常。
比如设置 fieldset.disabled = true，里面所有 input、select 自动变灰+不可交互；而 div 需要遍历子元素手动设 disabled，漏一个就出问题。
- 每步必须用
fieldset，配legend作标题（如<legend>联系信息</legend>） - “下一步”按钮得放在
fieldset内部，否则 Tab 键无法自然进入下个控件组 - 视觉隐藏不用
display: none，改用position: absolute; clip: rect(1px, 1px, 1px, 1px)，保证 DOM 存在且可读
sessionStorage 存两样东西：步数 + 数据，缺一不可
页面刷新或用户点浏览器后退，默认清空 JS 状态。不存，用户回到上一步时字段全空，填过的内容白费。
只存步数不存数据？切步后字段值没还原，UI 和实际状态不一致；只存数据不存步数？JS 不知道该显示哪步，初始化就错乱。
- 切步前执行：
sessionStorage.setItem('formStep', String(nextIndex))和sessionStorage.setItem('formData', JSON.stringify(formData)) - 页面加载时，在 JS 初始化最开头就读：
const savedStep = sessionStorage.getItem('formStep')，存在则立即showStep(Number(savedStep))并restoreData() - 敏感字段（如身份证号、银行卡号）别用
localStorage，sessionStorage关闭标签页即销毁，更安全
type="submit"，或者忘了在 form 上监听 submit 事件并 event.preventDefault() —— 这会导致还没验证、没存数据，表单就直接提交了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
