Delphinidin

In larger forms, you can help users keep track of where they are by highlighting which field they are currently on. Most browsers have built-in events that highlight the current field, such as the Firefox. You can set up a secondary highlight using CSS and the jQuery focus event. By adding a custom highlight, you can ensure that users know how far along they are in any given form. Using CSS, you can add a highlight as shown on the contact form example from Wufoo (www.wufoo.com).

1. Set up the HTML form input element, which you wish to highlight after the page has loaded:

<input type="text" id="email-input" />

2. Add CSS to control how the highlight will look. In this case, it has a yellow background with 5 pixels of padding:

.highlight {background:yellow;padding:5px;}

3. Select all input elements and attach a focus event. Inside the event handler function, add a statement that selects the element that was focused into and add a class called highlight. When the input has focus (the user has clicked or tabbed into that field), a highlight class is applied to the input field.

$('input').bind('focus', function(){
$(this).addClass('highlight');
});

4. Select all input elements and attach a blur event. Inside the event handler function, add a statement that selects this element and removes the class highlight. When the input has blue (the user has moved out of that field), a highlight class is removed from the input field.

$('input').bind('blur', function(){
$(this).removeClass('highlight');
});