HTML Forms — How Pages Send Data
A shopper types "poems" into the bookshop's search box and presses Enter. No JavaScript runs, yet your server receives a request with that word in it. The HTML form did it, and knowing exactly what a form sends lets you read your server's input without guessing.
The rule
action is the URL, method is the verb, name is the key.
<form action="/search" method="get">
<input type="search" name="q">
<button>Search</button>
</form>actionis where the request goes. If you leave it out, the form submits to the current page's URL.methodis the HTTP method:getorpost. Plain HTML forms can send only these two; if you omit it, the default isget.nameon each field becomes the key. The field's current value becomes the value. A field without anameis not sent at all.
With method="get", the fields go into the URL as a query string. Submitting "poems" requests:
GET /search?q=poems HTTP/1.1Spaces and special characters are encoded, so "salt road" becomes q=salt+road. Because the values sit in the URL, they also end up in browser history, bookmarks and server logs, which is one more reason never to send a password with GET.
With method="post", the same key=value pairs travel in the request body instead, by default with Content-Type: application/x-www-form-urlencoded:
<form action="/newsletter" method="post">
<input type="email" name="email" required>
<input type="text" name="name">
<button>Subscribe</button>
</form>POST /newsletter HTTP/1.1
Content-Type: application/x-www-form-urlencoded
email=asha%40mail.example&name=Asha(%40 is the encoded @.) Attributes like required and type="email" make the browser check the input first, but that is only a courtesy to honest users. Anyone can send the request without the form, so the server must check again.
The shortcut
Rebuild the request in your head from three attributes: take method, append action, then write name=value for every named field, in the URL for GET or in the body for POST. Then ask whether the method fits: reading uses GET, changing something uses POST.
Method and action
method="post",action="/newsletter": the request line isPOST /newsletter.
Drills
Answer fast — trust the rule.
A GET form with action="/search" has one field name="q". The user types poems. What is requested?
A text input has no name attribute. What does the server receive for it?
Where do the fields of a method="post" form travel?
The form uses required on the email field. Can the server skip checking that email is present?
Remember
- action is the URL, method is the verb, name is the key.
- GET puts
name=valuein the query string; POST puts it in the body; unnamed fields are skipped. - Browser validation is convenience; the server still checks everything.