References

Beginner-friendly references for web development, with live, editable examples.

The HTML formmethod attribute

Attribute All modern browsers Updated
In short

The HTML formmethod attribute picks the HTTP method for a submission made with one specific button. It accepts get, post or dialog and overrides the form's method, so <button formmethod="post"> posts even when the form uses GET.

Overview

The HTML formmethod attribute sets the HTTP method a form uses when one particular submit button sends it. The allowed values are get, post and dialog, and on that button they override the form's method attribute.

With get, the browser adds the fields to the URL as a query string. With post, it sends them in the request body, encoded according to the form's enctype or the button's formenctype. The keywords are case-insensitive, and anything else, including put or delete, falls back to GET.

The dialog value doesn't talk to a server at all. When the form sits inside a <dialog>, the button closes that dialog and hands its own value to the dialog's returnValue. Outside a dialog, nothing is sent and nothing closes.

Validation still runs first. A dialog form with an empty required field stays open when a formmethod="dialog" button is clicked, unless that button also has formnovalidate. That makes formnovalidate the natural partner for Cancel buttons.

Syntax

<form action="/search" method="get">
  <label>Search <input type="search" name="q"></label>
  <button>Search</button>
  <button formmethod="post" formaction="/saved-searches">Save this search</button>
</form>

Values

Value
get | post | dialog

Example

Live example 
<dialog id="confirm">
  <form>
    <p>Delete this file?</p>
    <button formmethod="dialog" value="cancel">Cancel</button>
    <button formmethod="dialog" value="delete">Delete</button>
  </form>
</dialog>
<button type="button" id="open">Delete file</button>
<p id="result"></p>
<script>
var dlg = document.getElementById('confirm');
document.getElementById('open').addEventListener('click', function () {
  dlg.showModal();
});
dlg.addEventListener('close', function () {
  document.getElementById('result').textContent = 'You chose ' + dlg.returnValue;
});
</script>

Best practices

  • Set formmethod only on the button that needs a different method from the rest of the form.
  • Never send passwords or other sensitive data with GET, because the values appear in the URL.
  • Give Cancel buttons formnovalidate alongside formmethod="dialog" so they close even when required fields are empty.
  • Use fetch() for PUT, PATCH or DELETE requests, since an HTML form can only send GET and POST.

Frequently asked questions

What does formmethod change about a form submission?
The formmethod attribute sets GET, POST or dialog for a submission started by one button. It overrides the form's method attribute for that click only.
Can formmethod be PUT or DELETE?
No, formmethod only understands get, post and dialog. Any other value falls back to GET, so send PUT or DELETE requests with fetch() instead.
What does formmethod=dialog do?
The formmethod=dialog value closes the surrounding dialog without contacting a server. The clicked button's value becomes the dialog's returnValue.
Why does my formmethod=dialog button not close the dialog?
A formmethod=dialog button won't close the dialog while a required field is empty. The form is validated first, so add formnovalidate to Cancel buttons and check that the form sits inside a dialog element.
When should a button use formmethod=post?
Use formmethod=post on a button that changes data, like saving or deleting. Keep get for read-only actions such as search, since GET puts every field in the URL.
Is formmethod case-sensitive?
No, formmethod=POST and formmethod=post behave the same. The HTML standard matches the formmethod keywords case-insensitively.
formenctype formnovalidate