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