HTML - formaction 属性



HTML formaction 属性用于指定处理输入控件并提交表单时重定向到不同页面的文件的 URL。它会覆盖表单元素的 action 属性。它与图像和提交类型的输入元素一起使用,也与 <button> 元素一起使用。

例如,如果图像类型输入元素存在 formaction 属性,则当用户点击图像时,它将重定向到不同的页面。如果用户提交表单,它将重定向到 <form> 元素的 action 属性中指定的 URL。

语法

<tag formaction = "URL"></tag>

应用于

以下列出的元素允许使用 HTML formaction 属性

元素 描述
<input> HTML <input> 标签用于接受用户的文本输入。
<button> HTML <button> 标签在 HTML 中定义一个可点击的按钮。

HTML formaction 属性示例

下面的例子将说明 HTML formaction 属性,以及我们应该在哪里以及如何使用这个属性!

带有 formaction 属性的 input 元素

在下面的示例中,我们将使用 type=submit 的 HTML formaction 属性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'formaction' attribute</title>
</head>
<body>
   <p>
       On clicking login button you will be 
       redirected to index.html page of
       tutorialspoint as mentioned according 
       to that in action attribute of form tag.
   </p>
   <form action="html/index.htm" method="get">
      <label for="">Username</label>
      <input type="text">
      <br>
      <br>
      <label for="">Password</label>
      <input type="password">
      <br>
      <br>
      <input type="submit" value="Login">
   </form>
   <br><br><hr><br>
   <p>
       Overriding the link in the action 
       attribute of form tag using formaction 
       attribute of input tag. This form will 
       redirect you to tutorialspoint main page
       even though link to html page is present 
       in action attribute.
   </p>
      <form action="html/index.htm" method="get">
      <label for="">Username</label>
      <input type="text">
      <br>
      <br>
      <label for="">Password</label>
      <input type="password">
      <br>
      <br>
      <input type="submit" 
         value="Login" 
         formaction="https://tutorialspoint.com">
   </form>
</body>
</html>

带有 formaction 属性的 button 元素

考虑另一种情况,我们将使用 button 元素的 formaction 属性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'formaction' attribute</title>
</head>
<body>
   <!--HTML 'formaction' attribute-->
   <p>Example of the HTML 'formaction' attribute</p>
   <form action="https://tutorialspoint.com" method="get">
      <label for="">Name</label>
      <input type="text">
      <br>
      <br>
      <label for="">Email</label>
      <input type="email">
      <br>
      <br>
      <label for="">Mobile</label>
      <input type="number">
      <br>
      <br>
      <button>Submit 1</button>
      <button formaction="/html/index.htm">Submit 2</button>
   </form>
   <p>
      Submit 1 will redirect you home page of tutorialspoint 
      as it's mentioned in action attribute of form tag, while 
      submit 2 will override this using formaction and will submit 
      to html page of tutorialspoint.
   </p>
</body>
</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
formaction 9.0 10.0 4.0 5.1 15.0
html_attributes_reference.htm
广告