HTML表单可通过多步骤向导实现分页效果，核心是用<fieldset>逻辑分组、JavaScript控制显隐与校验、单<form>内保数据，并增强可访问性与键盘支持。

HTML表单本身不自带“分页”功能，但可以通过多步骤向导（multi-step wizard）的方式，把一个长表单逻辑上拆成若干页，再用前端控制显隐、后端分段处理或一次性提交，实现类似分页的体验。关键不在<form>标签本身，而在于结构组织、状态管理与交互逻辑。

用

和

划分步骤，语义清晰

HTML原生支持用<fieldset>对表单区域做逻辑分组，配合<legend>标注当前步骤标题。这对可访问性友好，屏幕阅读器能自然识别步骤边界。

• 每个<fieldset>代表一个步骤，初始只显示第一个
• 用aria-hidden="true"隐藏非当前步骤，或直接用display: none
• <legend>内容建议同步更新，例如“第2步：联系方式”

用JavaScript控制步骤切换，避免重复提交

点击“下一步”“上一步”时，不提交整个表单，而是切换当前<fieldset>的可见状态，并校验本步必填项。只有最后一步才触发表单真实提交。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 监听按钮点击事件，阻止默认行为（event.preventDefault()）
• 维护一个当前步骤索引（如currentStep = 1），控制DOM显隐
• 每步切换前执行简单校验（如邮箱格式、必填项是否为空），失败则提示并停留
• 最后一步的“提交”按钮才调用form.submit()或发起AJAX请求

保留用户输入，防止步骤跳转丢失数据

所有字段保留在同一个<form>内，只是视觉分页。这样用户填完第一步切到第二步时，第一步的数据仍在DOM中，无需额外存储或同步。

立即学习“前端免费学习笔记（深入）”；

• 不使用多个独立<form>，否则数据无法自动聚合
• 若需离线支持或防刷新丢失，可将中间步骤数据暂存sessionStorage
• 注意禁用浏览器自动填充干扰（如autocomplete="off"在某些字段上慎用，现代规范更推荐autocomplete="given-name"等具体值）

增强可用性：添加进度指示与键盘支持

让用户清楚自己在哪一步、还有几步，是向导体验的核心。同时要适配键盘操作（Tab/Shift+Tab、Enter）。

• 用<nav aria-label="表单步骤导航">包裹进度条，每个步骤项加aria-current="step"标识当前步
• 为“上一步”“下一步”按钮设置type="button"，避免意外提交；最后一步的提交按钮设为type="submit"
• 聚焦管理：切换步骤后，自动将焦点移到新步骤第一个可聚焦元素（如input）