HTML中button跨表单提交需同时满足三条件：form属性值严格匹配目标form的id、显式声明type="submit"、浏览器支持；缺一即静默失效，无请求无报错。
form属性必须严格匹配目标表单的id
跨表单提交靠的是 form 属性，它不是选择器，只认 id。写成 form="my-form" 却没在页面里定义 <form id="my-form"></form>，或者大小写/连字符不一致（比如 id="MyForm" 但按钮写 form="myform"），点击后完全静默失败——Network 面板没请求、控制台无报错、页面也不刷新。
常见误操作：
- 把
form值写成 class 名或 name 值 - 目标
<form></form>缺少id，只写了name - 按钮本身嵌套在某个
<form></form>内部，此时form属性被浏览器忽略（父级 form 优先级更高）
type="submit" 是硬性前提，button默认行为不可信
只有 type="submit" 或 type="image" 的 <button></button> 或 <input> 才能触发跨表单提交。写成 <button>提交</button>（没设 type），不同浏览器行为不一致：Firefox 可能当 submit，Safari 和部分框架里直接当普通 button，点了没反应。
务必显式声明：
立即学习“前端免费学习笔记（深入）”；
用户要对接第三方接口、整理 ERP 字段、管理多环境配置或导出结构化报表时使用。本技能是「API/数据接入管线闭环」的总控，编排：接口文档解析(字段提取) → 字段对齐(归一规范 key) → 配置合并(三层优先级+冲突自修) → 单位换算(规格归一) → 表格导出(Excel/CSV 带样式)。触发词：对接接口、解析 API 文档、字段对不上、多环境配置、导出 Excel、ERP 字段整理、规格换算。
<button type="submit" form="target-id">提交</button><input type="submit" form="target-id" value="提交">-
type="button"或未设 type 的 button，无论加多少属性，都不会触发提交
提交数据只来自目标form内部控件，与按钮位置无关
这是最容易误解的一点：按钮放在页脚、弹窗、甚至另一个表单里，只要 form="target-id" 有效，提交时采集的数据**仅限**于 <form id="target-id"></form> 内所有带 name 的可提交控件（<input>、<select></select>、<textarea></textarea> 等），完全无视按钮 DOM 位置。
关键限制：
- 目标 form 内
disabled的控件不会被提交 - 按钮自身的
name和value默认不随数据发出（除非用formaction+ 后端主动读取） - JavaScript 调用
button.click()同样触发该行为，不依赖用户点击
formaction 覆盖 action，但 method/enctype 需配套指定
如果想让同一个按钮提交到不同接口（如“保存草稿”和“正式发布”），用 formaction 最直接。但它只覆盖 action，不自动继承 method 或 enctype——若目标接口需要 POST 或 multipart/form-data，必须同步写上 formmethod="POST" 或 formenctype="multipart/form-data"。
否则会出现：
- 按钮写
formaction="/api/draft"但没写formmethod→ 浏览器按表单默认method（可能是 GET）发请求，后端收不到 body - 含文件上传的表单，按钮漏了
formenctype→ 数据以application/x-www-form-urlencoded发送，后端解析失败，文件变空 -
formnovalidate可跳过 HTML5 校验，适合草稿类非完整提交场景
真正卡住人的，往往不是语法错误，而是 form 值拼错了、type="submit" 忘写了、或者目标 <form></form> 根本没加 id —— 这些问题在 Network 面板里看不到任何请求，排查时容易绕远路。
