HTML Forms: GET versus POST

See what each form method sends over HTTP and when to use it.

HTML

<form action="/search" method="get">
  <label for="q">Search</label>
  <input id="q" name="q" value="tcp">
  <button type="submit">Search</button>
</form>

<form action="/login" method="post">
  <input name="user" autocomplete="username">
  <input name="password" type="password" autocomplete="current-password">
  <button type="submit">Log in</button>
</form>

Explanation

A form sends its fields to the address in action using the HTTP method in method. With GET the fields are added to the URL as a query string, so the form below requests /search?q=tcp. GET is for reading data: the URL can be bookmarked, cached, and shared, but it is also stored in history and server logs, so it must not carry secrets. With POST the fields travel in the request body, which is for actions that change something on the server and for sensitive values such as passwords. POST requests are not cached or bookmarked by default.

Explore the dry run

Guided walkthroughReady

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

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

3 <input id="q" name="q" value="tcp">

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

5</form>

7<form action="/login" method="post">

8 <input name="user" autocomplete="username">

9 <input name="password" type="password" autocomplete="current-password">

10 <button type="submit">Log in</button>

11</form>

Follow the example

Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.

View the complete dry-run table

Prepared trace of the published program. Some rows group repeated iterations.
What happens	State after step	Output so far
GET puts the fields in the URL: the browser requests /search?q=tcp.	`—`	—
The name attribute becomes the parameter name in the query string.	`—`	—
POST sends the fields in the request body instead of the URL.	`—`	—
Passwords must never be sent with GET. type=password hides the characters on screen. Use HTTPS so the body is encrypted in transit.	`—`	—

Open lesson and walkthrough Preview example