The HTML formaction attribute is used to override the action attribute of the parent <form> element.
Definition and Usage
➔ This specifies the URL where the form data will be sent for processing.
➔ This attribute can only be used with the <input type="submit">, <input type="image">, and <button type="submit"> elements.
➔ A form can have multiple submit buttons, the buttons can override the default settings of the form.
- formaction: (different URL than the form action).
- formmethod: (different method than from).
- formtarget: (different target window).
- formnovalidate: (bypasses validation).
Syntax
//In HTML
<form id="myform" name="myform" action="/server-side" method="get">
<table>
<tr>
<td>ID:</td>
<td><input type="text" id="id" name="id" value="CS01-9093"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" placeholder="Enter your name"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='55' rows='5'>This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<button name="buttonOutside" id="buttonOutside" type="submit" form="myform" formaction="/server-side-page2">Set
formaction</button>
//In JavaScript
const element = document.getElementById("submitoutside");
element.formAction = "/server-side-page3";
element.setAttribute("formaction", "/server-side-page3");
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| formaction | <button> <input> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML formaction attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input {
padding: 3px;
}
button {
margin: 10px 75px;
padding: 3px;
}
</style>
</head>
<body onsubmit="submit(event)">
<div id="sample" class="mydiv">
<h3>HTML formaction attribute example</h3>
<p>The formaction attribute is used to override the action attribute of the parent form element.</p>
<form id="myform" name="myform" action="/server-side" method="get">
<table>
<tr>
<td>ID:</td>
<td><input type="text" id="id" name="id" value="CS01-9093"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" placeholder="Enter your name"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='55' rows='5'>This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<button name="buttonOutside" id="buttonOutside" type="submit" form="myform" formaction="/server-side-page2">Set
formaction</button>
</div>
<p>Note: This form submission will not be processed by the server. </p>
</body>
<script>
function submit(e) {
e.preventDefault();
let id = e.target.id.value
let name = e.target.name.value;
let comment = e.target.comment.value;
//e.target.buttonOutside.formAction="/server-side-page3";
let elementF = document.querySelector("#myform");
//override from acton url here
elementF.action = e.target.buttonOutside.formAction;
let formAction = elementF.action;
alert("Form is submitted.\n" + "ID: " + id + "\nName: " + name + "\nComment: " + comment + "\nformaction value: " + formAction);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.