Theory
Where does the data go?
A student fills in the FestConnect form: name, email, event, phone. They press Register. The boxes clear. Now what? Where did that data actually go?
None of the input boxes decide that. The <form> tag wrapped around them decides. A form is a container plus a set of instructions: on submit, collect everything inside me, and send it to a certain page, by a certain method. Those two instructions are the action and method attributes.
Theory
An envelope with an address and a delivery mode
The form is an envelope. Every input inside it is a slip of paper you drop in. On submit, the envelope is sealed and posted.
actionis the address on the envelope: which page receives it.methodis the delivery mode: written on a postcard for anyone to read (GET), or sealed inside so only the receiver opens it (POST).
Theory
action and method
- action: the URL that handles the data, for example
action="register.php". - method: how the data travels.
- GET appends the data to the URL:
register.php?name=Aditi&event=Robotics. Visible, bookmarkable, length-limited. Good for searches and safe reads. - POST puts the data in the hidden request body. Not shown in the URL, no length limit. Use it for registrations, logins, anything that changes or is private.
If you omit method, the default is GET.
Practical
The FestConnect form shell
<form action="register.php" method="post" autocomplete="on">
<!-- input controls go here (next lesson) -->
<input type="text" name="fullname">
<input type="email" name="email">
<button type="submit">Register</button>
</form>
<!-- method="post" keeps the phone/email out of the visible URL -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
The other form switches
| Attribute | What it does |
|---|---|
| novalidate | turns off the browser's built-in validation on submit |
| autocomplete | on or off: offer the browser's saved values |
| target | where the response opens (_self default, _blank new tab) |
Think first
GET or POST for registration?
FestConnect collects a phone number and email. Should the form use GET or POST, and what would go wrong with the other choice? Answer before tapping.
Show the answer
Use POST. With GET, the phone and email would sit in the address bar (register.php?email=aditi@x.com&phone=98...), visible over the shoulder, saved in browser history, and logged by servers. GET also caps how much you can send. POST hides the data in the request body and has no length limit, which is why every login and sign-up form uses it.
Quiz
A search box on FestConnect lets users share the results link with friends by copying the URL. Which method fits, and why?
- GET: the query sits in the URL, so the link is shareable and bookmarkable
- POST: it hides the search term, which is what sharing needs
- Either one: method has no effect on the URL
- novalidate: that is what makes URLs shareable
Show the answer
GET: the query sits in the URL, so the link is shareable and bookmarkable
GET is exactly right for a search you want to share: the term lives in the URL (?q=robotics), so copying the link reproduces the results (A). POST hides the term in the body, so the URL carries nothing to share (B). Method absolutely changes the URL (C is the whole GET/POST distinction). novalidate (D) only disables validation and has nothing to do with URLs.
Watch out
The GET vs POST trap
This is the most asked form question. Get the summary right:
- GET: data in the URL, visible, bookmarkable, limited length, for reads/searches.
- POST: data in the body, hidden, unlimited, for writes/logins/sign-ups.
Mark-losers: saying 'POST is always more secure' (POST is not encryption, only HTTPS is; POST just keeps data out of the URL), and forgetting the default method is GET.
Theory
This is the empty stage
Right now the form has almost nothing inside it. The next lesson fills it with the real controls: text boxes, radios, checkboxes, dropdowns. Every one of them must sit inside this <form> and carry a name, because the name is the label under which its value is sent to action. In Unit 5 you will add JavaScript validation before the data ever leaves.
Summary
Key takeaways
- <form> wraps input controls and sends their data on submit.
- action = the URL that receives the data; method = how it is sent.
- GET puts data in the visible URL (shareable, length-limited, for reads); POST hides it in the body (for logins/sign-ups, unlimited).
- Default method is GET; POST is not encryption, only HTTPS is.
- novalidate disables built-in validation; autocomplete toggles saved values; target sets where the response opens.
- Memory hook: an envelope with an address (action) and a delivery mode (method).