同一表单，不同按钮上的不同action，input的formaction属性

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文说的还是html5里面的input，特指能提供表单提交功能的<input type='submit'>或者<input type='image'>。因为form表单的action属性，可以移动到表单提交按钮上，变成formaction属性。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：chrome@131.0.6778.205。本来一个表单就只有一个action，现在变成了一个提交按钮就可以有一个action。同一个表单，就可以合情合理拥有多个action了。然而，这么定义有啥现实意义么？

原始html例子

input的formaction，就是form的action，两者可以通用替换。下面是个最简单的代码例子。

<form action="#" method="post">
  <input type="text" name="name" value="sunan"/>
  <input
    type="submit"
    formaction="a.php"
    formenctype="multipart/form-data"
    formmethod="post"
    value="提交"
  />
  <input
    type="submit"
    formaction="b.php"
    formenctype="application/x-www-form-urlencoded"
    formmethod="get"
    value="提交"
  />
</form>

不但有formactioin，还可以定制formenctype、formmethod、formtarget等可以定制。这里，苏南大叔觉得这样设置的话，很适合测试。写很多个不同的参数，不同的按钮提交不同的服务器端接口。

React演绎例子

在前文的React19新特性的钩子useActionState()的官方例子中。被React演绎过的formAction属性，出现在了表单内的button属性上。参考文章：

• https://newsn.net/say/react-useactionstate.html

在React里面，action从一个普通的服务器端地址，变成了一个可执行的function。

import { useActionState } from "react";
async function increment(previousState, formData) {
  return previousState + 1;
}
function App() {
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}
export default App;

import { useActionState } from "react";
async function increment(previousState, formData) {
  return previousState + 1;
}
function App() {
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form action={formAction}>
      {state}
      <button>Increment</button>
    </form>
  );
}
export default App;

onsubmit 阻止表单

无论是普通的html里面的form，还是react里面的表单。其onSubmit()都是优先于action的。
所以，在onSubmi()里面，可以阻止默认的action行为。

普通的html里面：

<form onsubmit="return false">
</form>

React演绎的版本：

<form onSubmit={(e)=>{e.preventDefault()}}>
</form>

相关文章

• https://newsn.net/say/html-form.html
• https://newsn.net/say/js-event-order.html

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。