Everyone Can Learn Program
中文 Start learning
Core · FrontendLesson 2 of 8Free to read

Forms and accessibility · Frontend: HTML, CSS and JavaScript

How does a page ask the user for information?

Course contents

Why you need it

Sign-ups, logins, searches, checkouts: almost every useful site has a form. A well-built form works with a keyboard, a phone and a screen reader; a careless one locks people out and loses customers.

The intuition

A form is a group of inputs plus a button that sends them:

<form action="/login" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Log in</button>
</form>
  • **type** picks the kind of input: text, email, password, number, checkbox… Phones show a matching keyboard, and the browser checks the format for you.
  • **name** is the key the server receives: email=ada@example.com.
  • **<label for="email">** names the input whose id is email. Clicking the label focuses the input, and screen readers read the label aloud. You can also put the input inside the label.
  • **required** stops the form from sending while the field is empty.

A placeholder is a hint, not a label: it disappears as soon as you type.

Definition

Label

The visible name of an input, connected by for="id" or by wrapping the input. Screen readers announce it when the input is focused.

Accessibility

Making a page usable by everyone, including people using a keyboard only, a screen reader or a zoomed-in screen.

Examples

A login form

Run it in the lesson

Each input has a label, a name and a type that fits its content.

<form action="/login" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="pw">Password</label>
  <input id="pw" name="password" type="password" required>

  <button type="submit">Log in</button>
</form>
Step by step
  1. L1action is where the data goes, method is how: post keeps it out of the address bar.
  2. L2This label belongs to the input with id="email".
  3. L6Typed characters are hidden as dots.
  4. L8Pressing it (or Enter) submits the form.

Choices

Run it in the lesson

Checkboxes for yes/no, a select for one of many.

<form>
  <label><input type="checkbox" name="news"> Send me the newsletter</label>

  <label for="size">Size</label>
  <select id="size" name="size">
    <option>Small</option>
    <option>Medium</option>
    <option>Large</option>
  </select>
</form>
Step by step
  1. L2The input sits inside its label, so clicking the text ticks the box.
  2. L5A drop-down; each option is one choice.

Common mistakes

Placeholder instead of a label

The hint vanishes as soon as someone types, and many screen readers skip it. Always add a real label.

A div that acts as a button

A <div onclick=…> can't be reached with the Tab key and isn't announced as a button. Use <button>.

Forgetting name

An input without a name isn't sent with the form at all.

Quick quiz

1. What connects `<label for="zip">` to its input?

  1. AThe input has id="zip"
  2. BThe input has name="zip"
  3. CThe label is just above the input
Show the answer

Answer: A

for matches the input's id. name is what the server receives.

2. Which type checks the format and shows an @ key on phones?

  1. Atype="email"
  2. Btype="text"
  3. Ctype="at"
Show the answer

Answer: A

type="email" gives an email keyboard and blocks text without @.

Practice

3 exercises in three steps: predict what a program prints, change a program to meet a new requirement, then write one from scratch. Your code runs in the browser and is checked the moment you submit.

  1. PredictWhich inputs are labelled?

    A screen reader focuses each of these inputs in turn. For which ones can it read out a label?

  2. ModifyFix the sign-up form

    This form looks fine but has three problems: a label points at the wrong id, the email box doesn't check the format, and the password is shown on screen. Fix all three.

  3. WriteA newsletter form

    Write a form that sends to /subscribe with method="post". It needs:

    • an email input with name="email", marked required, with a label
    • a checkbox with name="weekly" and a label ("Weekly digest")
    • a submit button with the text Subscribe

Practise this lesson

Open the interactive lesson to edit and run these examples and solve the exercises with instant feedback. Free to start, no sign-up.

Open the interactive lesson Course map

Interactive lessons open in order. If you have not done the earlier ones yet, you start at the course map.

Terms in this lesson

TermChineseDefinition
Form表单A group of inputs whose values are sent together.
Label标签（label）The name of an input; linked with for="id".
Accessibility (a11y)无障碍Making pages usable by everyone, whatever device or ability.