Exercise: Fix the Frustrating Sign-Up Form

Fix Peak Fitness's frustrating sign-up form with real labels, the right types, autocomplete, hints and required fields marked in words, then let the checks and a keyboard-only run prove it works.

Journeyman · HTML · Web Development · Updated

Peak Fitness, a made-up gym, offers a free first week, and half the people who start its sign-up form never finish it. The form isn't broken: it sends, and the gym gets the answers. It's frustrating. The labels vanish as you type, every box brings up the same keyboard, nothing fills itself in, the ZIP code refuses answers without saying why, and the Clear button sits right next to Submit. Your job is to fix it with HTML alone, then check it the way real people use it: with the keyboard, and on a phone.

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 into the folder where you keep your web projects.

The folder holds:

  • signup.html: the sign-up form, for you to fix. The comment at the top lists what to fix.
  • received.html: shows, as a table, what the form sent. Ready to use.
  • style.css: the gym's ready-made stylesheet. It styles plain HTML, so the form looks good as soon as its HTML is right. Ready to use.
  • signup.test.js and package.json: the checks. You don't need to change these.

Open the folder in VS Code. Open a terminal (Terminal > New Terminal) and type npm install once, to download the two small tools the checks use.

What to do

Every field in the starter looks like this one: a text box with a placeholder, and nothing else.

<div>
  <input type="text" name="zip" placeholder="ZIP code" pattern="[0-9]{5}">
</div>
  1. Give every field a real label. Each field gets an id and a <label for="that id"> with words in it. Keep every name as it is: received.html shows the answers by those names.
  2. Give every field the type that fits its answer. Email, phone, birth date and password each have a type of their own. The membership plan is one choice from three: Basic ($25 a month), Plus ($40) and Premium ($60). A ZIP code stays text.
  3. Let the browser and the phone help. Add autocomplete to the name, email, phone, birth date, ZIP code and password, and inputmode="numeric" to the ZIP code.
  4. Explain the rules people can't see. The ZIP code has a pattern and the password a minlength. Give each one a hint that says what to type, tied to its field with aria-describedby.
  5. Say "required" in words. Remove the "Required fields in red" note, and put "(required)" in the label of every required field.
  6. Remove the reset button, and give the submit button words that say what happens.
  7. Try it the way people use it.
    • With the keyboard only. Put the mouse away. Press Tab to move from field to field, Space to pick a radio button or check a box, and Enter to send. Can you reach and answer everything, in an order that makes sense?
    • On a phone-sized screen. Press F12, then turn on the device toolbar (Ctrl+Shift+M, or Cmd+Shift+M on a Mac) and pick a phone from the list at the top. Is the form one column, and is every label next to its field?

Check your work

Right-click signup.html and choose Open with Live Server. Fill in the form with made-up answers and send it: received.html shows what the gym would get. Never type a real password into a practice form. This exercise's form uses method="get" only so received.html can read the answers from the address. A real sign-up form sends by POST, as in How a Form Sends Data.

Then run the checks in the terminal:

npm test

At first almost every check fails. That's expected: each fix turns its check green. A failing check's message says which field it looked at and what it expected, for example The "email" field should be type="email". The last check runs the HTML validator, and its messages name the line to look at.

Hints

  • A placeholder is not a label. It disappears as soon as someone types. Hints and Error Messages Everyone Can Use explains what a screen reader hears instead.
  • Radio buttons that answer one question share one name. Group them in a <fieldset> whose <legend> asks the question, and put "(required)" there.
  • Look up autocomplete values; don't guess them. A made-up value is ignored. The table in Autocomplete and Phone Keyboards has every one you need, and a sign-up form's password is a new one.
  • A hint needs an id. The field's aria-describedby names that id, with no #.
  • Fix the validator's first message first. One missing label can cause more than one message.

When you're done

The form is one column with a label above every field, the phone shows a number pad for the ZIP code, and every check is green:

✔ 1) every field keeps its name, so received.html can show it (6.7041ms)
✔ 2) every field has a real label (3.8729ms)
✔ 3) every field has the type that fits its answer (0.7949ms)
✔ 4) the plan is one choice from three, grouped with a question (2.991ms)
✔ 5) autocomplete tells the browser what each field is (0.9444ms)
✔ 6) the ZIP code brings up the number keypad on a phone (0.2848ms)
✔ 7) every rule a person can't see has a hint tied to its field (1.6699ms)
✔ 8) required fields say so in words, not color alone (1.5874ms)
✔ 9) no reset button (2.106ms)
✔ 10) the validator finds no errors (102.28ms)
ℹ tests 10
ℹ suites 0
ℹ pass 10
ℹ fail 0

The times in parentheses will be different on your computer, and a few more summary lines follow. Now look back at your form: if someone removed every required and pattern in the developer tools, what would Peak Fitness's server have to check before it saves a new member?

So what

You fixed a form the way real teams do: not by redesigning it, but by labeling fields, choosing types, helping the browser and the phone, and checking it with a keyboard and a small screen. Every sign-up, checkout and application form you build from here starts with these habits.

What's next

The Module 3 mini-capstone is A Pet Adoption Application for Happy Tails Rescue, a made-up animal shelter. You build the whole form on one page: contact details with autocomplete, the pet you'd like to meet (radio buttons with each pet's photo and name), your home (fieldsets, a dropdown, checkboxes for other pets), a day and time to visit, a "tell us about yourself" box and a required agreement. Every field has a label and a hint where it helps, the browser checks every answer, and it works with the keyboard alone and on a phone. It sends to a received.html page that shows what the shelter would get.

Module 4 fills your pages with pictures, video and sound, and makes them load fast on a phone: sharp photos in the right sizes, video with captions, and pages that appear before people lose patience.

Key terms

Related