Forms

Students build a form from linked labels, boxes and a button, and find out that a form collects answers but does nothing with them on its own.

Structure and style a page · Parts of a page · about 45 minutes · Open the student lesson

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

Slides Download Present from the browser, or export to PowerPoint or PDF.
Worksheet Download Print the student copy; the Teacher edition has the answers.

Students will be able to

I can link a label to its box with a matching for and id.
I can build a form with labels, boxes, a drop-down and a button.
I can explain why a form on its own sends nowhere.

Timing

Predict and Run 10 min · Investigate 12 min · Modify 10 min · Mix it up 5 min · Make 8 min

Before class

Read the unit primer "Parts of a page in 5 minutes", then do the Make task yourself (about 5 minutes).

The surprise for students: pressing Send does nothing. The playground shows a note saying so. A form is only the front: code behind it (JavaScript in the page, or a program on a server) has to collect what was typed and do something with it. That gap is the doorway to the JavaScript courses later. A label is linked to its box when the label's for matches the box's id: clicking the label then puts the cursor in the box, and screen readers read the label aloud for that box.

Each label and its box sit in a <p> so that every field starts on its own line. Making a form look like a card is Course B.

Running the lesson

Predict: most students expect the form to send or save something. Nothing happens. Ask: what would have to exist for the name to reach the club?
Run: click the label to see the cursor jump. That is the visible sign of a linked label.
Investigate: the match task names each part. Then test every label by clicking it; the broken one has id="mail" where the label says email.
Modify: one field at a time, clicking each new label to test it.
Mix it up: two boxes share an id, so the Friend label finds the first box. This is the id lesson again, in a form.

In class

On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.

Where does the name go? (predict, 3 min)
With your partner, decide what happens to the name when someone presses Send. Hold up 1, 2, 3 or 4 fingers for your answer.

Count the votes before running. Ask what would have to exist for the name to arrive anywhere: that is the code behind the form.
Click-test a neighbour's form (end, 4 min)
Swap forms with a partner. Click every label. For any that fail, say which for and id do not match.

Listen for students who look at where the label sits instead of at the for and the id.

The hard part (on purpose)

A form that does nothing, and labels linked by matching for and id. Let them click each label to test it, and ask which pair does not match.

When students get stuck

What you will see	A question to ask	The fix
Clicking a label does nothing.	Does the label's for match the box's id exactly?	Make them identical, for example for="email" and id="email".
Two fields run together on one line.	Is each label and its box inside its own paragraph?	Wrap each label and its box in <p> and </p>.
The drop-down is empty or shows tags as text.	Is every choice between <option> and </option>, inside the select?	Put each choice in its own <option> inside <select> and </select>.

Answers to the checks

Predict: Someone types their name and presses Send. What happens?
Nothing. A form collects what was typed, but sending or saving it needs code behind the form, and this page has none.
Match the parts: Match each part with its job.
<form> → B. holds the fields and the button; <label for="name"> → A. the words that say what to type; <input id="name"> → D. a box to type in; type="email" → C. the kind of box (an email address); <select> → F. a drop-down list of choices; <button> → E. a button to press
Labels and boxes come in pairs. type changes the kind of box: text, email, number. A select is a drop-down, with one option for each choice.
Linked labels: Clicking the word Email puts the cursor in the email box. What makes that work?
for="email" on the label matches id="email" on the box
for on the label and id on the box must match exactly. Sitting next to each other, or in the same <p>, links nothing. The link also tells screen readers which words belong to which box.
The label that does nothing: Clicking Name puts the cursor in its box, but clicking Email does nothing, and there is no error. Click the line that breaks the link.
line 5
Line 5 has id="mail", but the label says for="email". They must match exactly: change the id to email.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Add an email box

<form>
  <p><label for="name">Name</label>
  <input id="name" type="text"></p>
  <p><label for="email">Email</label>
  <input id="email" type="email"></p>
  <button>Join</button>
</form>

Modify › Add a drop-down

<form>
  <p><label for="name">Name</label>
  <input id="name" type="text"></p>
  <p><label for="email">Email</label>
  <input id="email" type="email"></p>
  <p><label for="house">House</label>
  <select id="house">
    <option>Owls</option>
    <option>Hawks</option>
    <option>Kestrels</option>
  </select></p>
  <button>Join</button>
</form>

Modify › Test every label

Open task: any program that does what the step asks.

Make

<h2>Join the choir</h2>
<form>
  <p><label for="name">Name</label>
  <input id="name" type="text"></p>
  <p><label for="year">Year</label>
  <select id="year">
    <option>Year 7</option>
    <option>Year 8</option>
  </select></p>
  <p><label for="part">Voice part</label>
  <select id="part">
    <option>Soprano</option>
    <option>Alto</option>
    <option>Not sure yet</option>
  </select></p>
  <button>Join</button>
</form>

Stretch and support

Stretch: Add a type="number" box for age and a textarea for a message. Try type="date" and type="color" and see the boxes the browser builds.

Support: Give students the Modify starter and do the first task together: copy the name paragraph, then change four things (the words, for, id and type).

Exit ticket

A sign-up form has a label Email and a box, but clicking Email does nothing. Give the likely cause and the fix.

The label's for does not match the box's id (or is missing). Make them the same, for example for="email" and id="email".

What each step is for

Predict: Students assume a button sends or saves the answers by itself; committing to an answer first makes 'nothing happens' land.
Run: A form is only the front of something. A linked label puts the cursor in its box.
Investigate: Each part of a form has one job, and a label finds its box only when for matches id exactly.
Modify: Building a form field by field, each label linked to its box, and testing each link by clicking.
Mix it up: An id names one element, so two boxes with the same id send a label to the wrong one; a class colours only the elements that carry it.

Where it leads

Next is the Course A challenge: a club page with a jump-link menu, sections, a results table and a sign-up form. Course B lays the page out and styles the form as a card.