Where am i? Using input:focus.

One of the simplest guidance tip I can give is using the CSS property, input:focus. This tag will highlight the current field the user is in. 

Only rub with this is that IE 7 and 8 need a little "help".

For getting stareted in anything BUT IE...all you have to do is add the following in your page header:

input:focus, select:focus  {

  background-color: #f7ee9d;

}

This will make all inputs and select lists hightlight to a yellowish color upon focus. To get IE to play along, use jQuery to help set the class of the imput fields to that when focus occures, it will highlight. Put the following code into a .js file and reference it in your page.

$(document).ready(function(){
    if (jQuery.browser.msie === true) {
        jQuery(':input')
                .bind('focus', function() {
                        $(this).addClass('ieFocus');
                }).bind('blur', function() {
                        $(this).removeClass('ieFocus');
                });
    }
});
 
$(document).ready(function(){
    if (jQuery.browser.msie === true) {
        jQuery('select')
                .bind('focus', function() {
                        $(this).addClass('ieFocus');
                }).bind('blur', function() {
                        $(this).removeClass('ieFocus');
                });
    }
});

Then add input.ieFocus to your CSS entry so it looks like the following:

input:focus, select:focus,input.ieFocus {
background-color: #f7ee9d;
}

And thats it!