Cloud Cloud Cloud Cloud

The placeholder Attribute

The Current State of HTML5 Forms

Let Wufoo do the hard work. Sign up for a free account and start making forms the easy way.

Live Demo

Text input

Textarea


Firefox
4+

Safari
4+

Safari
iOS 4+

Chrome
10+

Opera
11.10+

IE
10+

Android
2.3+

The Low Down

The placeholder attribute places text inside an input box, usually in a light gray color, as a placeholder, indicating what type of content is expected from the user.

  • The text remains while the input has no value, even when the form control receives focus. As soon as the input takes on value (from typing or any other means), the placeholder text is removed.
  • Placeholders should be treated like a “hint.” They are not a replacement for <label> (accessibility) or the title attribute (longer advisory text).
  • The spec says placeholder should only work on textsearchurltelemailpasswordand number input types. Browsers that support the placeholder attribute but not all form input types such as color, treat those unsupported input types as “text”, and therefore display the placeholder.
  • Android 4.0 and 4.1 and webview did not show the placeholder attribute on number. Even though the spec doesn’t require it, all other browsers do.
  • Safari 4 and Opera 11.5 supported it on inputs but not textareas.
  • Browsers with no support show nothing.
  • jQuery plugin for fallback
  • Use ::-webkit-input-placeholder, :-moz-placeholder for Firefox 18, ::-moz-placeholder and :-ms-input-placeholder to style the placeholder text, which by default is light grey in color.
  • The placeholder text disappeared on focus in Safari 5.1 and Chrome 16. This original behavior, which demonstrated rather bad UX, since when the field first comes into focus is when the user needs the “hint” the most, was changed: now the placeholder text disappears when the value of the input or textarea is no longer null.
Cloud Cloud Cloud Cloud

Let Wufoo do the hard work.

Sign up for a free account and start making forms the easy way.