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.

html-input-text-attribute-placeholder

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">

refresh

Styling input placeholder

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

Specification and Browser compatibility

SpecificationStatusCategories
input placeholder attributeWHATWG Living StandardHTML5
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 4+ Yes 4+ Yes 10+ Yes 12+ Yes 5+ Yes 11.5+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 3.2+ Yes 10+ Yes 11+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments