23. Labels and Placeholders for User Guidance
Good forms are usable and accessible. Labels and placeholders are vital for user guidance.
23.1 The <label> Element (Mandatory for Accessibility)
A <label> associates text with a specific form control. This is mandatory for accessibility because screen readers need to know which text corresponds to which input.
To link a label to an input, the label's for attribute must match the input's id attribute.
html
Tip: If you click the label text, the associated input field will automatically gain focus.
23.2 The placeholder Attribute
placeholder provides short hint text displayed inside the input field when it is empty. This text disappears when the user starts typing.
html
Warning: Placeholders should not replace labels. Labels are permanent instructions, while placeholders are temporary hints.