The Current State of HTML5 Forms

The placeholder Attribute

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

Live Demo

Text input
Textarea
Firefox
4+
Safari
4
Safari
5+
Safari Mobile
iOS 4+
Chrome
10+
Opera
11.10
Opera
11.50+
IE
10+
Android
2.3
input Supported Supported Supported Supported Supported Supported Supported Supported Supported
textarea Supported Not Supported Supported Supported Supported Not supported Supported Supported ?

Supported Browser Screenshots

From top to bottom: placeholder visible, placeholder disappears while 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 the input in a light gray color. The text remains whenever the input has no value. As soon as the input takes on value (from typing or any other means), the placeholder text is removed.

  • The spec says placeholder should only work on text, url, tel, email, and password input types. Safari 4/5/iOS4 incorrectly supported it on numbers and dates. Firefox 4 incorrectly supported it on numbers.
  • Safari 4 and Opera 11.10 supported it on inputs but not textareas.
  • Placeholders should be treated like a "hint." They are not a replacement for labels (accessibility) or titles (longer advisory text).
  • Browsers with no support show nothing.
  • jQuery plugin for fallback
  • See this code snippet for styling placeholder text with CSS (-moz and -webkit only).
  • As of Safari 5.2 and Chrome 17, the placeholder text stays visible until a value has been entered, instead of disappearing on focus. Older versions would remove the placeholder text when the field came into focus (rather bad UX, since when the field first comes into focus is when the user needs the "hint" the most).