form属性是唯一原生支持跨表单提交的机制，它通过form="target-id"使button或input[type=submit/image]触发指定id表单提交，仅对这三类元素生效，且要求目标form存在对应id，不依赖JS、不跳转页面。
form 属性是唯一原生支持跨表单提交的机制，它不依赖 JavaScript，也不触发页面跳转，但必须严格匹配 id 且仅对特定按钮类型生效。
为什么
浏览器允许把 或 移到任意位置（比如页脚、弹窗、甚至另一个 form 内部），只要它带上 form="target-id"，就能触发目标表单提交。前提是页面中存在 —— 注意是 id，不是 name 或 class。
常见错误现象：
- 按钮点了没反应：检查
form值是否和某个form的id完全一致（大小写、连字符、下划线都不能错） - 提交了错误的数据：按钮被放在另一个
form里，但没加form属性 → 浏览器默认提交父级表单 - 控制台无报错但静默失败：目标
form缺少id，或该form已被display: none但未移除 DOM
form 属性只对这三类元素有效
只有以下元素支持 form 属性并能真正触发跨表单提交：
-
（显式声明或省略type默认为 submit） -
（带图片的提交按钮）
以下写法无效：
-
：即使加了form="xxx"，点击也不会提交任何表单 -
或：不支持form属性，浏览器直接忽略 - 按钮在
form内部又写了form="xxx"：属性被忽略，仍提交父表单
如何让一个按钮提交多个不同目标？用formaction覆盖
如果同一表单需要“存草稿”和“正式提交”两个动作，且后端接口不同，不要写两套表单，直接复用 formaction：
注意：
-
formaction只对该按钮本次点击生效，不影响表单本身的action - 它可与
formmethod（如POST/PUT）、formenctype（如multipart/form-data）配合使用 - 若目标接口需要上传文件，记得同时加
formenctype="multipart/form-data"，否则文件字段为空
JavaScript 提交时怎么知道是哪个按钮触发的？看event.submitter
监听表单的 submit 事件时，event.submitter 会指向实际点击的那个按钮（前提是它是 type="submit" 且有 form 属性）。这对区分操作意图很关键：
- 可用于服务端日志标记：“草稿提交” vs “正式提交”
- 前端可据此动态禁用对应按钮，防重复点击
- Safari 15.4 之前不支持
event.submitter，旧版需靠data-action="draft"+ click 事件手动打标 - 用
form.submit()调用则event.submitter为null，无法溯源
跨表单提交看似简单，但最易出问题的是 id 匹配和元素类型限制——浏览器不会报错，只会沉默跳过。务必在 DevTools 中确认目标 form 确实存在且 id 字符串完全一致，再检查按钮是否为合法的提交控件类型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
