References

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

The HTML method attribute

Attribute All modern browsers
In short

A form's method attribute picks how the form sends its data, with get, post or dialog. GET, the default, puts the fields in the URL, and POST carries them in the request body. Any other value, put and delete included, also means GET.

Overview

The HTML method attribute tells a form whether to send its data as an HTTP GET or POST request. Set on a <form>, it takes get, post or dialog, and the dialog keyword closes the form's dialog instead of sending anything.

HTML forms can't send PUT or DELETE. GET is the default when method is missing and when its value isn't a keyword, so method="put" and method="delete" send a GET request with the fields in the URL.

On a GET form, the fields become name=value pairs after the ? in the URL. A note field holding Buy milk turns /notes into /notes?note=Buy+milk, and that full address then shows in the URL bar.

A POST request leaves the address alone and carries the fields in its body, in the format set by enctype. File uploads depend on this. They need POST with enctype="multipart/form-data", because GET and the default encoding send only each file's name.

Syntax

<form action="/notes" method="post">
  <label for="note">Note</label>
  <input id="note" name="note">
  <button>Save note</button>
</form>

Values

Value
get | post | dialog

Example

Live example
<p>
  <label for="verb">Method</label>
  <select id="verb">
    <option>get</option>
    <option>post</option>
    <option>put</option>
  </select>
</p>
<form id="notes" action="https://example.com/notes" method="get">
  <label for="note">Note</label>
  <input id="note" name="note" value="Buy milk">
  <button>Send</button>
</form>
<p id="out" role="status" style="overflow-wrap:anywhere"></p>
<p>Choose each method and press Send to see the request the browser would make.</p>
<script>
const form = document.getElementById('notes');
document.getElementById('verb').addEventListener('change', function () {
  form.setAttribute('method', this.value);
});
form.addEventListener('submit', function (e) {
  e.preventDefault();
  const data = new URLSearchParams(new FormData(form)).toString();
  const out = document.getElementById('out');
  if (form.method === 'post') {
    out.textContent = 'POST ' + form.action + ' with the body ' + data;
  } else {
    out.textContent = 'GET ' + form.action + '?' + data;
  }
  if (form.getAttribute('method') !== form.method) {
    out.textContent += ' (method="' + form.getAttribute('method') + '" falls back to GET)';
  }
});
</script>

Best practices

  • Set method="post" on every sign-in and sign-up form. Never send a password with GET, since you risk displaying it in the URL bar.
  • Choose POST for forms that can carry a lot of text, such as a message box. Some browsers limit the size of URLs, and many servers limit the URL length they accept.
  • Keep typos and stray spaces out of method. A typo such as psot, or post with a trailing space, isn't a keyword, so the form quietly sends GET.
  • Give each button of a method="dialog" form a value, such as value="cancel", and read the dialog's returnValue in its close event to learn which button was pressed.

Frequently asked questions

Which method does a form use when none is set?
GET is what a form uses when its method attribute is missing, so the fields go into the URL. An empty method value gives the same result.
Should a form's method be GET or POST?
Set method to get for a form with no side effects, such as a search. Use post when the submission changes data on the server, or when its fields shouldn't appear in the URL bar.
Why does method put send a GET request?
The value put isn't a method keyword, and any unknown value counts as GET. A submit handler can call fetch() with PUT, PATCH or DELETE instead.
Which forms should use method dialog?
Use method dialog when a form's submit buttons should close the dialog it sits in. No request is sent, and outside a dialog the submission stops after the submit event.
Does POST in capitals work as a method value?
Yes, the method attribute compares its keywords without regard to case, so POST works the same as post. The form's method property reads back the lowercase keyword.
Does a button's formmethod override the form method?
Yes, formmethod on a submit button replaces the form's method, but only for submissions through that button. The form's other buttons keep the method attribute's value.