跨表单提交本质是浏览器严格按form属性ID采集对应form内字段，无法真正合并多个表单；正确做法是统一归入一个form，或用JavaScript手动聚合数据。
form 属性必须指向真实存在的 form 元素 ID
跨表单提交不是“合并两个表单”，而是让一个按钮（或图片输入）提交**某一个特定表单**的数据。所谓“合并两组字段”，实际是把分散在不同位置的输入控件，全部放进同一个 form 元素内部——只有这样，它们才会被一并采集并提交。
常见错误是：把用户名输入框放在 form#user-form 里，邮箱输入框放在 form#contact-form 里，再用一个带 form="user-form" 的按钮试图“同时提交两者”。这行不通：浏览器只收集目标 form 内部的控件，另一个表单里的字段完全被忽略。
- 正确做法是删掉多余的
form标签，只保留一个，比如 - 把所有需要提交的字段（无论视觉上是否相邻）都放进去，哪怕中间隔着标题、分隔线甚至其他非表单内容
- 按钮可以放在页面任意位置（页脚、弹窗、另一段 div 里），只要设
type="submit"和form="main-form"
多个 input 不在同一个 form 里？那就手动挪进去
如果你的两组字段目前分别属于两个独立 form，又不想重构 DOM 结构，可以用 JavaScript 在提交前临时移动节点。但要注意：这不是“合并提交”，而是动态调整归属关系。
例如，你有：
此时点击按钮只会发 name。若想连带 email，得在点击时把它移进 form#a：
button.addEventListener('click', e => {
e.preventDefault();
const emailInput = document.querySelector('#b input[name="email"]');
document.getElementById('a').appendChild(emailInput);
document.getElementById('a').submit();
});
- 该操作会改变 DOM，后续再次点击可能报错（因为 input 已不在 #b 中）
- 如果 #b 还有其他逻辑（如监听 submit、校验），会被破坏
- 移动端或屏幕阅读器可能因 DOM 突变导致可访问性问题
用 formaction 区分提交路径，但字段仍需同属一个 form
如果你的“两组字段”对应不同后端接口（比如“保存草稿”和“正式发布”），不要靠拆分成两个表单来实现，而应让它们共用一个 form，再用按钮的 formaction、formmethod 覆盖提交地址和方式。
示例：
- 两个按钮提交的都是
product和quantity字段 -
formaction仅影响当前按钮的提交 URL，不影响数据采集范围 - 服务端需根据请求路径区分处理逻辑，而非靠前端拆表单
真正需要“合并”的场景，往往该用 JS 序列化 + Fetch
当字段确实物理隔离（比如来自不同组件、iframe、或动态加载的模块），且无法统一归入一个 form，硬套 form 属性反而增加维护成本。这时直接用 JS 收集值更可控。
例如：
const values = {
name: document.getElementById('name-input').value,
email: document.getElementById('email-input').value,
tags: Array.from(document.querySelectorAll('.tag-checkbox:checked')).map(cb => cb.value)
};
fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(values)
});
- 绕过表单提交机制，完全掌控字段来源和序列化方式
- 支持异步校验、防重复提交、上传进度等原生表单不提供的能力
- 注意：需自行处理空值、trim、disabled 状态过滤等原本由浏览器自动做的事
跨表单提交的本质是浏览器对 form 边界的严格遵守——它不会帮你“合并”，只会忠实地按 ID 找到那个 form 并采集其中的内容。任何试图绕过这个边界的方案，最终都会回到 DOM 归属或 JS 手动聚合这两条路。最容易被忽略的是：按钮的 form 属性只生效于它自身不在任何 form 内部时；一旦嵌套，属性就被静默忽略，连控制台警告都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
