InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

HTML tag attributes

  • HTML5 - input placeholder
  • html attribute contenteditable
  • script async attribute
 
  • Home
  • > Tutorials
  • > HTML
  • > HTML tag attribute

HTML5 – input placeholder

on Feb 29, 2016

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 done
try it online

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

Suggested posts:

  1. CSS placeholder style
  2. HTML5 label tag examples
  3. HTML input checkbox
  4. Javascript – textarea and text input select all
  5. HTML5 shadow dom example
  6. CSS attribute presence and value selectors
  7. CSS :checked – style for selected checkbox and radio
  8. jQuery ui slider and input text box – two way binding
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML, HTML tag attribute, HTML5, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2021 InfoHeap.

Powered by WordPress