Lessons · HTML and CSS · a placeholder is not a label
A placeholder is not a label
It disappears the moment somebody types, taking the only instruction with it.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
Halfway down a long form every field shows what the user typed and nothing shows what it wanted. Anyone who loses their place has to clear a field to find out what it was for.
How to think about it
Keep the label and use the placeholder for a format hint -- 'DD/MM/YYYY' under 'Date of birth'. The test is whether losing it costs anything, and with a real label it does not.
Worked example
<input id="p" placeholder="Email">The placeholder attribute is there and the .labels list is still 0. Some readers announce a placeholder when there is nothing else and some do not, and none of them treats it as the field's name.
Your turn
A placeholder is a hint about the
Write a page and watch it render
The trap
Placeholder text is also usually low-contrast by default, so the one instruction on the field is often the hardest text on it to read.