Use internal placeholder instead of external labels

Use internal placeholder instead of external labels

Content index

1. Overview
2. Set up
3. Issues that you must be prepared to accept

Overview

Labels are captions that tell visitors what information a particular form field is asking for.
Placeholders are example content or hints that provide visitors with visual clues to help them complete forms.
Labels appear outside of a form field, while placeholders appear inside of a form field, but disappear when users click or tab into the field.



Since they serve two distinct purposes, one should not be used in place of the other. However, for sake of space or aesthetics, modern web designers tend to use placeholders as they were labels.


Set up

To use palceholders instead of labels, go to the form options, and set the property "Field Labels” > “Layout" to "Inside fields"



Issues that you must be prepared to accept

So, your layout now is compact, where applicable and limited to the fields that support placeholders.
However there are consequences that come along with this practice. Here there are just a few reasons why placeholders are not good substitutes of the labels.

It’s against the HTML Specification
The W3C, which is the primary standards organization for the web, is very clear on the distinction between placeholders and label in the html specification: "The placeholder attribute represents a short hint intended to aid the user with data entry" and "The placeholder attribute should not be used as an alternative to a label".

Placeholders disappear
This one is pretty obvious. Placeholders are supposed to disappear, but when placeholders are used as labels, as soon as the user starts typing some data, or after a failed validation, it is no longer clear what that field was asking for. We wish your users have good memory.



It’s hard to distinguish required fields
Labels are individual HTML elements. The red asterisk* shown beside the required fields is actually produced by CSS, and it’s not present in the HTML source.
This not only allows the designer to customize the marker at will, for example using a big green heart at the beginning of the label, instead of a small red asterisk at the end of it, but also it complies the SEO best practices, avoiding foreign text (the asterisk), that is not part of the the field name.
On the contrary, placeholders are part of the field itself (the "placeholder" attribute of the “input” element) and CSS pseudo selectors simply don’t work.
Therefore, by replacing labels with placeholders, you will not be able to change the asterisk with something else, to choose its color, size and position, and from the point of view of the search engines, the asterisk is actually part of the placeholder (Example: “Enter your name*”)


How required fields appear when the "Layout" is "Beside fields"



How required fields appear when the "Layout" is "Inside fields"




It’s confusing to some users
Researches suggest that some web users think that form fields with placeholders are already filled in and may skip over them.



Placeholders are mostly grey
To limit the confusion just mentioned, placeholders appear as grey text inside of a form field. Although some web browsers allow them to be styled differently, this is not yet the norm. Depending on the background color of the form field and page, there may not be enough contrast for some visitors to be able to read.

Can't use tooltips
Tooltips are a good opportunity to describe further what the user is supposed to type into the fields, but tooltips apply to the labels.
By giving up the labels, you give up the tooltips as well.



Accessibility Issues
Placeholder support is fairly inconsistent with screen readers which are used by the visually impaired to read the contents of a web site. Without labels, these visitors may not be able to complete the form properly.