Labels and Inputs

Give every field a clear name, purpose, and submission name.

Explicit labels connect visible text to controls

The label's for value matches the input's unique id. Selecting the label also focuses the input.

Why each attribute matters

type communicates the kind of data and can improve mobile keyboards.
name identifies the value during form submission.
autocomplete helps browsers fill familiar personal information.
required provides a native constraint; the label still explains the field.

Read the Phase 8 gauge

Important HTML

The label's for value must match the input's unique id so the visible name connects to the control.

<label for="full-name">Full name</label>
<input id="full-name" name="fullName" type="text" required>
<label for="email">Email address</label>
<input id="email" name="email" type="email" required>