Forms & User Input›Core· 35 min read

Form Attributes: action, method & GET vs POST

Where does the data go, and how? Meet the attributes that connect a form to the back-end.

What you will learn

Set where a form submits with action
Choose between GET and POST with method
Use other useful form attributes

Where the form goes: action

The action attribute is the address that receives the data when the form is submitted — usually a back-end script (a Laravel route, a Node endpoint, etc.).

How it travels: method

The method attribute decides how the data is sent. There are two choices, and the difference is about the URL — the web address that appears in the browser’s address bar (like https://site.com/search?q=html).

method	How data travels	Use for
`GET`	In the URL, visible (`?name=Asha`)	Searches, filters — nothing secret
`POST`	In the request body, not in the URL	Logins, sign-ups, anything sensitive

action = where, method = how

<form action="/subscribe" method="post">
  <label for="e">Email</label>
  <input type="email" id="e" name="email" required>
  <button type="submit">Subscribe</button>
</form>

Two new attributes on the <form> tag run the show: action="/subscribe" is the address the data is sent to, and method="post" is how it travels (POST hides it in the request body). When the user submits, the browser packs the email field and sends it to /subscribe.

What happens on submit, step by step:

The visitor fills the field and clicks Subscribe.
The browser collects the fields as name=value (here email=you@example.com).
It builds a request and sends it to the action address using the chosen method.
With POST the data rides hidden in the request body; with GET it is tacked onto the URL as ?name=value.
The server reads the data, does its job (e.g. saves the email), and sends back a response page.

See GET in action

This little form uses GET and submits to itself — after you type and submit, look at how the value appears in the preview’s address. That is GET putting data in the URL.

GET shows data in the URL

<form>
  <label>Search: <input type="text" name="q" placeholder="try: html"></label>
  <button type="submit">Go</button>
</form>
<p><small>With GET, your text appears in the address as ?q=...</small></p>

Live preview

This form has no method, so it defaults to GET. Type something in the “Search” box and submit: the value appears right in the preview’s address bar as ?q=yourtext. That visible-in-the-URL behaviour is exactly why GET suits searches but never passwords.

Note: Output: After submitting “html”, the address shows something like ...?q=html — the field name q and its value, in plain sight.

Other handy form attributes

target="_blank" — open the response in a new tab.
autocomplete="off" — stop the browser auto-filling.
novalidate — turn off the browser’s built-in validation (for testing).

Watch out: Never send passwords or private data with GET — it would appear in the URL, browser history and server logs. Use POST for anything sensitive.

Q. You are building a login form. Which method should you use?

Answer: POST keeps the data out of the URL and history. GET would expose the password in plain sight.

✍️ Practice

Build a search form using method="get" and submit it — watch the value appear in the address.
Change a form to method="post" and add an action path.

🏠 Homework

In two lines, explain when you would use GET and when you would use POST.