What do the specifications say about the placeholder?
The
placeholderattribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
For example:
<label for="email-address">Email</label>
<input
type="email"
id="email-address"
name="email-address"
placeholder="john.doe@example.com"
/>
The function of the placeholder attribute is very different from that of <label>: a label is a title of the form control and it must always be present, the placeholder is just a help hint in certain fields and it may or may not exist. Different elements to fulfill different functions.
So when you are doing the HTML of the forms, remember that: there is no case where placeholder can replace label.
Top comments (1)
In the common case when graphic designers want no visible label, use the common class
.visually-hiddenon the label and add the necessary styles as recommended by a11yproject.