The Life Starter
Sign up
All courses/Digital

Course 276 · Digital course 39

Build an Accessible Multi-Step Form

Build a local two-step fictional workshop-registration form with labeled fields, preserved back navigation, error summary and a review-before-submit screen; no data is sent. Work from supplied original examples and check changed cases.

Before you start

Review Build your first website and the existing JavaScript calculation course.

Add JavaScript Interactivity to a Web Page See everything you’ll need

Free download · Original practice data · No external account required. Download the starter pack

What you’ll leave with

A local two-step fictional workshop-registration form with labeled fields, preserved back navigation, error summary and a review-before-submit screen; no data is sent.

Start course Start without an account. Sign in to save lesson progress across devices.

Your project

Start with the practice files. Build your project one lesson at a time.

Practice files are free without an account. Sign in to save your project record in My Proof: a description, checklist, and optional work link. Keep the original files in your own app or notebook; saving a project record does not upload them.

  1. Get your materialsDownload practice filesSupplied practice cases, a blank working record, complete lesson instructions, and annotated worked examples.
  2. Make your projectView the project checklist Work in your own notebook, document, or software. Use the supplied practice examples when you prefer.
  3. Keep a private recordSave a project record Sign in to save a description and checklist, then return to update them.
Course handbook

Know the route before you begin.

Here’s what you’ll need and what you’ll make. You can return to this guide during any lesson.

Who this is for

Learners ages 14+ and adults ready for the named prerequisite; no employment or private records required.

Prepare before lesson one
  • Review Build your first website and the existing JavaScript calculation course.
  • Use a current browser, a text editor, Python 3 for the loopback-only file server, and optional free Node.js for logic assertions. No packages or account required.
  • Create a fresh local folder and use fictional nicknames only. Nothing in this app sends or saves a registration.
Your final project

Finish with proof you can use.

A local two-step fictional workshop-registration form with labeled fields, preserved back navigation, error summary and a review-before-submit screen; no data is sent.

Save a project record in My Proof
See project checklist and review criteria

Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.

What to include

  • Create a step map and verify that Next, Review, and local completion have distinct behavior.
  • Produce an inspected label/group map with working for/id associations.
  • Record missing, malformed, endpoint, and repaired input behavior with actionable error messages.
  • Build a Back-navigation matrix proving that edits change the intended value and preserve other fields.
  • Produce a literal-text review that rejects an invalid complete request and reflects changed valid values.
  • Deliver source plus separate rule-test and rendered-journey evidence, with honest unverified checks.

Review and revise

Use these criteria to check your work and choose what to improve.

  • The implementation or declared simulation follows the supplied contract and retains inspectable original inputs.
  • Normal, boundary and rejected cases are recorded with expected versus observed results.
  • The changed case has a correct explanation and does not rely on hidden state.
  • The project includes source, outputs, instructions and honest tool, privacy and verification limits.
Three ideas to help you along the way
Three useful ideas

The rules behind the steps.

01

State the contract

Name inputs, permitted states and observable outputs before editing the implementation.

02

Preserve the evidence

Keep the actual source, changed input and expected/observed record so someone can repeat the work.

03

Test the boundary

Check a rejection or changed case and distinguish local practice from real service or native-tool behavior.

What do these words mean?
Key words

Key terms worth knowing.

step
One visible group within a longer form.
legend
The name of a fieldset group.
validation
A check against stated input rules.
error summary
A visible list linking errors to affected fields.
draft
Current values before completion.
Your route

6 lessons.
One useful project.

Work in order the first time. Each lesson makes something the next lesson can use.

  1. 1
    Up next

    Separate steps from submission

    Create a step map and verify that Next, Review, and local completion have distinct behavior.

  2. 2
    29 min

    Give controls explicit labels and groups

    Produce an inspected label/group map with working for/id associations.

  3. 3
    29 min

    Validate one step and explain its errors

    Record missing, malformed, endpoint, and repaired input behavior with actionable error messages.

  4. 4
    29 min

    Preserve values through Back navigation

    Build a Back-navigation matrix proving that edits change the intended value and preserve other fields.

  5. 5
    29 min

    Build a review that remains text

    Produce a literal-text review that rejects an invalid complete request and reflects changed valid values.

  6. 6
    29 min

    Test the complete form journey honestly

    Deliver source plus separate rule-test and rendered-journey evidence, with honest unverified checks.

Use the tools

Tools to help you practice.

See all tools
ZIP · practice files

Build an Accessible Multi-Step Form practice files

Supplied practice cases, a blank working record, complete lesson instructions, and annotated worked examples.

Text worksheet

Your course project worksheet

A downloadable text worksheet with each lesson’s working output, space for your answers, and the shared final-project checklist. Save your own copy.

Source transparency

Sources and further study.

Explore the references behind the lessons and take your learning further. Source notes explain access and reuse.

developer.mozilla.org — Constraint_validation
Source & access notes · checked 2026-10-01

Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.

Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.

Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.

developer.mozilla.org — label
Source & access notes · checked 2026-10-01

Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.

Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.

Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.

developer.mozilla.org — fieldset
Source & access notes · checked 2026-10-01

Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.

Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.

Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.

Ready when you are

Start with the first useful move.

You’ll always know what to do, what to make, and where to go next.

Start lesson one