Input Field Placeholder HTML5 Attribute

By Zedric Myers | Published December 9, 2015 | Categories: Web Development

Input Field Placeholder HTML5 Attribute

There are a few ways to create a placeholder for an input field or setup a hint method. One method is to use javascript for a more controlled experience and fallback for older browsers.

input insert boxHowever, if the user doesn’t for any reason have javascript activated, they can use the HTML Attribute “placeholder”.

For HTML5 and compatible browsers, this would be the better solution, overall without the use of javascript on the input field. There are some cases where javascript is needed, but for this setup it’s strictly for giving an input hint.

The placeholder attribute is extremely easy to add to an input field and reduces the use and dependency on javascript. This also works great for field labels.

Example for input hints:

<input type="text" name="desc" placeholder="Enter First Name">

Browser support for the placeholder attribute, referenced from

  • Chrome 10+
  • IE 10+
  • Firefox 4+
  • Safari 5+
  • Opera 11+

For more information see W3C HTML5 documentation on the placeholder attribute, here.

Contact Us To Find Out More

Have questions? Need help? Contact us and we'll be in touch soon!

* Required

164 Thatcher Road
Greensboro, NC 27409
Map and Directions

Sales & Marketing