display: "wizard" 是 formio.js 的 JSON Schema 配置项，非原生 HTML 属性；纯原生表单需用多个独立 <form> 元素管理步骤，通过 JavaScript 控制显隐与验证，避免 fieldset 语义陷阱及提交干扰。
form 元素的 display 属性设为 wizard 时，为什么表单不切换步骤？
因为 display: "wizard" 只是 formio.js 的配置项，不是原生 HTML <form> 的属性。直接在 HTML 中写 <form display="wizard"> 完全无效，浏览器会忽略它。
真正起作用的是 formio.js 渲染器读取 JSON Schema 后的内部逻辑。如果你用的是纯原生 <form> 标签 + 手写 JS 实现多步骤，display 属性根本不存在，也别指望它自动分页。
- 确认你用的是 formio.js（或类似 JSON 驱动的表单库），而不是裸写 HTML 表单
- 检查 JSON 配置中是否漏写了
"display": "wizard"，且该字段在顶层form对象里 - 确保所有步骤都包裹在
type: "panel"组件内——formio.js 只识别panel为可切换页面 - 如果用了自定义渲染器，需手动实现
next/previous按钮逻辑，formio.js 不会自动注入按钮 DOM
如何用原生 form + JavaScript 控制步骤切换，而不依赖嵌套 fieldset 或 div？
关键在于把每个步骤当作独立 <form> 元素管理，而非一个大 <form> 里塞多个 <fieldset>。这样能避免 submit 事件冒泡干扰、验证状态污染，也更利于中途保存。
示例结构：
<form id="step-1" class="step-form"> <input name="email" required /> <button type="button" data-action="next">下一步</button> </form> <form id="step-2" class="step-form hidden"> <input name="password" type="password" required /> <button type="button" data-action="prev">上一步</button> <button type="submit">提交</button> </form>
- 每个
<form>独立调用checkValidity()，互不影响 - 用
data-action区分按钮行为，避免混用type="submit"导致意外提交 - 隐藏非当前步骤用
hidden属性或 CSSdisplay: none，不要用disabled——它会让内部控件失去焦点和验证能力 - 步骤数据建议存在内存对象里（如
formData = { step1: {}, step2: {} }），而不是靠 DOM 临时取值
为什么不用 fieldset 做步骤容器？它不是语义化更好吗？
是的，<fieldset> 语义正确，但实际开发中容易踩三个坑：
-
<fieldset disabled>会让整个组不可交互，且checkValidity()返回true（即使内部有 required 字段）——验证失效 - 多个
<fieldset>套在一个<form>里时，form.elements仍返回全部控件，无法按步骤隔离验证范围 - 屏幕阅读器对嵌套
<fieldset>的支持不一致，部分 NVDA 版本会跳过中间层级 - 若需支持“暂存草稿”，单个
<form>提交所有字段会把未填步骤的空值也发过去，而分离的<form>可精确控制每步提交内容
form 元素的 action 和 method 在多步骤中怎么设才合理？
绝大多数场景下，**所有步骤的 <form> 都应设 method="POST"，但 action 留空或设为 "#"**。
理由很实在：
- 真实提交只发生在最后一步，前面步骤只是收集和校验，不需要触发网络请求
- 设
action="/api/step1"会导致每次点“下一步”都发一次请求，增加后端负担且破坏前端状态流 - 留空
action后，点击type="submit"按钮默认会刷新页面——这正是你要阻止的行为，所以必须监听submit事件并preventDefault() - 如果某步需要异步校验（如邮箱是否已注册），应该用
fetch手动调用 API，而不是靠<form>的action自动提交
最后一步的提交逻辑，才是唯一该设置真实 action 的地方，且推荐用 JS fetch 发送合并后的完整数据，而非依赖表单原生提交。
