我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

苏南大叔：同一表单，不同按钮上的不同action，input的formaction属性 - 不同input的formaction
同一表单，不同按钮上的不同action，input的formaction属性（图2-1）

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：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>
HTML

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

苏南大叔：同一表单，不同按钮上的不同action，input的formaction属性 - 根据input设置不同的action
同一表单，不同按钮上的不同action，input的formaction属性（图2-2）

React演绎例子

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

在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;
React JSX
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;
React JSX

onsubmit 阻止表单

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

普通的html里面：

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

React演绎的版本：

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

相关文章

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

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   h5