Fix this page

Give the field a name

Connect a visible label to a form field.

Your goal

Give the text field a visible, associated label reading “Project name”. Keep the field usable. Click the label to try focusing the field. This practice form cannot send data.

Read one possible solution

HTML · EXAMPLE

<form>
  <label for="project-name">Project name</label>
  <input id="project-name" type="text" placeholder="My first website">
  <button type="button">Preview project</button>
</form>

CSS · EXAMPLE

label, input, button { display: block; margin-bottom: 16px; }
input, button { font: inherit; padding: 10px; }
button { background: #ff7700; color: #20212a; border: 0; border-radius: 6px; }

An associated label supplies the field’s accessible name and a larger click target. A placeholder disappears while typing and does not replace a visible label. Both an explicit for/id relationship and a wrapping label can work.

Starting code and all hints

HTML · EXAMPLE

<form>
  <p>Project name</p>
  <input id="project-name" type="text" placeholder="My first website">
  <button type="button">Preview project</button>
</form>

CSS · EXAMPLE

label, input, button { display: block; margin-bottom: 16px; }
input, button { font: inherit; padding: 10px; }
button { background: #ff7700; color: #20212a; border: 0; border-radius: 6px; }

A nearby paragraph does not establish a label relationship.
Use a label element. Its for attribute should match the input id.
Replace the paragraph with <label for="project-name">Project name</label>. Wrapping the input in a label is another valid approach.

Read the related guide →

Original missions by Mario V.W.B.R. Obst with AI assistance · October 2026.

Give the field a name

Your goal

Your working preview