The Current State of HTML5 Forms

The placeholder Attribute

<input type="text" placeholder="(555) 555-5555">
<textarea placeholder="Smurfberries<"/strong>></textarea>

Live Demo

Text input
Textarea
Firefox
4+
Safari
4+
Safari Mobile
iOS 4+
Chrome
10+
Opera
11.10+
IE
10+
Android
2.3
input Supported Supported Supported Supported Supported Supported Supported

Supported Browser Screenshots

From top to bottom: placeholder visible, placeholder remains while no value is set when form element is in focus, input with text value, text value persists after blur

Unsupported Browser Screenshots

No placeholder text visible

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 text, search, url, tel, email, password and 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.