# 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 October 30, 2026

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`:

```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:

```bash
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:

```text
> 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

- [Form](https://www.ask-codey.com/glossary/form)
- [Form action](https://www.ask-codey.com/glossary/form-action)
- [GET form](https://www.ask-codey.com/glossary/get-form-submission)
- [POST form submission](https://www.ask-codey.com/glossary/post-form-submission)
- [&lt;label>](https://www.ask-codey.com/glossary/label)
- [Submit button](https://www.ask-codey.com/glossary/submit-button)

## Related

- [How a Form Sends Data](https://www.ask-codey.com/lessons/html-forms-how-a-form-sends-data)
- [Text Inputs and Labels](https://www.ask-codey.com/lessons/html-forms-text-inputs-and-labels)
- [Buttons](https://www.ask-codey.com/lessons/html-forms-buttons)

Source: https://www.ask-codey.com/lessons/exercise-html-song-request-form