Forms are how a page asks the user for information - a name, an email address, or a choice from a menu -
and sends it somewhere.
Getting input from the user
A form groups together the controls a user fills in. Each control usually has a label that says what it
is for, and the label is linked to the control so they work together.
<form> wraps all the controls and is the element that gets submitted. Its
action says where the data goes and method says how it is sent.
<label> gives a control its text. Its for attribute matches the
control's id, which links the two together.
<input> is a single-line field. The type attribute changes what it
is: text, email, password, and submit are common
types.
<button> is a clickable control. With type="submit" it submits the
form.
<select> with <option> children makes a dropdown list to pick
one value from several.
<textarea> is a multi-line box for longer text, unlike the single-line
<input>.
Try it: a labelled input
Copy this into a new file and open it in a browser. Click the label text and watch what happens to the
input:
The label is linked to the input because its for value (name) matches the
input's id (name). Clicking the label text moves the cursor into the
input.
Key points
Every input should have an associated <label> so users know what to type.
The for attribute on the label and the id on the input must match exactly
- that is what links them.
Use the right type: email and password tell the browser how
to treat the input and what keyboard to show on a phone.
Exercises
Exercise 1 - Build a login form
Preparation: re-read "Getting input from the user" above, and
the key point about for/id.
Build a login form with two labelled inputs - one for an email address and one
for a password - plus a submit button. Link each label to its input using matching
for and id values.
Try it in: save as index.html and open in a
browser, or use CodePen / VS Code. Starter: <form>…</form>
Hint 1 - direction
Every <label> needs a
for that matches its input's id.
Hint 2 - partial solution
Use type="email" for
the email field, type="password" for the password, and a
<button type="submit"> to send it.
Hint 3 - full solution
Check your work: two labels and two inputs whose
for/id pairs match, plus a submit button. Clicking each label focuses the
matching input.
Exercise 2 - Add a select dropdown
Preparation: re-read the point about
<select> and <option>.
Extend your login form by adding a "Favourite colour" dropdown built from
<select> and <option>. Give it a label linked with
for/id, and at least three colour choices.
Try it in: your editor, then reload the page and open the
dropdown.
Hint 1 - direction
The <option> elements
go inside <select>, one per choice.
Hint 2 - partial solution
Give the <select>
an id and point the label's for at it, just like an input.
Hint 3 - full solution
Check your work: the dropdown opens to show your three options,
and clicking the label focuses (or highlights) the select.
Exercise 3 - Predict what clicking a label does
Preparation: re-read the key point about linking
for and id.
Without running anything, predict: what happens when a user clicks or taps the
label text next to an input that it is linked to? Explain in one sentence.
No code needed - answer in a sentence, then check in the
browser with the snippet above.
Hint 1 - direction
The label and input are linked, so the
click is passed on.
Hint 2 - partial solution
Think about where the typing cursor
is.
Hint 3 - full solution
Clicking the label
focuses its input - the cursor moves into the field, ready to type. For checkboxes
and radio buttons it also toggles them.
Check your work: you said it moves focus to (or selects) the
linked input - not that it submits the form or types anything.
Exercise 4 - Fix an input with no label
Preparation: re-read the key point that every input should
have an associated label.
The following input has no label, so a user cannot tell what it is for:
<input type="email" placeholder="you@example.com">. Add a proper
<label> and link it to the input with matching for and
id values.
Try it in: your editor - the fix is structural, not
visual.
Hint 1 - direction
Add a <label> before the
input, and give the input an id.
Hint 2 - partial solution
The label's for and the
input's id must be the same value, e.g. email.
Hint 3 - full solution
Check your work: the input now has an id and a
<label> whose for matches it - clicking the label focuses the
input.