Syntax
<form action="/preview" method="get">
<button type="submit">Preview</button>
<button type="submit" formaction="/publish" formmethod="post">Publish</button>
</form>Examples
Different Form Actions with Submit Buttons: working example
Save as an HTML file and open it in a browser. Expected result: Preview displays Preview: GET /preview; Publish displays Publish: POST /publish. No request is sent in this demo.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML example</title>
</head>
<body>
<form id="draft" action="/preview" method="get">
<label>Title <input name="title" value="My guide" required></label>
<button type="submit">Preview</button>
<button type="submit" formaction="/publish" formmethod="post">Publish</button>
</form>
<output id="route" aria-live="polite"></output>
<script>
const form = document.querySelector("#draft");
form.addEventListener("submit", event => {
event.preventDefault(); // Demo only: show the route without contacting a server.
const button = event.submitter;
const action = button.getAttribute("formaction") ?? form.getAttribute("action");
const method = button.getAttribute("formmethod") ?? form.getAttribute("method");
document.querySelector("#route").textContent = `${button.textContent.trim()}: ${method.toUpperCase()} ${action}`;
});
</script>
</body>
</html>- The form declares the default destination /preview and GET method. The Preview button inherits them because it has no override.
- The Publish button is also type="submit", but its formaction and formmethod replace the form’s values for that submission.
- The submit event exposes the activated button as event.submitter. The handler prevents navigation and displays the selected route, keeping this standalone example safe to try.
- In a real app, the server would handle GET /preview and POST /publish separately and validate and authorise the publish request.
Best practices
- Specify type="submit" explicitly when a button submits a form.
- Keep server-side validation and authorisation for every action.
- Use a true button action rather than JavaScript URL rewriting when native submitter overrides suffice.
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<button> formaction
Desktop
- Chrome
- Supported
From 9 - Firefox
- Supported
From 4 - Safari
- Supported
From 5.1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 5 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 9
Firefox
- From 4
Safari
- From 5.1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 5
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<button> formmethod
Desktop
- Chrome
- Supported
From 9 - Firefox
- Supported
From 4 - Safari
- Supported
From 5.1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 5 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 9
Firefox
- From 4
Safari
- From 5.1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 5
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
SubmitEvent.submitter
Desktop
- Chrome
- Supported
From 81 - Firefox
- Supported
From 75 - Safari
- Supported
From 15.4 - Edge
- Supported
From 81 - Opera
- Supported
From 68
Mobile
- Safari on iOS
- Supported
From 15.4 - Chrome for Android
- Supported
From 81 - Firefox for Android
- Supported
From 79 - Samsung Internet
- Supported
From 13.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 81
Firefox
- From 75
Safari
- From 15.4
- From 15 · Removed in 15.4 · Last supported version: 15.3 · Partial implementation · Property is not set for <button> elements. See bug 229660.
Edge
- From 81
Opera
- From 68
Safari on iOS
- From 15.4
- From 15 · Removed in 15.4 · Last supported version: 15.3 · Partial implementation · Property is not set for <button> elements. See bug 229660.
Chrome for Android
- From 81
Firefox for Android
- From 79
Samsung Internet
- From 13.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.