formaction是HTML5原生属性,仅对type="submit"的button或input生效,优先级高于form的action,可覆盖提交地址、method和enctype,但不触发onsubmit事件。

formaction 是原生 HTML5 特性,不是 JS 补丁,也不是框架语法——只要浏览器支持(Chrome/Firefox/Safari/Edge/IE10+),它就能直接工作,且优先级高于 form 的 action。
button 必须是 type="submit" 才生效
这是最常卡住的地方:formaction 只对参与表单提交的按钮起作用。写成 <button type="button"></button> 或漏掉 type 属性,属性就完全被忽略。
-
<button type="submit" formaction="/api/save">存草稿</button>✅ -
<button formaction="/api/publish">发布</button>❌(缺type="submit") -
<input type="button" formaction="/api/preview">❌(type="button"不触发提交)
注意:<input type="submit"> 同样支持 formaction,但语义上不如 <button></button> 灵活(比如嵌套图标、多行文本)。
路径必须是浏览器能解析的有效 URL
formaction 值不是后端路由名,也不是文件路径,而是浏览器发起请求时拼接用的地址。填错就会 404 或跳转到奇怪位置。
-
formaction="api/submit"→ 相对当前页面路径,易出错(如当前页是/admin/user/edit.html,实际发到/admin/user/api/submit) -
formaction="/api/submit"→ 从站点根目录开始,稳定可靠 -
formaction="https://api.example.com/v1/submit"→ 跨域必需写全,且后端要配Access-Control-Allow-Origin -
formaction="./save"→ 看似合理,但若页面路径含查询参数(如?tab=2),相对解析可能意外失败
别写 formaction="handler.php" 这类具体文件名——除非 Web Server 明确暴露该路径(比如 Nginx 有 location ~ \.php$ 规则)。
立即学习“前端免费学习笔记(深入)”;
实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。
method 和 enctype 不自动继承,需显式覆盖
formaction 只改地址,不改请求方法或编码类型。默认沿用 <form></form> 上的 method 和 enctype。但不同接口往往需要不同配置。
- 表单默认
method="get",但上传按钮需要post→ 加formmethod="post" - 普通表单用
enctype="application/x-www-form-urlencoded",但上传文件必须multipart/form-data→ 加formenctype="multipart/form-data" <button type="submit" formaction="/upload" formmethod="post" formenctype="multipart/form-data">上传</button>
如果漏了 formmethod,而接口只接受 POST,就会返回 405 Method Not Allowed;漏 formenctype,文件字段在后端收不到。
formaction 不触发 onsubmit,也不走 JS submit()
这是容易误判的一点:点击带 formaction 的按钮,浏览器直接构造并发出请求,绕过 <form onsubmit="..."></form> 和所有绑定的 submit 事件监听器。
- 想做前端校验?不能只靠
onsubmit,得给每个按钮加onclick="return validate();",并在函数里return false阻断提交 - 写了
form.submit()?它完全无视formaction,强制走<form></form>的action - 按钮在
<form></form>外部?可以用form="myform-id"显式绑定,formaction依然有效
真正难调试的是:你以为 JS 校验生效了,结果按钮一按直接发出去了——因为没意识到 formaction 是原生行为,不经过 JS 流程。


















