Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

More Accessible Input Pre-filled Text with jQuery

Adding pre-filled text to input fields is a great example of useful JavaScript. However, different techniques are plagued by poor degradation when JS is disabled. But using a well-built jQuery plugin and a simple CSS rule, we can overcome this usability and accessibility obstacle and make the JavaScript truly unobtrusive.

One of the tiny enhancements that has become mightily popular with the resurgence of useful JavaScript is the ability to pre-fill a form’s input and textarea fields with hinting text. The magic occurs when the person focuses on the field and the hinting text disappears.

With jQuery, there are essentially two places from which to grab this Houdini content. First is by using the value of the title attribute of a form element, the second by using a field’s corresponding <label>. Both employ perfectly valid HTML. Respectively, jQuery Form Example Plugin and In-Field Labels jQuery Plugin accomplish these techniques very well.

No Graceful Degradation

The problem is that neither plugin degrades nicely when JavaScript is disabled.

Because the title attribute is not normally treated as display text, when JS is disabled, the form fields become “naked”; they have no identifying context at all. While not tragic for single input forms like a search box (such as the one on this site), a full contact form would be detrimentally crippled.

Using the <label> technique is better, because it is more semantic HTML. However, if JS is disabled, the label remains visible on top of the input field as the author is inputting text, creating a usability clusterfuck. You can easily see this by disabling JS on Doug’s example page.

A Simple Solution

I personally feel the first technique is largely a lost cause. There is, however, an easy way to make the latter technique work elegantly whether JS is enabled or not, because we’re starting with a semantically supportive <label> element. We will use the aforementioned In-Field Labels jQuery Plugin as our base.

We’ll use a simple newsletter sign-up form as an example. Here is our HTML:


Outside of our standard CSS for the form, we need to set two rules for the label. One for JS disabled, one for JS enabled.

 form p { position: relative }

 /* normal display, when JS is disabled */
 form p label {
    display: block;
    font: 0.8em Arial, Helvetica, sans-serif;
    margin: 5px 0 0 0;

 /* inline display, when JS is enabled */
 form p label.activelabel {
    position: absolute;
    top: 4px;
    left: 6px;
    color: #777;
    margin: 0;

The first label rule is for when JavaScript is not active. The label will sit above the input element and operate normally. The second rule is for the inline version; it moves the label on top of the input field, and the jQuery plugin makes it disappear once the user starts typing.

At the bottom of the page, after the call to jQuery and the plugin, we’ll add our basic function for calling the plugin, and then another call for enabling the “activelabel” class.


That’s it. If JavaScript is enabled, it not only activates the plugin to make the text disappear on focus, but activates the CSS to actually position the label text on top of the input. If it’s disabled, neither is called. By adding this simple rule, the entire operation degrades nicely, and it literally becomes unobtrusive JavaScript. Here is a screenshot with and without JavaScript turned on:

Input Fields with and without JavaScript enabled.

, , , , ,

commentary + criticism

Surrey Web Design

wrote the following on Monday June 21, 2010

That’s a really neat implementation, I like it a lot, gets nicely round an accessibility issue I have, thanks.


wrote the following on Tuesday June 22, 2010

Hi Kevin — Maybe worth mentioning that html5 has a placeholder attribute.

Cheers, Jan


wrote the following on Tuesday June 22, 2010

Jan — Yes, I was going to mention that, but was not sure if it was beyond the scope of the article since my goal was to simply “fix” a currently established plugin. But the link you sent is excellent — very elegant use of progressive enhancement.