决定表单元素是否组合提交的关键是是否被同一form元素包含或通过form属性显式归属；form属性可跨DOM关联控件，fieldset用于语义分组但不改变提交范围，JS可手动聚合独立表单数据。
多个表单元素不能靠视觉堆砌就自动“组合”成一个逻辑表单——关键在于它们是否被同一个 form 元素包含，或是否通过 form 属性显式归属到同一表单。否则，浏览器根本不会把它们当做一个整体提交。
用 form 属性跨 DOM 位置关联控件
当你无法把所有输入框塞进同一个 <form> 标签（比如布局受限、组件隔离、第三方嵌入），HTML5 的 form 属性就是解法。它允许任意 <input>、<textarea>、<select> 等控件“认领”一个远在别处的表单。
- 给目标
<form>设置唯一id，例如：<form id="userForm"></form> - 在独立控件上加
form="userForm"，例如：<input type="email" name="email" form="userForm"> -
name 值必须唯一：如果两个控件都设
name="phone"，后解析的那个会覆盖前一个，提交时只传后者 - 该属性对
<button type="submit">同样有效，可让按钮触发非父级表单
用 fieldset + legend 语义化分组（不改变提交行为）
<fieldset> 不是提交合并手段，而是结构与可访问性分组工具。它本身不影响数据提交范围，但能清晰表达“这些控件属于同一逻辑组”，对屏幕阅读器、CSS 样式控制和响应式折叠都很有用。
- 必须配合
<legend>使用，否则语义断裂；<legend>是<fieldset>的第一个子元素 - 多个
<fieldset>可以共存于一个<form>内，例如地址部分、偏好设置部分各自包裹 - 禁用整个组只需在
<fieldset>上加disabled，内部所有控件自动失效（比逐个设disabled更简洁） - 注意：不要用
<fieldset>替代<form>——它不提供action、method或提交能力
用 JavaScript 手动聚合多个独立 form 元素的数据
当表单确实物理隔离、且你无法修改 HTML 结构（如微前端场景、iframe 内嵌表单、遗留系统拼接页），就得靠 JS 主动收集。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
document.querySelectorAll('form[data-merge]')批量选中待合并的表单 - 遍历每个表单的
.elements集合，过滤掉disabled、无name、type="reset"或type="button"的项 - 对
<input type="checkbox">和<input type="radio">，需检查checked状态；对<select multiple>，要遍历selectedOptions - 构造
FormData对象最稳妥：const fd = new FormData(); fd.append('key', value);，再用fetch提交，避免手动拼接 URL 编码问题
表格内嵌表单控件时的常见陷阱
把 <input> 放进 <td> 很常见，但容易忽略表单完整性约束。
-
<table>本身不是表单容器，所有控件仍必须属于某个<form>（可以是外层包裹，也可以用form属性指向） - 不要给
<input>加colspan或rowspan——这些属性只对<td>/<th>有效，加了也无效，还会触发 HTML 验证警告 - 批量操作（如全选复选框）时，别用
getElementsByTagName('input')暴力匹配，应限定在表格内：table.querySelectorAll('input[type="checkbox"]') - 响应式差是硬伤：小屏下表格溢出很常见，此时
overflow-x: auto是底线方案，更优解是用 CSS Grid/Flex 重构布局
真正决定“组合是否生效”的，永远是浏览器提交时看到的 DOM 关系和属性值，而不是你在页面上肉眼看到的排列方式。最容易被忽略的是 name 冲突和 form 属性拼写错误（比如大小写、ID 值不匹配），这类问题往往导致字段静默丢失，调试时得直接看提交的请求载荷才能发现。
