MP Web Studio
HTMLFoundation track
61 / 120

LESSON 61 OF 120

Build: a labelled text field

Explicitly connect a label to a required text input.

Official sourceWHATWG HTML — labelReviewed: 2026-08-26
STEP 1 · LEARN

How it works

Explicitly connect a label to a required text input. Semantic structure should describe meaning, not visual appearance.

Correct example
<form><label for="name">Name</label><input id="name" type="text" name="name" required></form>

The label gives the field a visible name. Its for attribute points to the input’s exact id, name identifies the submitted value, and required marks the field as mandatory.

Common mistake
<form><label>Name</label><input name="name"></form>

The label text is next to the input but is not connected through for and id. The explicit type and required state are also missing.

STEP 2 · APPLY

Your exercise

Complete the example. Explicitly connect a label to a required text input.

STEP 3 · BUILD

Write and see the result

index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The text input has id, name and required.
  • The input has a connected label.
Explain the solution logic

Use the same identifier in label for and input id, then add type="text", name and required to the input.