不能共用一个提交按钮触发多个表单提交；应将所有字段置于同一内，通过css切换tab显隐，确保字段参与提交且兼容性好。
多个 <form></form> 标签无法共用一个提交按钮？
不能。HTML 规范里，<button type="submit"></button> 只会触发起父级或由 form 属性指定的单个 <form></form> 提交。如果你把多个表单拆到不同选项卡里，又只放一个按钮，它默认只提交离它最近的包裹它的那个 <form></form>，其余 tab 里的字段根本不会被包含进去。
用单个 <form></form> + CSS 控制 tab 显示最稳妥
别拆表单，把所有字段保留在同一个 <form></form> 内，只是用 CSS（比如 display: none / display: block）切换各 tab 的可见性。这样提交时浏览器自动收集全部字段，无需 JS 拼数据，兼容性好、语义清晰、无障碍支持也到位。
- 每个 tab 区域用
<section></section>或<div> 包裹，加唯一 <code>id（如tab-personal、tab-contact） - 用 JS 切换当前 active tab 的 class，CSS 控制显隐：
.tab-hidden { display: none; } - 确保所有
<input>、<select></select>都在同一个<form></form>开闭标签内，哪怕视觉上分开了 - 不要给任何字段加
disabled—— 它会导致字段不参与提交；改用aria-disabled或 CSS 灰阶做视觉禁用 - 某些老版本 Safari 和部分 Android WebView 对
form属性支持不稳定，字段可能不被提交 - 如果 tab 容器是动态插入 DOM 的（比如用 JS 渲染），必须确保字段节点在插入时已带正确的
form值，否则浏览器不会自动关联 -
form属性只能指向同 document 内的<form id="xxx"></form>，不能跨 iframe 或 shadow DOM - 校验（
required、pattern）和FormData构造都依赖这个绑定，一旦失效就静默失败 - 给提交按钮加
type="button"，监听click - 遍历每个 tab 区域，用
new FormData(formEl)分别提取，再用entries()合并去重（注意同名字段覆盖） - 或统一用
querySelectorAll('[name]')扫描所有字段，过滤掉disabled和空值，构造键值对 - 最后用
fetch()提交，记得设Content-Type：表单用multipart/form-data（需FormData实例），JSON 用application/json
form 属性能跨容器绑定字段，但有坑
理论上可以用 HTML5 的 form 属性把分散在不同 tab 容器里的字段“挂”到同一个表单上，例如：<input form="main-form" name="email">。但实际中容易出问题：
真要分离表单结构？那就手动聚合数据 + 阻止默认提交
如果业务逻辑强制要求每个 tab 是独立组件、甚至来自不同模块（比如微前端），那只能放弃原生表单提交，改用 JS 收集：
这个路径可控性强，但你要自己处理校验反馈、加载状态、错误提示——浏览器原生的 :valid、checkValidity()、reportValidity() 全得重写一遍。
真正麻烦的不是怎么绑按钮，而是字段状态同步和校验一致性。tab 切换时要不要保留脏检查？某个 tab 里填了但没切过去，提交时该不该报错？这些逻辑比 DOM 绑定更耗神。
