表单优化需合理使用 fieldset/legend 分组、hidden 属性控制字段参与性、聚焦前过滤不可交互元素、单 form 多步骤管理及处理异步校验边界。
表单字段太多时，用 fieldset + legend 分组但别嵌套太深
分组本身不减少字段数，但能降低用户认知负荷——浏览器和读屏器会把 fieldset 当作一个逻辑单元处理，提交时也保持原结构。问题在于有人一层套一层，导致 DOM 层级过深、CSS 选择器难写、JS 获取 form.elements 时索引错乱。
- 只在语义明确的业务模块间分组，比如「收货信息」「发票信息」，别按“地址行1/行2/邮编”这种粒度拆
-
legend必须存在且唯一，空<legend></legend>会让辅助技术跳过整个fieldset - 不要用
fieldset包裹单个input，它不是 div 替代品；Chrome 对嵌套超过 3 层的fieldset有渲染延迟
动态显示/隐藏字段时，用 hidden 属性而非 display: none
视觉上一样，但行为完全不同：display: none 的元素仍参与表单序列化（form.serialize() 或 FormData 里照常出现），而 hidden 属性会让浏览器彻底忽略它——包括验证、提交、甚至 form.elements 遍历。
- 切换状态优先改
element.hidden = true/false，别操作 class 或 style - 如果后端必须接收“空值字段”，那就得用
display: none+ 手动清空 value，否则提交时可能带脏数据 - 注意 Safari 旧版本对
hidden的兼容性：iOS 9.3+、macOS 10.11+ 才完全支持
校验失败后聚焦第一个错误项，但要避开 type="hidden" 和 disabled
自动聚焦能缩短纠错路径，但直接 elements[0].focus() 很容易聚焦到不可交互元素上，用户卡住、键盘失灵、甚至触发意外滚动。
- 遍历
form.elements时过滤掉type === 'hidden'、disabled、readonly和tabindex === -1的节点 - 用
element.checkValidity()辅助判断是否真出错，别只看element.validationMessage是否非空 - 聚焦前加
element.scrollIntoView({ block: 'nearest' })，防止被 sticky header 挡住
多步骤表单别用多个 form 标签拼接
每个 form 是独立提交上下文，FormData 不跨 form 合并，formdata 事件监听不到其他 form 的字段，而且 history.pushState 切换步骤时容易丢失状态。
立即学习“前端免费学习笔记（深入）”；
- 整个流程用一个
form，步骤切换靠 CSS 类控制显隐，所有字段始终在 DOM 中 - 每步校验只检查当前可见字段（用
:scope > :not([hidden]) input:invalid这类选择器） - 提交前用
new FormData(form)一次性收集，后端按字段名前缀区分步骤（如step1_email、step2_company）
最麻烦的其实是异步校验和离线状态处理——字段校验依赖接口返回，但用户点了下一步又切到别的 tab，回来时 token 过期或网络断了，这时候 UI 反馈和字段锁定逻辑很容易漏掉边界情况。
