One of the new features coming in HTML5 is placeholder text for form inputs. The concept of placeholder text has been around for quite a while, and is fantastic for usability. Basically, placeholder text is text that appears inside of a form input when the page loads, but disappears when the user places the cursor in that form input.
To begin with, let’s take a look at how the placeholder attribute works. It’s quite simple. All you need to do is create an input that looks something like:
<input type="text" name="myinput" id="myinput" placeholder="This is some placeholder text" />
If you have a browser that supports the placeholder attribute, you’ll see “This is some placeholder text” in the form input whenever it’s empty. Of course, the placeholder attribute (at the time of this writing) is only supported in Chrome and Safari (no support for this attribute is currently available in Firefox, Opera or Internet Explorer), so you’ll need to do something else to get it working properly.
The easiest method is to use a jQuery plugin like placeHeld. PlaceHeld is a very nice, very easy-to-use plugin. Placeheld automatically determines whether or not the user’s browser supports the placeholder attribute. If the browser does not support it, the plugin fakes it by adding a value to the input that gets removed whenever the input receives focus. It even adds a CSS class to the input when it adds the placeholder text, so you can style your placeholder text differently from the standard input text. By default, a CSS class of “placeheld” is applied, but you can change that through the placeHeld options.
To use placeHeld, you will need to make sure that jQuery is in use on your site/page (if you’re using WordPress, it already is). If you’re not already using jQuery for other uses on your site, I would not recommend including it just for the use of this plug-in. If you are already using, it, though, this plug-in can be invaluable.
Once you’ve made sure jQuery is in place, you include the placeHeld plugin and then use some code similar to the following:
That’s all there is to it. The placeHeld plugin will automatically detect the placeholder attribute within your input and use that text as the fake placeholder in browsers that do not support that attribute.