November 13, 2011 in HTML & CSS, Programming, Tutorials by admin

Have you ever seen text in an html input field and have it disappear when you click inside? This is a fairly common practice for front-end developers and designers to add additional information to aid in usability or when html fields are not labeled.

I personally love the effect placeholder text gives having it disappear and reappear which instantly gives any website a dynamic appearance.

Note: This does not work in Internet Explorer
For full compatibility please check our JavaScript tutorial on Placeholder Text in HTML Input Fields

If you are unfamiliar with this - here is an example:

In the past we had to use JavaScript with onBlur() and onFocus() to get this placeholder text to work properly. Today with most modern browsers we can easily do this with just a single additional attribute to our HTML Inputs.

1
2
//Set the placeholder attribute to desired placeholder text
<input type="text" name="first_name" placeholder="First Name" />

This works in almost ever browser except for Internet Explorer. If you still want to accommodate Internet Explorer users and older browsers, you can JavaScript and run functions for focus and blur.