Forms and User Input

Forms collect information from the user. A well-built form is easy to read, easy to complete and usable with a keyboard.

Labels Matter

Every input needs a label. The for attribute on the label must match the input id. Clicking the label then focuses the input, and screen readers announce the field correctly.

<form action="/register" method="post">
  <label for="fullname">Full name</label>
  <input type="text" id="fullname" name="fullname" required>

  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>

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

  <button type="submit">Create account</button>
</form>

Input Types

Use the right type so phones show the right keyboard and browsers validate automatically.

• type="email" checks the email shape.
• type="number" shows a number keypad.
• type="date" opens a date picker.
• type="password" hides characters.
• type="checkbox" and type="radio" collect choices.

Groups and Choices

Use fieldset and legend to group related controls. Radio buttons with the same name belong to one choice group; only one can be selected.

<fieldset>
  <legend>Preferred contact method</legend>

  <input type="radio" id="contact-email" name="contact" value="email">
  <label for="contact-email">Email</label>

  <input type="radio" id="contact-phone" name="contact" value="phone">
  <label for="contact-phone">Phone</label>
</fieldset>

Practice

1. Build a login form with email and password fields.
2. Add a select menu for a country.
3. Add a checkbox that accepts the terms of service.

Hands-on exercise

Create a contact form containing:
1. A text input labelled Full name.
2. An email input labelled Email address.
3. A textarea labelled Message.
4. A submit button.
Every field must have a matching label.

Recap

Forms need labels, sensible input types and clear grouping. Accessible forms work with a keyboard and a screen reader.