formaction属性仅作用于type="submit"的button或input,完全接管提交目标地址,不读取form的action;需配合formmethod才能更改请求方法,且仅html5支持。

formaction 属性不是给 <form></form> 用的,而是按钮专属
很多人一上来就往 <form></form> 标签上加 formaction,结果完全没反应——这属性压根不被 <form></form> 支持。它只作用于 <button type="submit"></button> 或 <input type="submit">,用来临时覆盖表单默认的 action。
多个提交按钮对应不同地址,直接写 formaction 就行
不用 JS,纯 HTML 就能实现。每个提交按钮自己带目标地址,点击哪个就发到哪个:
注意点:
-
formaction值可以是相对路径(如/api/search)或绝对 URL(如https://api.example.com/submit) - 所有按钮共用同一个
method(由<form></form>的method决定),不能单个按钮改请求方法 - 如果按钮没写
formaction,就走<form></form>的action;如果<form></form>也没设action,则提交到当前页面 URL
和 formmethod 搭配才能改请求方式
想让某个按钮走 GET、另一个走 POST?光靠 formaction 不行,得加 formmethod:
<button type="submit" formaction="/search" formmethod="GET">搜索(GET)</button> <button type="submit" formaction="/save" formmethod="POST">保存(POST)</button>
常见组合误区:
-
formmethod="PUT"或"DELETE"在原生 HTML 中不会真正发出 PUT/DELETE 请求,浏览器仍发 POST,后端需靠_method隐藏字段或自定义 header 识别(取决于框架) -
formmethod只对当前按钮生效,不影响其他按钮或表单默认行为 - 若同时存在
formmethod和<form></form>的method,以前者为准
容易忽略的兼容性和副作用
formaction 和 formmethod 是 HTML5 特性,IE10+ 支持,但 IE10/11 对 formmethod 的 PUT/DELETE 处理不一致,实际项目中建议避开。
更隐蔽的问题:
- 表单里多个
submit按钮时,**没点中的按钮的 name/value 不会发出去**——这是标准行为,但常被当成 bug - 如果按钮用了
name,比如<button name="action" value="export"></button>,那点击它时会额外带上action=export,后端可据此区分意图 - 服务端必须能处理同一组字段发往不同 endpoint 的情况,字段名冲突或结构差异容易引发 400 或逻辑错乱
真要支持复杂路由或动态地址,还是得靠 JS 控制 form.action,formaction 适合静态、明确、数量少的分支场景。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











