HTML method Attribute

Introduction

The method attribute on <form> tells the browser how to send form data to the server when the user submits. It accepts two HTTP methods: get (the default) and post. With get, named fields are appended to the URL as a query string—ideal for searches. With post, data travels in the request body—better for logins, registrations, and changes that should not appear in the address bar. Always pair method with the action attribute, which sets the destination URL.

What You’ll Learn

Purpose of method Attribute

The primary purpose of method is to define how the browser packages and delivers form field values to the URL in action. A search box with method="get" produces bookmarkable URLs like /search?q=html. A signup form with method="post" keeps names and emails out of the visible URL and avoids length limits that affect long query strings.

Servers use the HTTP method to decide how to handle the request. GET requests should be safe and idempotent (read data without side effects). POST is used when submitting data that creates or updates something. HTML forms only expose get and post—other verbs like PUT or DELETE require JavaScript APIs or server configuration.

📝 Syntax

Add method on a <form> together with action:

<!-- POST: data in request body -->

<form action="/submit-form" method="post">

  <label for="name">Name:</label>

  <input type="text" id="name" name="name">



  <label for="email">Email:</label>

  <input type="email" id="email" name="email">



  <button type="submit">Submit</button>

</form>



<!-- GET: data in URL query string (default if method omitted) -->

<form action="/search" method="get">

  <input type="search" name="q">

  <button type="submit">Search</button>

</form>

Syntax Rules

• Valid only on <form> elements.
• Allowed values: get or post (case-insensitive in HTML).
• Default is get when the attribute is omitted.
• Works with action (URL) and named name attributes on controls.
• File uploads with type="file" require method="post" and enctype="multipart/form-data".
• JavaScript IDL property: formElement.method = "post".

💎 Values

The method attribute accepts two HTTP methods for HTML forms:

• get — Default. Appends name=value pairs to the action URL after ?. Suitable for searches, filters, and read-only queries. URLs can be bookmarked and shared.
• post — Sends data in the HTTP request body (typically application/x-www-form-urlencoded or multipart/form-data). Use for login, registration, checkout, and any operation that changes server data.

document.getElementById("dynamicForm").method = "post";

document.getElementById("searchForm").setAttribute("method", "get");

Applicable Elements

get vs post vs formmethod

formmethod on a submit button overrides the form’s method for that single submission only.

Examples Gallery

POST signup form, GET search form, and switching form.method with JavaScript.

<form action="/submit-form" method="post">

  <label for="name">Name:</label>

  <input type="text" id="name" name="name">



  <label for="email">Email:</label>

  <input type="email" id="email" name="email">



  <button type="submit">Submit</button>

</form>

<form action="/search" method="get">

  <label for="q">Search:</label>

  <input type="search" id="q" name="q">

  <button type="submit">Search</button>

</form>

<form id="dynamicForm" action="/api" method="get">

  <input type="text" name="topic">

</form>



<script>

  document.getElementById("dynamicForm").method = "post";

</script>

♿ Accessibility

• Label every control — Whether GET or POST, users need clear labels tied with for and id.
• Announce form purpose — Use a heading or aria-labelledby so assistive tech users know what the form does before submitting.
• Do not put secrets in GET URLs — Passwords in query strings appear in browser history, logs, and referrer headers.
• Provide submit feedback — After POST, redirect or update the page so users know the submission succeeded.
• Keyboard accessible — Ensure submit buttons are real type="submit" controls, not divs with click handlers only.

💡 Best Practices