Start learning →

Forms and user input

How websites collect information: building forms that are sent correctly, choosing the right control for each answer, and checking values before they are sent.

About 4 hours of study

Learning objectives

Lessons

  1. 1

    Forms: asking the user for information

    Build a form that really sends data: inputs, labels, names, buttons, GET and POST, and why every field needs a label.

  2. 2

    The right control for each question

    Number boxes, dates, checkboxes, radio buttons, drop-downs and text areas: choose the control that suits the answer, and group related ones.

  3. 3

    Checking answers before they are sent Intermediate

    Use the browser's built-in checks: required, length and range limits, patterns, and why a check in the browser never replaces one on the server.

Module practice

Module quiz

1. Which attribute decides the key under which a value is sent?
2. A site's search results should be shareable as a link. Which method suits this?
3. What is wrong with using a placeholder instead of a label?
4. Two radio buttons have different name values. What happens?
5. Someone deletes the required attribute using developer tools, then submits. Who should catch the empty value?
6. What does pattern="[A-Z]{3}" accept?

‹ Links, images, lists and tablesMeaningful, accessible pages ›