分步表单必须用单个form包裹全部字段，通过javascript控制显隐和校验；拆分为多个form会导致数据丢失、无障碍失效、自动填充错乱等问题。
分步提交的表单不能靠 HTML 自己“分页”，必须用 JavaScript 控制显隐、校验和提交时机；核心是单个 form 包裹全部字段，用 fieldset 划分步骤，中间按钮必须是 type="button"。
为什么不能拆成多个 form 标签
拆成多个 form 会导致：后端只收到当前步字段（其他 form 的 input name 不参与序列化）、Tab 键顺序断裂、屏幕阅读器无法感知整体流程、浏览器自动填充错乱。所有字段必须保留在同一个 form 内，哪怕只显示其中一部分。
-
form的action和method只设一次，指向最终接收完整数据的接口 - 每步容器（如
fieldset）是form的直系子元素，不可嵌套form - 若用
div替代fieldset，需手动补aria-labelledby等无障碍属性
type="button" 和 type="submit" 必须严格区分
点“下一步”时如果触发了默认提交，整个流程就崩了——页面刷新、数据丢失、校验跳过。浏览器对 type="submit" 的行为是强绑定的，event.preventDefault() 在某些 Safari 版本里甚至不生效。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 所有中间步骤按钮统一写
<button type="button" onclick="nextStep()">下一步</button> - 最后一步的提交按钮才用
<button type="submit">提交</button>，且不应加onclick - 千万别给“下一步”加
form="xxx"属性，它会强行绑定提交目标，绕过你的 JS 控制
required 属性必须动态开关，或干脆弃用
浏览器原生校验不管 display: none 或 aria-hidden="true"，只要 input 在 form 里且带 required，就会被 form.checkValidity() 扫到。第 2 步的必填项在第 1 步时就报错，焦点还可能跳走。
- 切步前执行：
document.querySelectorAll('input[required]').forEach(el => el.removeAttribute('required')) - 再为当前步字段加回：
document.querySelectorAll('[data-step="2"] input').forEach(el => el.setAttribute('required', '')) - 更推荐方案：完全不用
required，改用函数校验：validateStep(2)只查[data-step="2"] input[required]
切换步骤后必须手动聚焦，否则键盘用户卡住
仅靠 display: block 显示新步骤不够。屏幕阅读器和键盘 Tab 流依赖焦点位置，隐藏步骤的字段仍存在于 DOM 中，但用户无法自然抵达。
- 每次
showStep(n)后，立刻调用：document.querySelector('[data-step="' + n + '"] input:not([type="hidden"]):not([disabled]):first-of-type')?.focus() - 避免用
scrollIntoView()代替focus()，它不保证获得焦点 - 如果当前步首个字段是
type="hidden"或disabled，得主动找下一个可编辑元素
最容易被忽略的是：后端绝不能信任前端传来的 “step=3” 字段来决定校验范围；所有字段都应在一次 POST 中送达，并按完整业务规则校验——否则绕过第 2 步直接提交第 3 步，数据就残缺了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
