App path Data

Forms people can finish

A form that says what went wrong and how to fix it, and works with a keyboard and a screen reader.

Start this module

Example brief

A neighborhood directory needs an add-a-contact form with a required name and an optional detail line.

An example. Use your own idea next.

Steps

Decide which fields are required and which are optional.
Ask for a label on every field and an error message that names the problem.
Submit the form empty, then filled. Does the message tell you what to do?

What you will learn

Validation: Checking what was typed before using it, and explaining a problem in words the person can act on.
Labels: Text tied to a field with the for attribute, so the field has a name for everyone and a bigger tap target.
Live region: An element whose changes are read aloud by screen readers, such as a status or alert message.

A sample prompt

A neighborhood directory app. The add form has a required name and an optional detail. Every field has a label. If the name is empty, show a message that says to enter a name and move focus to the field.

Write yours first, then compare.

To complete it

Pass all 9 checks on one version, then accept.