Bootstrap表单本身不支持自动分页，需通过JavaScript手动控制字段显隐、页码切换和状态保持，Bootstrap仅提供样式和响应式支持。
Bootstrap 表单本身不支持自动分页
Bootstrap 的 form 组件只是样式和结构框架，没有内置分页逻辑。所谓“长表单自动分页”，本质是前端 JS 控制表单项的显隐 + 分页导航 + 状态保持，Bootstrap 仅负责让每页看起来一致、响应式、可交互。
用 JavaScript 手动切分字段并控制页码
核心思路是把所有 input、select、textarea 按组包裹进带 data-page="1" 的容器（如 <div class="page">），再用 JS 切换显示。常见错误是直接对 DOM 节点做 display: none 却忽略表单验证状态或焦点丢失。
- 每页建议控制在 5–8 个字段内，避免单页过长影响体验
- 必须为每个
input设置name属性，否则提交时拿不到值 - 切换页面时调用
focus()到第一个可见的可聚焦元素（如querySelector('input, select, textarea')） - 禁用浏览器原生验证（
novalidateonform），改用 JS 手动校验当前页字段
<form id="longForm" novalidate>
<div class="page" data-page="1">
<div class="mb-3"><label>姓名</label><input name="name" required></div>
</div>
<div class="page" data-page="2">
<div class="mb-3"><label>邮箱</label><input name="email" type="email" required></div>
</div>
<div class="d-flex justify-content-between mt-4">
<button type="button" id="prevBtn">上一页</button>
<button type="button" id="nextBtn">下一页</button>
</div>
</form>
如何保存中间页数据并校验当前页
用户填到第 3 页突然跳回第 1 页，不能清空已填内容；但提交前又得确保所有页都通过校验。关键不是“存 localStorage”，而是维护一个实时同步的 JS 对象，每次 input 变更就更新对应字段。
- 监听
input和change事件，用form[name]作为 key 更新formData对象 - 切换页前调用
checkPageValidity(currentPage)，只校验当前页的:invalid元素 - 提交时遍历全部
input[name]，合并后发请求，不要依赖 DOM 顺序 - 注意
type="checkbox"和type="radio"需特殊处理：用getElementsByName()并检查checked
移动端翻页容易卡顿或失焦
在 iOS Safari 或部分 Android WebView 中，频繁 display: none/block 容器可能触发重排抖动，且软键盘弹出后切页会导致焦点丢失、键盘不收起。
- 用
visibility: hidden+height: 0+overflow: hidden替代display切换，减少重排 - 切页前主动
blur()当前聚焦元素，再focus()下一页第一个字段 - 给
input加autocomplete="off"减少输入法干扰（尤其中文拼音候选栏） - 避免在
transition过程中操作焦点——CSS 动画期间调用focus()在 Safari 中常失效
分页逻辑越简单越可靠，别试图让 Bootstrap 自己“猜”哪几个字段该分一组；手动分组 + 显式控制 + 数据驱动，才是长表单落地最稳的方式。
