formaction是button或input[type="submit"]的属性，用于覆盖form的action实现多提交地址，如保存草稿、发布、预览；需配合formmethod、formenctype等使用，现代浏览器均支持。

HTML5 的 formaction 属性让同一个表单能根据不同的按钮触发不同地址的提交，无需 JavaScript 就可实现多场景操作，比如“保存草稿”、“发布文章”、“预览内容”共用一个表单结构。

理解 formaction 的作用位置

formaction 是 <button></button> 或 <input type="submit"> 的专属属性，**不能写在

标签上**。它会临时覆盖

的 action 属性，仅对该按钮点击时生效。

• 表单本身可以保留通用 action（如默认提交到 /api/save），作为兜底行为
• 每个提交按钮各自声明 formaction，指向对应后端接口，例如：formaction="/api/draft"、formaction="/api/publish"
• 浏览器会忽略 的 method 和 enctype，改用按钮上指定的 formmethod（可选）和 formenctype（可选）

基础用法示例

以下是一个博客编辑表单，支持三种提交方式：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

保存草稿

预览

发布

点击不同按钮，浏览器将向不同 URL 发起对应 method 的请求，且携带全部表单项数据（除非用 formnovalidate 或 formtarget 控制校验与打开方式）。

配合其他表单控制属性提升体验

单靠 formaction 已足够区分目标地址，但搭配以下属性可更精准适配业务逻辑：

• formnovalidate：跳过 HTML5 内置校验，适合“保存草稿”类非完整提交场景
• formtarget：指定提交后响应展示位置，如 formtarget="_blank" 用于预览页新开窗口
• name 和 value：后端可通过按钮的 name/value 区分操作意图（例如 <button name="action" value="publish"></button>），即使多个按钮指向同一 formaction
• 配合 disabled 或 CSS 状态，避免重复点击（需 JS 辅助，因 formaction 本身无防重机制）

注意事项与兼容性

formaction 是 HTML5 标准属性，现代浏览器（Chrome、Firefox、Edge、Safari 6+）均支持，IE10+ 也支持。但要注意：

• 服务器必须能正确接收并解析相同字段名在不同 endpoint 下的语义（如 /api/draft 可接受部分字段，/api/publish 要求字段完整）
• 如果某按钮需要上传文件，记得设置对应按钮的 formenctype="multipart/form-data"，否则默认使用 application/x-www-form-urlencoded
• 不建议在单个表单中混用大量异构操作；若逻辑复杂（如条件校验、字段动态增删），仍应引入 JavaScript 做统一控制

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！