Placeholder

Temporary text displayed inside an input field that shows users the expected format or provides an example. It disappears when the user begins typing.

A placeholder is the light gray text that appears inside a text input field when it is empty. In HTML, it is specified with <input placeholder="e.g., john@example.com">. The text automatically disappears when the user clicks the field and starts typing, and reappears if the input is cleared.

The primary role of a placeholder is to communicate the expected format or content of an input. A label that simply says "Phone number" leaves ambiguity about whether to include the country code, use dashes, or include spaces. A placeholder showing "555-123-4567" instantly conveys the expected format.

However, using placeholders as a substitute for labels creates accessibility problems. Once the user starts typing, the placeholder vanishes, leaving no visible reminder of what the field expects. This is especially problematic for users with cognitive disabilities or anyone who tabs between multiple fields. WCAG (Web Content Accessibility Guidelines) recommends treating placeholders as supplementary hints only, always providing a separate <label> element. UX design books on Amazon discuss these accessibility considerations in depth.

Placeholder length has practical constraints. On mobile devices, input fields are narrow, so long placeholders get truncated. A general guideline is to keep placeholders under 30 characters. Showing a concrete example ("John Smith") is often more effective and shorter than a descriptive instruction ("Please enter your full name").

In programming, the term "placeholder" also refers to substitution markers in template engines and SQL parameter binding. The "?" in SELECT * FROM users WHERE name = ? is a placeholder that gets replaced with an actual value at execution time. This mechanism is a critical security technique for preventing SQL injection attacks.

From a character counting perspective, placeholder text is not an input value, so it should not be included in a form's character counter. However, the character count of the placeholder itself is a UX design decision. Shorter, example-based placeholders ("John Smith" at 10 characters) communicate more effectively than verbose instructions ("Enter your full legal name here" at 31 characters).

Share this article