Build an accessible form

Read first Task 52

Every input needs a `label` tied to it by `for` and `id`, and `required` lets the browser block an empty submit.

Definition and example

Build an accessible form is the focus of this lesson. Every input needs a `label` tied to it by `for` and `id`, and `required` lets the browser block an empty submit. The task asks you to apply that idea in a small example: Which attribute ties a label to its input. Before you run the code, predict what should happen. Then Inspect the rendered page and its element structure and compare it with your prediction. If the result differs, change one relevant line and run it again. Testing one change at a time makes the cause of a result easier to understand.

HTML & CSS 1 automatic check Capstone: a real page

Code editor Ctrl + Enter runs

<!-- TASK build-an-accessible-form-02: Which attribute ties a label to its input?
     STEPS: Read the explanation. Change one relevant line at a time, then run the code and compare the result with the check on the right. -->
<form>
  <label for="student-name">Full name</label>
  <input id="student-name" name="name" type="text" required>

  <label for="student-phone">WhatsApp number</label>
  <input id="student-phone" name="phone" type="tel" required>

  <button type="submit">Enroll now</button>
</form>

Run your code to see the output and the checks.

Your result

Submit your code to see results

Write your code in the middle column and press Run code.

Checks on this task:

The page must contain at least 2 matching “form label[for]” elements.

The task and step-by-step instructions are written as comments at the top of the editor. Change one relevant line, run it, and compare the result with these checks.

Incorrect attempts before answer: 0 / 3

Track progress

0 passed of 56 tasks

Pass every check or use one of your available skips to open the next task.

← Previous

Next task (pass every check first)

Build an accessible form

Build an accessible form

Why this works