Skip Navigation

Tutorial: Form Context Help with jQuery

27/01/08

Filed under:

1 comment

What is the best way to present contextual help to a user on a complex form? In some forms I've seen information links that open pop-up windows. In others I've seen the information listed next to fields.

Neither of these solutions is ideal, requiring either an extra click, or presenting information that may not be relevant. A much more elegant solution would be to present context help when a field has focus, and hide it again when it loses focus, as seen on Yahoo's registration form.

Using a dash of jQuery to handle the context help, such a form can easily be constructed. Read on to find out how.

Journal Feed

Context help on Yahoo's registration form

To take a look at the kind of thing we'll be aiming for, head on over to Yahoo's registration page and click in the Alternative e-mail field.

Sample form with context help

The completed form we'll be building can be viewed at kitsimons.com/demos/context-help-form/. You may also wish to download the source files (zipped) used in this tutorial.

Form Markup

I'm using a simple two-column table with the label and input field in the first column, and context help in the second column.


<tr>
	<td>
		<label for="f_forename">Forename</label><br />
		<input id="f_forename" name="f_forename" type="text" value="Enter your forename" />
	</td>
	<td class="info">
		<div class="contexthelp">
			<span>Lorem ipsum dolor</span>
		</div>
	</td>
</tr>

The context help is wrapped in a containing <div> with class contexthelp that we'll be targeting later. In my form I've also nested a <span> within the <div> for styling purposes. This can be omitted if not required.

jQuery Magic

Make sure you have the latest version of the jQuery JavaScript library and that it's linked in the <head> of your HTML document.

Whilst our jQuery code can be written directly into the HTML document we're working on, I prefer to keep it in a separate JavaScript file for ease of re-use. Create a new file called form_scripts.js and link this in the <head> of your HTML document, after the link to the jQuery JavaScript file.

The first thing we need to do is hide our context help when the page loads - we don't want it to be visible until a field has focus. This is accomplished with a single line of jQuery:


$('table .contexthelp').hide();

This will find every object with the class contexthelp within a <table> and hide it.

Now we've hidden our context help, we want to reveal the relevant help when a field is selected, either by mouse, or tabbed to by keyboard. We can accomplish this by using jQuery's focus event helper:


$('table input[@type=text]').focus(function(){
	
});

In this instance I'm also using an attribute filter to ensure the event is only triggered by input objects with the type text.

With our text field focus detection in place, we now need to show our context help for the selected field. jQuery knows which field is selected, which means we can traverse from that field to the appropriate context help and reveal it:


$('table input[@type=text]').focus(function(){
	$(this).parent().next().children('.contexthelp').fadeIn('slow');
});

Here we're moving from the field with focus (this), to its parent (the field's containing table cell). From there we're moving to the next object along (the context help's table cell) and selecting any objects within this cell (children) with the class contexthelp. Finally, we reveal the context help by using jQuery's fadeIn effect.

With the context help appearing when required, we now need to hide it again when the field loses focus. This can be done in a similar manner by using jQuery's blur event helper.


$('table input[@type=text]').blur(function(){
	$(this).parent().next().children('.contexthelp').fadeOut('slow');
});

That's it. Our context help should fade in when a field has focus and fade out when a field loses focus. Take a look at the demo to see it in action.

Icing on the Cake

With our context help now working, it's time to turn our attention to the default values of our input fields. Priority 3 Web Content Accessibility Guidelines state that form elements should contain placeholder values by default.

Default values in a complex form can make things look very busy and overwhelming, so to alleviate the problem I tend set a low-contrast text colour in form elements e.g. light grey on a white background. That's all well and good, but we don't particularly want a low-contrast text colour once the user starts typing in a field. Equally, it would be nice if we cleared the default values from a field once it is selected by a user.

Thankfully, both are easily accomplished. We can add a simple line of jQuery to our function that will switch the text colour when a field has focus.


$(this).css('color', '#333;');

Default values can be cleared by adding some JavaScript to the onfocus attributes of our <input> tags.


onfocus="if(this.value==this.defaultValue) this.value='';"

The Finished Article

There we have it. A form with unintrusive context help. The particularly nice thing about using jQuery to show/hide our context help is that it degrades gracefully. If JavaScript is disabled, or fails to load, the context help simply never gets hidden.

As an added bonus, visitors using a screen reader are not denied our context help, since it always remains in the mark-up.

Comments are closed for this journal entry.

mood

21 February, 2008

thank you very much for giving us your time and showing us interesting stuff

best regards

Kitsimons...

Photo of Simon Kitson

...is the online home of Simon Kitson, a web designer with a healthy enthusiasm for standards-compliant, accessible design and a penchant for blogging about nothing in particular.

Notes

Notes Archive