button 元素通过 form 属性实现跨表单提交需同时满足三条件：浏览器支持、form 值严格匹配目标 form 的 id、且显式声明 type="submit"；缺一即静默失效。
button 元素可以通过 form 属性实现跨表单提交，但必须同时满足三个硬性条件：浏览器支持、form 值严格匹配目标 form 的 id、且显式声明 type="submit"。漏掉任一条件都会静默失败——点击无反应，控制台也不报错。
form 属性值必须精确匹配 form 元素的 id
浏览器只认 id，不支持 name、class 或 CSS 选择器。常见错误包括：
-
form="search_form"→ 实际form的id是search-form（下划线 vs 连字符） -
form=" #search-form "→ 前后空格未被自动去除，匹配失败 -
<form name="search-form"></form>→name不生效，必须是id="search-form"
type="submit" 是 form 属性生效的前提
没写 type 的 button 默认是 type="button"，此时 form 属性完全被忽略。这不是兼容性问题，而是规范强制要求：
-
<button type="submit" form="my-form">提交</button>✅ -
<button form="my-form">提交</button>❌（等价于type="button"） -
<button type="reset" form="my-form">重置</button>⚠️（会重置目标表单，但不提交）
多个按钮共用同一 form 时的 name/value 行为
当多个 type="submit" 按钮都指向同一个 form，点击哪个，就只提交哪个的 name 和 value，其他按钮字段不会出现在请求中：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
<form id="order-form" action="/api/order"> <input name="item_id" value="123"> </form> <button type="submit" form="order-form" name="action" value="buy">立即购买</button> <button type="submit" form="order-form" name="action" value="cart">加入购物车</button>
点击“立即购买”时，后端收到 item_id=123&action=buy；点另一个则收到 action=cart。这种行为和传统表内按钮一致，无需额外 JS。
兼容性和降级处理要点
Chrome 100+、Firefox 95+、Safari 16.4+ 支持该特性；旧版 Safari（≤16.3）及部分双内核浏览器会直接忽略 form 属性。关键点在于：
- IE10+ 支持，但 IE11 及更早版本在某些文档模式下可能不稳定
- 不能指望
event.submitter在 Safari 15.4 之前可用，需用data-submit-type+click事件手动标记 - 若需强兼容，降级方案是用 JS 调用
document.getElementById("target-id").submit()，并自行收集数据
最易被忽略的是：按钮若已嵌套在某个 form 内部，其 form 属性会被浏览器彻底忽略——它只会提交父表单，无论 form 值写什么。
