必须用<form>包裹整个设置区域，以保障可访问性、表单语义、键盘导航与验证能力；错误拆分会导致焦点断裂、验证失效；正确做法是全局共用一个<form>并用form="id"归组控件。

必须用

包裹整个设置区域，哪怕只是前端保存到 localStorage。浏览器原生的表单语义、回车提交、Tab 键顺序、屏幕阅读器识别、自动聚焦管理，全依赖这个标签。用

模拟表单，等于主动放弃可访问性与基础交互保障。

为什么不能把

拆开或放在表格外面

常见错误是：表格用

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

展示数据，新增按钮在表格外，点一下弹个 modal，里面再套一个 。这导致两个问题：form 与主列表无 DOM 关联，无法用 form.elements 统一收集；用户从表格 Tab 进来后，焦点直接跳到 modal 外，键盘流断裂。

更隐蔽的问题是：当表格支持“内联编辑”时（比如某行的 status 单元格里放了个 <select></select>），这些控件如果不在同一个 form 下，就无法被 form.requestSubmit() 触发验证，也无法用 form.checkValidity() 批量判断。

• 正确做法：整个页面（含表格、筛选栏、编辑区）共用一个 form，用 form 的 id 属性配合 form="xxx" 把分散的控件归组
• 禁用 onsubmit="return false" —— 它会吞掉事件，让 event.submitter 丢失，后续无法判断是哪个按钮触发的提交
• 表格内嵌输入控件时，<td> 里放 <code><input> 没问题，但别把 <form></form> 塞进 <td> —— HTML 规范禁止 <code>form 作为 table 的子元素

  fieldset + legend 是唯一合法的分组方式

  系统设置页动辄十几项，靠 CSS class 或 div 分组，对键盘用户和屏幕阅读器完全不可见。只有 fieldset 能让辅助技术把一组控件识别为逻辑单元，并把 legend 当作该组的标题朗读出来。

  容易踩的坑：

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

  • 多个 fieldset 嵌套超过两层，旧版 Safari 会漏渲染 legend 文字
  • 忘记给 fieldset 加 disabled 属性——比如“启用高级模式”勾选后才激活下方所有字段，用 fieldset.disabled = true 一行就能禁用整组，比遍历每个 input 省事且可靠
  • legend 里不要塞 span 或图标，部分读屏器只读纯文本内容

  input[type="number"] 输不了小数或负号？不是 bug，是规范

  Chrome 和 Edge 默认把 step 当成 1，没显式声明 step 和 min，就会拦截 . 和 - 键。这不是浏览器缺陷，是 HTML 表单验证模型的设计选择。

  实操要点：

  • 要支持小数：必须写 step="0.1" 或 step="any"（后者兼容性稍弱，但更灵活）
  • 要支持负数：必须加 min="-999"，哪怕只是占位，否则 - 键直接被忽略
  • 别指望 type="number" 阻止非法粘贴——用户仍可粘贴 "abc"，得监听 input 事件 + 正则过滤
  • iOS 上 type="number" 不显示小数点键盘，加 inputmode="decimal" 才能唤起带小数点的数字键盘

  保存按钮必须是 form 内的 type="submit"

  外置按钮用 form="myForm" 属性关联，看似可行，但在 Safari 15 以下、某些 Electron 版本中不生效。而且它绕过了表单的原生提交生命周期，比如 beforeinput、invalid 事件可能不会按预期触发。

  防重复提交的关键不是禁用按钮，而是控制提交时机：

  • 用 event.preventDefault() 在 JS 中拦截，而不是粗暴删掉 onsubmit
  • 提交成功后，立刻设 button.disabled = true，同时加 loading 状态样式
  • 若用 fetch 提交，记得手动调 form.reset() 清空状态，否则下一次提交时 form.checkValidity() 可能还返回 false
  真正难处理的不是布局结构，而是“混合状态”：表格里有已存数据行、正在编辑的行、新添加未提交的行。这时候光靠 CSS class 切换不够，得用 data-status 属性标记每行状态，并在提交前用 form.elements 过滤出 dirty 字段——这个逻辑一旦漏掉，用户点保存却没反应，问题最难复现。