formaction属性用于为提交按钮单独指定提交URL,覆盖表单action,仅对type="submit"有效,优先级更高,可与formmethod、formenctype等配合使用,且需关联有效表单。

formaction 属性允许你为某个 <input type="submit"> 或 <button type="submit"> 单独指定提交地址,覆盖整个表单的 action 值。
必须配合 type="submit" 使用
只有提交按钮类的控件才支持 formaction。普通输入框(如 text、email)或非提交型按钮(type="button")设了也没效果。
- ✅ 正确写法:
<input type="submit" formaction="/api/login"> - ❌ 无效写法:
<input type="text" formaction="/xxx">或<button type="button" formaction="/xxx">
优先级高于表单的 action 属性
当点击带 formaction 的提交按钮时,浏览器会忽略 <form action="..."> 中的地址,直接提交到 formaction 指定的 URL。
例如:
立即学习“前端免费学习笔记(深入)”;
<form action="/default"> <input name="q" value="test"> <input type="submit" value="搜默认"> <input type="submit" value="搜百度" formaction="https://www.baidu.com/s"> <input type="submit" value="搜谷歌" formaction="https://www.google.com/search"> </form>
三个按钮共用同一个表单数据,但各自提交到不同地址。
可搭配 formmethod、formenctype 等一起用
formaction 常和 formmethod(GET/POST)、formenctype(编码类型)组合,实现更精细控制。
-
<input type="submit" formaction="/upload" formmethod="post" formenctype="multipart/form-data">—— 用于文件上传 -
<button type="submit" formaction="/api/delete" formmethod="delete">删除</button>—— 发送 DELETE 请求(需后端支持)
注意:form 属性仍需存在且有效
如果按钮不在 <form> 内部,或通过 form="form-id" 关联外部表单,那么 formaction 依然生效,但前提是关联的表单存在且未被禁用。
例如:
立即学习“前端免费学习笔记(深入)”;
<form id="myform" action="/old"> <input name="id" value="123"> </form> <input type="submit" form="myform" formaction="/new" value="提交到新地址">



















