HTML表单标签页怎么切换？分步填写流程-html教程-PHP中文网

多步表单应使用 fieldset + display 控制显隐，而非 div 或标签页模式；每个步骤用独立 fieldset 配 legend，初始仅首步可见，切换时操作 style.display 并滚动到对应 fieldset，校验前需 reportValidity()，隐藏步骤中 required 字段须临时移除以避免误报。

html表单标签页怎么切换？分步填写流程

用 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() 触发校验。

required 属性只对当前可见字段生效？

不是“只生效”，而是浏览器默认校验所有 required 字段，不管是否 display: none。这会导致隐藏步骤里的字段报错，阻断流程。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

必须手动干预：