Are placeholders in HTML form fields acceptable?

The short answer, no. The long answer, sometimes.

Why using placeholders instead of labels is mostly a bad idea.

When used in place of form labels, placeholders can save a lot of space and make your design look pretty.  However, on longer forms, the lack of labels really hurts the usability of your form. Without labels, the user can’t double-check their work before submitting. Their short-term memory is greatly hindered without a reference point. So on longer forms, it’s generally better to use label. (Sorry, designers).

Placeholders are also generally bad for accessibility. The light gray default color is not always easily seen by people with disabilities. Also, not every screen reader can read them.

When is it OK to use placeholders?

When used in short forms with one or two fields, I say go for it. These forms typically include search or email signup forms, where only a small amount of data is being gathered. Users probably won’t get confused.

Placeholders are also great when used with labels as supporting elements:

screenshot-2016-11-23-15-16-36

Check out the search form at the top of this site I just finished building. The word “Search…” is a placeholder. It saved a ton of space in this compact top-bar design.

Conclusion

When used wisely, placeholders are valuable. Just be careful about when you’re using them and for what purpose.

 

Categories:

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>