能覆盖,且是无条件接管——只要button是type="submit"并带formaction,浏览器就完全忽略的action,不读、不fallback、不协商;失效主因是语义或时机问题,如缺type="submit"、被js阻止默认行为、相对路径解析错误或method不匹配。

能覆盖,而且是无条件接管——只要 button 是 type="submit" 且带 formaction,浏览器就完全忽略 <form></form> 的 action,不读、不 fallback、不协商。
为什么 formaction 不生效?不是拼错,而是语义断了
写对了 formaction="/api/save" 却还是提交到表单默认地址,大概率是以下情况之一:
-
button缺少type="submit"(比如只写了<button></button>或type="button"),此时它根本不会触发表单提交流程 - 按钮被 JS 拦截了:例如绑了
onclick="event.preventDefault()",或在form上监听submit并调用了e.preventDefault(),原生提交链路已中断 -
formaction值是相对路径(如"save"),但当前页面 URL 是/admin/edit/123,结果解析成/admin/edit/save,而非预期的根路径/save - 表单设了
method="get",而formaction指向的接口只接受POST,返回405 Method Not Allowed
多个 submit 按钮共存时,后端怎么区分操作?
不能靠按钮文字,也不能靠顺序。必须显式用 name 和 value 传意图:
这样后端收到的请求体里就有 action=draft 或 action=publish,路由和权限判断才可靠。
formaction 和 JavaScript 提交混用时最危险的坑
如果你既写了 formaction,又在按钮上加了 onclick,或给表单绑了 submit 事件,控制权就容易打架:
- 原生
formaction提交会触发submit事件,但此时e.target.action已被动态改写为formaction的值——别假设它等于form.action - 若你在事件里调用
form.submit(),它会绕过formaction,强制走<form></form>的action - 想动态改
formaction?用 JS 直接赋值:btn.formAction = "/api/preview",不要改btn.getAttribute("formaction"),后者不触发行为更新
最容易被忽略的是相对路径解析逻辑——formaction 的解析完全依赖当前页面 URL,和 <form></form> 所在位置无关;哪怕按钮在表单外、靠 form="myform" 关联,也一样按当前页面地址 resolve。这点和 CSS 中的 url() 类似,但开发者常常下意识当成“相对于表单”。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











