HTML不存在跨表单提交，浏览器仅序列化当前form内按DOM顺序排列的可提交控件；多区域字段需用FormData手动聚合，调试应以Network面板原始请求为准。
HTML跨表单提交不会乱序——根本不存在“跨表单提交”这个行为。所谓“乱序”，其实是把多个 <form></form> 当成一个逻辑整体来处理，而浏览器只认单个 <form></form> 的 DOM 顺序。
浏览器只序列化当前 form 内的可提交控件
点击某个 type="submit" 按钮时，浏览器只会收集它所属 <form></form> 元素内部、按 DOM 顺序排列的可提交控件（<input>、<select></select>、<textarea></textarea> 等），disabled 的、name 为空的、或不在该 <form></form> 作用域内的，一律忽略。
常见错误现象：
- 两个
<form></form>分别放在页面上下，用户以为“一起提交”，但实际只发了上面那个的字段 - 用 JS 把某个
<input>从 form A 移动到 form B 后没重设name，导致提交时字段名丢失 - 动态插入的控件没 append 到目标
<form></form>内部，而是插在 body 下——它根本不会被任何表单提交采集
想合并多个区域字段？别靠多个 form
如果业务上确实需要把分散在不同 DOM 区域的字段“合起来提交”，唯一可靠方式是放弃原生 <form></form> 提交，改用 FormData 手动聚合。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给每个字段加唯一
name，不依赖位置；用data-form-group或 class 标记归属区域 - 收集时遍历所有目标字段：
document.querySelectorAll('[data-form-group="user"] input, [data-form-group="user"] select') - 按需排序后逐个
fd.append(name, input.value)，顺序完全由你控制 - 避免
new FormData(form)初始化后再append()——原字段顺序仍锁定在 DOM 中
为什么调试时看到 query string 顺序不一致？
不是前端乱了，是后端解析器丢序了。比如：
- Node.js 的
querystring.parse()默认返回普通对象，键序不保证；要用new URLSearchParams()+.entries()才保序 - PHP
$_POST在 CGI SAPI 下可能打乱顺序，哪怕 PHP 7.4+ 的 FPM 是保序的 - Java Spring 的
@RequestParam Map<string string></string>若用HashMap就不保序，必须显式声明LinkedHashMap
验证方法：直接看 Network 面板里 Request URL（GET）或 Request Payload（POST）原始内容，那才是浏览器真正发出的顺序。
最容易被忽略的一点：DOM 顺序 ≠ 视觉顺序。flex order、CSS direction、甚至 float 都不影响表单序列化——只看元素在 HTML 中的嵌套和兄弟顺序。
