Skip to main content

What does the method attribute do on <form>?

HTMLJunior~2 min read
Suggest an edit

The method attribute on the <form> tag determines how the data is sent from the form to the server, that is, exactly how the browser will transmit the information entered by the user.

It sets the request's HTTP method and directly affects where the data will be located: in the address bar or in the request body.

1. Syntax

html
<form action="/submit" method="post"> <input type="text" name="username"> <button type="submit">Submit</button> </form>

Here:

  • action="/submit": where we send the data;
  • method="post": how we send it.

2. Two main values of the method attribute

MethodHow it worksWhere the data is visibleWhere it is used
GETData is appended to the URL (in the browser's address bar)In the address (for example, ?name=Oleh)Search, filters, simple forms
POSTData is sent "in the body" of the HTTP requestInvisible to the userRegistration, login, forms with passwords

3. Example of the GET method

html
<form action="/search" method="get"> <input type="text" name="q" placeholder="Search..."> <button type="submit">Search</button> </form>

If the user enters phone, the browser sends this request:

javascript
/search?q=phone

Features:

  • the data is visible in the address bar;
  • easy to copy and share as a link;
  • cannot be used to pass confidential data (passwords, cards, etc.);
  • limited by the URL length (about 2000 characters).

4. Example of the POST method

html
<form action="/register" method="post"> <input type="text" name="login"> <input type="password" name="password"> <button type="submit">Sign up</button> </form>

The browser will send the data in the body of the HTTP request, not in the address bar:

javascript
POST /register Content-Type: application/x-www-form-urlencoded login=Oleh&password=12345

Features:

  • the data is not visible to the user;
  • no length limits;
  • suitable for sending personal or large amounts of information (files, registration forms, orders, etc.).

5. Other methods (rarely used)

Although HTML forms only support get and post, modern web applications (via JavaScript / API) also use other HTTP methods:

  • PUT: updates data;
  • DELETE: deletes data;
  • PATCH: partially updates data.

But they work only through JavaScript or API requests, not directly in HTML.

Summary:

ParameterValue
Attributemethod
PurposeDetermines how the form's data is transmitted
Main valuesget and post
GETAdds data to the URL, suitable for search
POSTPasses data in the request body, suitable for forms with personal information
If the attribute is not setGET is used by default

In simple terms: method is "how we send the letter":

  • GET: like a postcard, the text is visible to everyone;
  • POST: like an envelope, the data is inside, no one sees it.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit