HTML - formaction Attribute



HTML formaction attribute is used to specify an URL of the file that will process the input controls and redirect to a different page when the form is submitted. It overrides the action attribute of the form element. It is used with image and submit type of input elements and also used with <button> elements.

For example, if the image type input element has the formaction attribute present, when the user clicks on an image, it will redirect to a different page. And if the user submits the form, it will redirect to the URL specified in the action attribute of the <form> element.

Syntax

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

Applies On

Below listed elements allow using of the HTML formaction attribute

Element Description
<input> HTML <input> tag is used to accept textual input from user.
<button> HTML <button> tag defines a clickable button in HTML.

Example of HTML formaction attribute

Bellow examples will illustrate the HTML formaction attribute, where and how we should use this attribute!

Input element with formaction Attribute

In the following example, we are going to use the HTML formaction attribute with input type=submit.

<!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://www.tutorialspoint.com">
   </form>
</body>
</html>

Button element with formaction Attribute

Considering the another scenario, where we are going to use the formaction attribute with the button element.

<!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://www.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>

Supported Browsers

Attribute Chrome Edge Firefox Safari Opera
formaction 9.0 10.0 4.0 5.1 15.0
html_attributes_reference.htm
Advertisements