Lesson 08 · Structure and meaning

Forms

A form is how a page asks a visitor for something and sends the answer to a server. Read a seven-line order form line by line and watch each control appear: a label tied to its box, a text box with a name, a number box and a button. Then fill it in: see the browser refuse an empty required box, turn the answers into name=value pairs, send them to the server with GET, and learn when POST is the better choice.

10 min11 steps5 questionsIntermediate

Fig 8 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01A form has <label for="email">Email</label>. What must the matching input have so the two are linked?

A label's for attribute holds the id of its control. name is something else: the key the value is sent under. Many fields use the same word for both, as this lesson's form does.

02Which pairs does this form send? <input name="q" value="cold brew"> <input value="2"> (the second input has no name)

A field without a name is left out of the pairs. The space in cold brew is sent as +, so the form sends q=cold+brew.

03A visitor clicks the submit button while a required text box is empty. What happens?

Constraint validation runs before sending: the browser reports the problem at the first invalid field and the form is not submitted. The server should still check, because anyone can send a request without your page.

04A form has action="/search" and no method. You type tea into its only field, named q, and submit. Where does the browser go?

With no method attribute the browser uses GET, which puts the name=value pairs in the address after a ?.

05Which form should use method="post"?

POST sends the pairs in the request body, so a password does not end up in the address bar or history. Searches and filters only read, so GET suits them and makes the result easy to bookmark.

Key terms

Glossary

Form: The <form> element: a group of controls whose values the browser sends together to the address in its action attribute.
Control: A part of a form a visitor can use, such as a text box (<input>), a number box (<input type="number">) or a button.
Label: The <label> element: the visible name of a control. Its for attribute matches the control's id, so clicking it focuses the control and screen readers read it out.
name attribute: The key a control's value is sent under, as in drink=Flat+white. A control without a name is not sent.
required: A boolean attribute: the browser will not send the form while this control is empty.
Submit: Sending a form. A <button> inside a form submits it unless it has type="button".
GET and POST: The two methods a form can use. GET puts the name=value pairs in the address after a ?; POST sends them in the body of the request.
Screen reader: Software that reads the screen aloud (or to a braille display) for people who cannot see it; it uses labels to name each control.

Fine print

Notes and sources

The seven lines are a working page: save them as menu.html and open it. A full page would also start with <!DOCTYPE html> and have html, head and body tags, which the browser adds when they are missing.
After a real submit the browser loads whatever page the server sends back, such as "Thanks for your order". The figure keeps the form in view so you can see the parts.
The wording and look of the "fill out this field" message differ between browsers; the HTML standard only says the browser must report the problem and not send.
Checks in the browser help the visitor, but they are not security: anyone can send a request to /order without your page, so the server must check every value again.
Encoding: letters, digits and * - . _ stay as they are, a space becomes +, and every other character becomes % and two hex digits per byte (é is %C3%A9).

Quiz Unlocks after the last step.