Form action and method

Two attributes decide what the browser does with your form. action is the URL of the request. method is how the named values travel there.

If you leave action out, the form submits to the current page URL. If you leave method out, the browser uses GET. I always write both, so anyone reading the markup knows what happens on submit.

GET for reading

Use GET when submitting the form reads information. A search is the classic case:

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

Type forms and submit. The browser navigates to /search?q=forms. The values went into the URL as a query string, the part after the ?.

That URL is a plain link now. You can copy it, bookmark it, share it, and reload it. Search engines can index it. This is why GET is the right choice for searches and filters.

POST for changing things

Use POST when the request changes something on the server:

<form action="/account/email" method="post">
  <label for="email">New email address</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Update email</button>
</form>

This time the browser puts the encoded values in the request body. The URL stays /account/email. Looking at the URL alone, you can’t tell what was sent.

Notice that HTML forms only speak GET and POST. Write method="delete" and the browser ignores it and falls back to GET. If you want other HTTP methods, you need JavaScript, and we’ll get there later in the course.

POST is not private

A common misunderstanding: POST hides the data, so it’s secure. It doesn’t. The body travels in plain text just like a URL does.

HTTPS is what protects both URLs and bodies on the network. And once the request arrives, your server logs and your own code can still leak carelessly handled values. Use POST because the request changes state, not because you think it’s hidden.

Never delete with GET

Don’t use GET for an action like deleting a record, even if it feels convenient:

<a href="/posts/42/delete">Delete</a>

GET is expected to be safe, meaning it doesn’t change anything. Browsers prefetch links. Crawlers follow them. Chat apps fetch them to build previews. Any of those could delete your post without anyone clicking.

Try this on your own project: submit one GET form and one POST form with the Network panel open. Compare where the values end up. For GET they are in the request URL. For POST they are in the payload, and the URL is clean.