Making forms as usable and compact as possible is a fairly common goal in web design. Screen real estate is often at a premium, and finding ways to orient and provide information to users which doesn’t require additional space can be a great asset.

One common solution is to use the approach written up at A List Apart, which involves using relative and absolute positioning to make labels appear on top of the associated text input. That approach can be brittle when it comes to more complex layouts, however.

Another common solution is to use inline javascript for onfocus and onblur attributes. This has the advantage of being robust in terms of layout, and is the technique currently in use on several of TOPP’s sites (including four instances on the LivableStreets.com groups page):

This approach is not without drawbacks, though. Inline markup is never as elegant as listeners added via javascript, and can pose maintainability problems. It’s easy for multiple instances of functionally-identical inline javascript within a site to diverge, as users make one-off tweaks to handle specific enhancement requests. Additionally, password fields are problematic, as Internet Explorer refuses to allow modification of the “type” attribute for input elements which have been added to the DOM.

I decided a while back to write a plugin to address these issues. My goals were to provide a tool which:

• Allowed informational text to be added to input elements
• Was flexible enough to allow multiple ways to declare the text to be used, not just through referencing the relevant <label> element
• Would be as robust as possible, in terms of avoiding layout problems
• Would be easy for users to implement

Things are finally far enough along that I feel comfortable sharing my latest jQuery plugin, Inline Info.

Using the plugin

Note: this assumes that you’ve downloaded jQuery (http://docs.jquery.com/Downloading_jQuery) and the jQuery Inline Info plugin (http://github.com/chrispatterson/jquery-inline-info/tree/master). All examples can be used at the bottom of the page (immediately before the </body> tag), or set to fire with $(document).ready

When an element with inline info text loses focus, jquery-inline-info checks to see if the current value matches the info text, before resetting the value & changing the class. This is not normally case-sensitive, but this behavior can be changes by passing in the caseSensitiveMatch parameter:

$('#ex-field').inlineInfoTextify({caseSensitiveMatch: "true"}); //default is "false"

By default, jquery-inline-info will use the title attribute of each input element as the info text. If no title is defined, it will instead use the value of the relevant label element. It’s also possible to specify the info text to use, by passing in the inlineInfoText parameter:

$('#ex-field').inlineInfoTextify({inlineInfoText: "Some very helpful text"});

jquery-inline-info also adds a class to input elements, when they are displaying info text. This class is also customizable, by passing in the inlineInfoClass parameter:

$('#ex-field').inlineInfoTextify({inlineInfoClass: "my-custom-class"});

You can also pass in multiple selectors in a single invocation:

$('#ex-field, #ex-field-2').inlineInfoTextify({inlineInfoClass: "my-custom-class"});

or selectors which match multiple elements:

$('#ex-form input[type="text"]').inlineInfoTextify({inlineInfoClass: "my-custom-class"});

The look and feel of the notice is totally customizable through CSS, and I’ve included a demo in the github repository to show various invocations in action.

Questions? Comments? Enhancement requests to make things more flexible? Put ‘em in the comments. I’m definitely interested in improving things, and about supporting stuff folks need.