Labels, Placeholder and Validation Attributes

A label connects descriptive text to a form field, helping visitors understand what to type and improving accessibility, since screen readers announce the label when the field is focused.

Placeholder text shows a light hint inside an empty field, but it disappears once typing begins, so it should never replace a proper label.

HTML also offers built-in validation, like required, which stops a form from submitting if a field is left empty.

<label for="email">Email Address</label>

<input type="email" id="email" placeholder="[email protected]" required>

Explanation:

• The for attribute on the label must match the id on the input exactly. This link means clicking the label text will also focus the input field.
• The required attribute alone, without JavaScript, stops the form from submitting until that field has a value.