HTML5 – input placeholder

HTML5 input tag’s placeholder attribute can be used to add a placeholder text (hint which disappears automatically) in input element. Before HTML5 people used to implement it using Jvascript event handers. With HTML5 placeholder attribute, it is very simple and elegant to add placehoder text in input element.

Few things to note about input placeholder

1. It is used as hint and is not a replacement of label.
2. Placeholder text disappears the moment user types first character in input field value.
3. It can be used in input fields where text has to be entered. e.g. where type is text, password, email, etc. It is not relevant for type checkbox, radio, etc.
4. placeholder also applies to HTML tag textarea.

Basic input placeholder example

<input type="text" name="name" placeholder="FirstName LastName">
<input type="password" name="password" placeholder="Password">
<input type="email" name="email" placeholder="foo@gmail.com">

Styling input placeholder

Input or textarea placeholder text can be styled using css ::placeholder pseudo element style.

Specification and Browser compatibility