Labels

Every input needs a <label> that says what it is for. Labels are essential for accessibility and usability:

• Screen readers read the label when the input is focused.
• Clicking the label focuses the input (or ticks the checkbox), giving a bigger target on phones.

Syntax:

<label for="email">Email address</label>
<input id="email" name="email" type="email">

The label's for must match the input's id.

Wrapping instead

<label>
  <input type="checkbox" name="terms"> I agree to the terms
</label>