“The placeholder attribute should not be used as an alternative to a label.“
Forms are nothing new to us. We see them daily when logging into a site, contacting to obtain further information, or maybe registering for a particular service.
Simply put, forms provide an important means for users and websites to interact. So, it probably goes without saying that we should make this interaction as clear as possible. But sometimes we don’t.
Some sites implement Form Placeholders for textboxes and textarea fields in their forms to display label content directly within these fields by default.
You can immediately see that in using these placeholders, the form appears ‘sleaker’, taking up less space and is aesthetically cleaner in layout.
The main issue here, among a few other important things, is that the form which uses the ‘placeholders’ no longer displays its field’s accompanying labels. This is a small example so it may not immediately seem clear, but imagine if this form had 10+ fields on it? What if you needed to go back and make an edit? Would you be certain that you were editing the correct field?
In these cases, the mere fact that even a small level of uncertainty for the user is introduced should raise an alarm. We want to make this interaction as easy as possible. Sacrificing aesthetics is a small cost.
So, should websites continue to use these placeholders? Absolutely. In fact all major browsers fully support its usage, so there are no browser limitations that we need to be concerned with here.
It’s the ‘How should placeholders be used?‘ that needs to be the focus here. According to HTML5 specifications:
“The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. The placeholder attribute should not be used as an alternative to a label.“
Here, if we did have a form with 10+ fields and the user needed to go back and edit a field or fields, he/she would be able to locate the field(s) in a timely manner since the accompanying label(s) exist, thus eliminating any barriers that the user may encounter.