Input Field Placeholder HTML5 Attribute

By | 2017-06-16T12:44:34+00:00 December 9th, 2015|Categories: Web Development|Tags: , , |

Est. Reading Time: 1 minute

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:

<pre> <input type=”text” name=”desc” placeholder=”Enter First Name”> </pre>

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.

About the Author:

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.