The HTML method attribute
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
<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, orpostwith a trailing space, isn't a keyword, so the form quietly sends GET. - Give each button of a
method="dialog"form a value, such asvalue="cancel", and read the dialog'sreturnValuein its close event to learn which button was pressed.























