Frontend Stories

Placeholders are problematic

Placeholder text can be a great way to speed up form completion, but it can also have a downside. This article looks at the effects of placeholder text on user accuracy when filling out forms.


Placeholder text can cause users to forget what they need to type in, or to think that a certain field is not required. Additionally, the text is often low contrast making it difficult to read.

The placeholder attribute provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that provides a hint as to the expected type of data, rather than an explanation or prompt. The text must not include carriage returns or line feeds. So for example if a field is expected to capture a user's first name, and its label is "First Name", a suitable placeholder might be "e.g. Mustafa".Note: The placeholder attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. (MDN)

Evidence and further readings

Here you can find a list of references to dive deeper on the subject.