HTML 的 formaction/formmethod 按钮提交到不同地址。

给同一个 <form> 里的不同提交按钮加上 formaction / formmethod，就能让它们把数据提交到不同地址、用不同请求方法，纯 HTML 实现，不需要一行 JavaScript。这是 HTML5 的「提交者覆盖属性」（submitter override attributes）机制，现代浏览器覆盖率接近 100%。

TL;DR：按钮属性覆盖 form 属性；formaction 改地址、formmethod 改方法；回车走第一个 submit 按钮；跳校验加 formnovalidate；React 必须写驼峰 formAction。

formaction 和 form 的 action 有什么区别？

结论：formaction 写在提交按钮上，只在该按钮触发提交时生效，优先级高于 <form action="...">；form 的 action 是「默认值」，按钮上的 formaction 是「本次提交的覆盖值」。

浏览器在提交时按这个顺序取值：

1. 触发提交的按钮上有没有 formaction？有就用它。
2. 没有就用所属 <form> 的 action。
3. action 是空字符串（或没写），用当前文档的 URL。

注意第 3 条：formaction="" 不会把地址「覆盖成空」，而是回退到表单所在文档的 URL，等于没覆盖。想提交到当前页就写完整 URL，或者干脆不写这个属性。

另一个容易踩的点：form.action 这个 DOM 属性永远返回 form 自己的 action，不会因为你点了带 formaction 的按钮而变化。想知道「这次到底提交到哪」，读 event.submitter（触发的按钮）上的 formAction：

form.addEventListener('submit', (e) => {
  const btn = e.submitter;              // 触发的提交按钮，隐式提交时可能为 null
  console.log(btn?.formAction);         // 实际使用的地址
  console.log(btn?.formMethod);         // 实际使用的方法
});

formaction 怎么用？一表多提交的最小示例

结论：给按钮加 formaction 就行，<button> 只要不显式写 type="button" 默认就是提交按钮。

<form action="/search" method="get">
  <input name="q" required>
  <button type="submit">站内搜索</button>
  <button type="submit"
          formaction="https://www.google.com/search"
          formtarget="_blank">用 Google 搜</button>
</form>

点击第一个按钮走 /search?q=xxx，点击第二个按钮走 Google 搜索并在新标签打开。表单字段、name 属性、原生校验规则完全复用，不需要写两份表单。

<input type="submit" formaction="..."> 和 <input type="image" src="save.png" formaction="..."> 同样有效。三个元素类型都支持，但 <a> 标签永远不支持——它不是提交者。

除了 formaction，还有哪 4 个按钮级覆盖属性？

结论：一共 5 个配对属性，按钮只覆盖「你写出来的那一个」，没写的继续沿用 form 的设置。

读表结论：这 5 个属性是「逐个覆盖」而不是「整组替换」，所以只改地址不改方法时会出现「form 是 GET，按钮也还是 GET」的情况——要改成 POST 必须显式写 formmethod="post"。

典型组合是「保存草稿」按钮：

<form action="/article/publish" method="post">
  <input name="title" required>
  <textarea name="body" required></textarea>
  <button type="submit">发布</button>
  <button type="submit" formaction="/article/draft" formnovalidate>存草稿</button>
</form>

required 校验发生在提交之前，草稿按钮不写 formnovalidate 就会被浏览器拦下来，连请求都发不出去。

用户按回车提交时，走的是哪个按钮的 formaction？

结论：走「树序上第一个 submit 按钮」，也就是规范里说的 default button，跟用户最后点过哪个按钮无关。

这就是「存草稿」排在「发布」前面的隐患：用户填完标题按回车，提交的其实是存草稿。有两种修法：

1. 把主提交按钮放在 DOM 里第一个位置，用 CSS 的 order 调整视觉顺序。
2. 用 form.requestSubmit(指定按钮) 明确指定：

form.addEventListener('keydown', (e) => {
  if (e.key !== 'Enter') return;
  const tag = e.target.tagName;
  if (tag === 'TEXTAREA' || tag === 'BUTTON') return; // 换行 / 按钮自身行为，别拦
  e.preventDefault();
  form.requestSubmit(publishBtn); // 回车一律走「发布」
});

requestSubmit() 会正常触发表单校验和 submit 事件，和 submit()（跳过校验、直接提交）不是一回事。

一个表单多个提交地址，四种方案怎么选？

结论：优先用 formaction；只有当不同动作的字段集合完全不同时才拆成多个 <form>。

读表结论：formaction 的最大价值是「声明式 + 渐进增强」，禁用 JS 也能工作；JS 改 action 的方案会把这个能力丢掉，只在地址需要运行时计算时才值得用。

浏览器支持情况怎么样？

结论：5 个覆盖属性在 Chrome 9+、Firefox 4+、Safari 5.1+ 就已经支持，IE10/11 也支持，IE9 及以下不支持，需要给这批老浏览器做 JS 兜底。

读表结论：真正需要关注的只有 requestSubmit 和 submitter 这两个 JS API，纯 HTML 属性写法可以放心用。表中版本号按 MDN 兼容数据整理，核查日期 2025-06。

IE9 兜底方案很短：监听按钮 click，把 form.action 和 form.method 改成按钮上的值再放行提交——但 2025 年做这个兼容的必要性基本为零，知道有这回事即可。

GET 和 POST 混用时，地址上的参数会怎样？

结论：GET 提交时，formaction 里已有的查询串会保留，表单数据以 & 追加在后面；POST 提交时查询串保留在 URL 上，数据放进请求体。

所以 formaction="/list?from=form" 加一个 name="page" 的输入框，GET 提交后实际地址是 /list?from=form&page=1。同名参数会重复出现（?a=1&a=2），后端框架取值时注意按数组解析，否则会丢数据。

还有两条容易忽略的规则：

• enctype 只在 method="post" 时生效，GET 提交忽略编码类型。
• formmethod="get" 时浏览器不会发送请求体，表单数据全部进 URL，长度受 URL 上限约束，不适合传大字段。

React 和 Vue 里怎么写才不踩坑？

结论：React 必须写驼峰 formAction，Vue 模板必须写全小写 formaction，写反了要么报警告要么失效。

React：

<form action="/article/save" method="post">
  <button type="submit">保存</button>
  <button type="submit" formAction="/article/publish" formMethod="post">发布</button>
</form>

React 16 起支持 formAction / formMethod / formEncType / formNoValidate / formTarget 这五个驼峰属性。