Exercise: A Song Request Form

Build the request form for a local radio station, with four labeled text boxes and a submit button, then send it by GET and by POST and record exactly what it sent, while the tests check every box and label.

Apprentice · HTML · Web Development · Updated

Radio Ridgeview 101.5, a made-up local station, takes song requests by phone, and the DJ would love to take them online too. The station's last volunteer started the request form and got as far as one box, with a gray placeholder and no label. In this exercise you finish it: four labeled boxes, a button that says what it does, and answers that go to the right place. Then you look under the hood, sending the form by GET and by POST and writing down exactly what left your browser each time. Tests check your form and your notes as you go.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it where you keep your practice folders. Then open the folder in VS Code.

The folder holds:

  • index.html: the request page, with its header, footer and the volunteer's form. For you to finish.
  • answers.txt: two numbered lines for what your form sent. For you to fill in.
  • received.html: the page your form sends to. It shows what a GET form sent, as a table, using a small script you don't need to read. Ready to use.
  • style.css: a ready-made stylesheet for both pages, so a well-built form looks good on its own. Ready to use.
  • page.test.js and package.json: the tests that check your work. You don't need to change these.

What to do

Here is the form as the volunteer left it in index.html:

<form>
  <input type="text" placeholder="Your name">
</form>
  1. Send it to the right place. Give the form action="received.html" and method="get".
  2. Build four text boxes. The station's computer reads the names listener, song, artist and shoutout, so use exactly those. The volunteer's box becomes the listener box.
  3. Label every box. A <label> on the line above each box, tied to it by for and id. A placeholder may stay as an example, never as the only label.
  4. Add a button inside the form, with its type written and words that say what happens.
  5. Send it by GET. Open the page with Live Server, fill in every box (try a song title with spaces and a shout-out with a comma), and send it. received.html shows what arrived. Copy the whole address from the address bar onto line 1 of answers.txt.
  6. Send it by POST. Change the form to method="post", open the developer tools' Network panel, and send the form again. Chrome shows HTTP ERROR 405, which is expected: Live Server only hands out files. Click the received.html request, open Payload, click view source beside Form Data, and copy that line onto line 2 of answers.txt.

Check your work

Open VS Code's terminal (Terminal > New Terminal) and run:

npm install
npm test

You only need npm install once. At first all nine tests fail: that's expected. Each step you finish turns its tests green, and the POST test waits for step 6. A failing test's message says what it looked for, for example The song box needs a <label for="song"> with words in it. A label's for matches the box's id, not its name.

Hints

  • Read each label aloud. "The label is for the input whose id is song." If no box has that id, the label belongs to nothing. Text Inputs and Labels shows both ways to tie them.
  • A row missing on received.html? Check that box's name. A box with no name is never sent (How a Form Sends Data).
  • Count the symbols. Line 1 has one ?, then four pairs joined by three &. Spaces show as +, and a comma or an exclamation mark as a % code. That's the browser's doing, and it's correct.
  • Can't find the request in the Network panel? Open the panel before you press the button, then look for the line named received.html.
  • Write the type on your button, even though a button in a form sends it by default (Buttons).

When you're done

Every test is green, and npm test prints:

> test
> node --test

✔ 1) the form sends its answers to received.html (2.4933ms)
✔ 2) four text boxes, named listener, song, artist and shoutout (3.8131ms)
✔ 3) every box has a label tied to it by for and id (1.0849ms)
✔ 4) no placeholder is used as the only label (1.0727ms)
✔ 5) a submit button that says what it does, with its type written (0.438ms)
✔ 6) the form sends by POST in the end (0.0949ms)
✔ 7) the page passes the HTML validator (96.2763ms)
✔ 8) answers.txt line 1: the address after sending by GET (0.5121ms)
✔ 9) answers.txt line 2: the request body after sending by POST (0.4643ms)
ℹ tests 9
ℹ suites 0
ℹ pass 9
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0

Your times will differ. Now put your two lines in answers.txt side by side. The pairs after the ? on line 1 and the pairs on line 2 should match exactly. What changed between GET and POST, and what didn't? Which of the two would you want for a form that asks for a password?

So what

You can now build a form that anyone can fill in, with a mouse, a keyboard or a screen reader, and you can prove what it sends. That second skill is how developers track down nearly every "the form doesn't work" bug.

Key terms

Related