多步表单应使用 fieldset + display 控制显隐，而非 div 或标签页模式；每个步骤用独立 fieldset 配 legend，初始仅首步可见，切换时操作 style.display 并滚动到对应 fieldset，校验前需 reportValidity()，隐藏步骤中 required 字段须临时移除以避免误报。
用 fieldset + display 控制多步表单显隐
分步填写本质不是“标签页”，而是按业务逻辑切分的表单阶段，fieldset 是最语义化、无障碍友好的容器。别用 div 堆砌步骤，否则屏幕阅读器无法识别结构，required 校验也会错乱。
实操要点：
- 每个步骤用独立
fieldset，加legend说明当前阶段（如“联系信息”） - 初始只让第一个
fieldset可见，其余设style="display: none"—— 不要用hidden属性，它会阻止legend被读出 - 切换时直接操作
element.style.display，比 class 切换更确定，避免 CSS 优先级干扰 - 所有
input保留在 DOM 中，提交前统一收集值；不要用v-if或ngIf销毁重挂载，否则输入内容和焦点全丢
切换时如何跳转到含空必填字段的标签页
用户点“下一步”却卡在某步没填完，得自动定位并激活对应 fieldset，而不是只高亮 input。关键不是找 input:invalid，而是找它所属的最近 fieldset。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
function goToFirstInvalidStep() {
const invalidInput = document.querySelector('input:invalid');
if (!invalidInput) return;
const fieldset = invalidInput.closest('fieldset');
if (fieldset) {
// 隐藏所有 fieldset
document.querySelectorAll('fieldset').forEach(f => f.style.display = 'none');
// 显示目标 fieldset
fieldset.style.display = 'block';
// 滚动到顶部，方便用户看到 legend
fieldset.scrollIntoView({ behavior: 'smooth' });
}
}
注意：:invalid 伪类只在表单控件已触碰（touched）或提交过才生效，首次点击“下一步”前需先调用 form.reportValidity() 触发校验。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
required 属性只对当前可见字段生效？
不是“只生效”，而是浏览器默认校验所有 required 字段，不管是否 display: none。这会导致隐藏步骤里的字段报错，阻断流程。
必须手动干预：
- 切换步骤前，遍历当前隐藏
fieldset内所有input[required]，临时移除required属性 - 切换到某步时，再给该步内所有
input[required]补回required - 或者统一不用
required，改用setCustomValidity('')和checkValidity()手动控制
别依赖 CSS 类名或 visibility 切换来绕过校验 —— visibility: hidden 下的 required 依然会触发验证失败。
为什么不用 data-tab + div 做分步表单
因为 data-tab 方案面向内容切换，不处理表单状态流转。它没法自然支持 fieldset 的批量禁用（fieldset.disabled = true）、无障碍角色（role="group"）、或与 legend 的语义绑定。
典型坑：
- 用
div替代fieldset后，按 Tab 键会跳进所有步骤的 input，哪怕它们被display: none隐藏了 - 无法用一行代码禁用整步（比如“支付方式”步骤在未选卡类型前应整体不可操作）
- 移动端双击缩放可能失效，因缺少
legend提供的语义锚点
真正需要的是步骤隔离 + 状态保持 + 无障碍可操作，不是视觉上的“像标签页”。把业务流程当标签页来实现，后期扩展字段、加校验、接后端都会变重。
