Labels and Form Controls

A form control needs a name that tells visitors what information belongs there. Use a label element and connect it to the control with matching for and id values.

<label for="full-name">Full name</label>
<input id="full-name" name="fullName" type="text" autocomplete="name">

Clicking the label moves focus to its control. A screen reader can announce the label when the control receives focus. This is more reliable than using placeholder text as the only label.

A label can also wrap its control:

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

The id must be unique on the page. The name is the key used when successful form data is submitted; an id does not replace it.

Placeholder text disappears or becomes less visible when someone enters a value. It can show a short example, but it should not carry the field’s only instruction. Provide a persistent label and add help text when the expected format needs explanation.