Building better web forms: Context highlighting using jQuery

June 9, 2008

In my previous article “Labels in form layouts” I wrote about how I have implemented “underlined labels” on web application forms. However, due to complexity of web appications I developed I often needed to find a way to focus a user on a current context. When I discovered jQuery I decided to use it because of its powerful features.

Since the forms were often very complex and had (too much I would say) controls on them, I needed to focus a user’s attention on the current context. I first thought to highlight the current row.

In this example I’ll show you what I tried to do.

Row highlighting

The image above shows that whatever user do, current row will be highlighted. The html markup for the example above will look like this:

    <h3>Sample web form</h3>
<div class="content">
<div class="row">
<div class="left">First name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Last name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Email</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Password</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
</div>
<hr />
<!- Other rows here -->
</div>
<input name="Button1" type="button" value="Do some action" />

And CSS classes are pretty simple as well:

body{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
}
.content{
padding:10px;
width:370px
}
.left{
width:150px;
float:left;
padding:7px 0px 0px 7px;
min-height:24px;
}
.right{
width:200px;
float:left;
padding:5px;
min-height:24px;
}
.clear{
float:none;
clear:both;
height:0px;
}
.row{
background-color:none;
display:block;
min-height:32px;
}
.text{
width:190px;
}
.ruler{
width:400px; border-bottom:dashed 1px #dcdcdc;
}
tr:focus{
background-color:#fcfcf0;
}
td{
vertical-align:top;
}
.over{
background-color:#f0f0f0;
}
.out{
background-color:none;
}

Each “row” consists of two div’s, one for a label and other for an input field(s). So what we tried to achieve it to highlight a current row whenever user click on any element inside that row. It could be an input field or a label.

Now let’s see the simplicity of jQuery:

$(document).ready(function()
{
$('.left, .content input, .content textarea, .content select').focus(function(){
$(this).parents('.row').addClass("over");
}).blur(function(){
$(this).parents('.row').removeClass("over");
});
});

Whenever an input, textarea, select, or element that has “left” CSS class get focus, append “over” CSS class to all parents that have “row” CSS class. Also, whenever an input, textarea, select, or element that has “left” CSS class lose focus, remove “over” CSS class from all parents that have “row” CSS class.

This was very interesting and extremely simple solution, but in a forms more complex that the one in the example above it just didn’t make much improvement. What I wanted actually was to highlight a group of related fields. Thanks to jQuery it was very easy to change the rules:

$(document).ready(function()
{
$('.left, .content input, .content textarea, .content select').focus(function(){
$(this).parents('.content').addClass("over");
}).blur(function(){
$(this).parents('.content').removeClass("over");
});
});

Note that the only change is parents() target. Instead of changing only parent row, we can highlight a whole group of rows. Each div that has “content” CSS class will be highlighted whenever any of his children get focus and vice versa.

And this is what it looks like in the end:

highlight group

In very complex web forms this enables users to focus only on a current action. By using attractive color schema and jQuery animations, this can be even more interesting.

You can see the demo here: http://www.jankoatwarpspeed.com/wp-content/uploads/examples/ContextHighlighting/

Conclusion

You saw how you can easily improve the user experience by highlighting the current context. You also saw that it is extremely easy to do it by using jQuery. If you didn’t use jQuery I can only suggest you to visit jQuery official website and download the library. There, you can find the documentation, examples and other stuff as well.

kick it on DotNetKicks.com

Let's discuss this on twitter.

53 Comments

  • erika (June 10, 2008)

    this was a really great post- i like css styling better than div, as it reduces bullshit code on the page, and makes it easier $ the search crawler.

  • Lee (June 10, 2008)

    Nice post Janko, have to say I have your blog bookmarked now and check here every couple of days.. Keep up the great work fella.

  • Janko (June 10, 2008)

    Lee, thanks a lot! :)

  • Ivan (June 10, 2008)

    Awesome. It’s amazing how much nicer it makes interacting with the form.

  • Mike (June 11, 2008)

    Hi Janko. Great articles.

    One question: why are you using all those divs to create form rows and columns? I mean, I know they say it is the way to go, but frankly, would it not be much easier and flexible to just use simple 2-column table in this case? And you can then style them table rows, etc.

    Just look at it: you "simulate" rows (class="row") and columns (class="left" and "right") with divs.. Well, is it not easier to use table then since it does provide real rows and columns, it was made for that.

  • Janko (June 11, 2008)

    Thanks, Mike. You are absolutely right, I could have used tables, but I just like to play with divs and CSS when creating examples. :)

    However, I use tables in many cases during development (e.g. displaying data)

    Each comment that is submitted has to wait for moderation. I’ll add a message that will pop up after sumbission. Sorry for that, I’ll fix it as soon as possible :)

  • Mike (June 11, 2008)

    Thanks Janko, I really appreciate the answer. I’m really a beginner with this stuff, so I just wanted to ask if it would be "improper" to use table in this case.

  • Janko (June 11, 2008)

    Sure, no problem ;) Generally, tables should be carefully used because of search engine optimization (SEO). Here are a few articles that might be interesting to you:
    http://dev.opera.com/articles/view/semantic-html-and-search-engine-optimiza/ and
    http://www.htmlbasictutor.ca/search-engine-html-table.htm

  • David McFarland (June 11, 2008)

    Safari 3.1 doesn’t seem to have a focus event for radio buttons, so you need to use the change event for them:

    $(‘:radio’).change(function(){
    $(this).parents(‘.content’).addClass("over");
    }).blur(function(){
    $(this).parents(‘.content’).removeClass("over");
    });

  • Richard@Home (June 12, 2008)

    Nice tutorial. I have a couple of minor issues I spotted with the markup which I was going to mention here, but it turned into a bit of a mini-tutorial.

    I’ve posted it over on our blog: http://blog.futurate.com/2008/06/simple-forms-are-happy-forms.html

    Have a read and let me know what you think :-)

  • Janko (June 12, 2008)

    Richard, thanks for noticing. I agree that things should be kept simple, and I like the way you did it in your post. :)

    As you mentioned, I am not optimizing CSS code much because this works fine for me. In this particular example I was more focused on effects that can be achieved using jQuery.

  • Markus (June 15, 2008)

    sorry for <b>offtopic</b>. Just wanted to say that your page is one of the fastest loading pages I’ve ever seen. Great work! Of course nice content in here, too :)

  • Janko (June 15, 2008)

    Thank you Markus!

  • Ben Duivesteyn (June 29, 2008)

    great post

    http://www.duivesteyn.com.au

  • sangesh (June 29, 2008)

    This is a really cool one. thanks mate.

  • tim (June 29, 2008)

    shouldn’t the form help texts be labels? Clicking on the text should focus the appropriate input box.

  • ctraos (June 29, 2008)

    Gracias!! exelente aplicacion…

  • Janko (June 29, 2008)

    @tim: yeah, that could be labels as well.

  • Shreemani (June 30, 2008)

    Nice post Janko. I’ll be visiting ur website more often now for more information. Keep it up.

  • Manoj (July 4, 2008)

    Its Simply Great
    What I say more…
    Thanks to introduce us with this

  • adexos (July 28, 2008)

    Très pratique et ergonomique ! ;-)

  • Mark Aplet (August 1, 2008)

    Instead of the wrapper divs (content) you may swap them out for a fieldset instead. This will make your forms more accessible and readable even with css turned off, and it will serve the same function as the content div.

  • Janko (August 1, 2008)

    Mark, call me weird but I just don’t like fieldsets :)

  • MyTivu.com – Free Video Site (August 6, 2008)

    Great info. for beginners. Thanks for this great insight.:)

  • Joel Gascoigne (August 8, 2008)

    Hi Janko,

    I seem to have been finding myself on your blog quite a bit recently, you’re turning out some nice articles. Good proof of concept here but I do think the markup could be improved. I know you’re concentrating on the javascript in this case but I’m one for always doing things right. Nevertheless, a very nice effect you’ve shown which truly enhances usability. I look forward to more of your articles!

  • Eazzy | Web Design (August 8, 2008)

    good, but i create forms another way
    i can see example here http://www.alistapart.com/articles/prettyaccessibleforms

  • Janko (August 8, 2008)

    Joel, thanks for your comment. At the time I wrote the article (not so long ago) I thought that I should be focused on the point. But thanks to comments I realize there are other aspects of writing as well.

  • asp.net (August 11, 2008)

    it’s a real using of JQuery. thx

  • Richard (August 21, 2008)

    Nice :)

    how can I apply this trick to checkboxes?

  • Amir (September 9, 2008)

    nice job .:D

  • Steve (September 19, 2008)

    I noticed that in IE6, it adds a bunch of space at the bottom of each row. Any idea how to fix?

  • David Wilkinson (September 20, 2008)

    AWESOME dude. Seriously impressed. ::D

  • Chua Wen Ching (October 14, 2008)

    Good stuff :) Keep it up. JQuery rocks :P

  • Derleth (October 23, 2008)

    muchas gracias tio te quedo genial ;-) era lo q necesitaba (K)

  • Lee (October 31, 2008)

    Just thought I’d also leave a quick thanks – Just used this in a project and it worked ACE! Thanks…

  • Janko (October 31, 2008)

    Lee, you’re welcome, I’m glad it works!

  • Miah (December 4, 2008)

    REALLY like this, its very very helpful for someone like me ! thanks

  • Bunny got Blog (December 4, 2008)

    You really have a very informative site. I like her!

  • wecform (January 2, 2009)

    Thanks! This is exactly what I was looking for

  • Marcus Andersson (January 18, 2009)

    Great post!
    Just what I needed when trying to build a form using DIVs instead of a classic TABLE.

  • Shekhar Sharma (January 29, 2009)

    Nothing better could have come at this time. I was looking for some clarification on div and jquery and this is it!

    Thanks mate!

  • Mostafa Issa (February 3, 2009)

    Great Article Janko Keep it up

  • dan (March 23, 2009)

    Nice demo, thank you. The thing that bugs me is that when you click anywhere on the page it triggers the onBlur function. I prefer to do something like the below so the highlight won’t come off until you click into another input field.

    [quote $(document).ready(function()
    {
    $(‘.highlight input, .highlight textarea, .highlight select, .highlight file’).focus(function(){
    $(‘form li’).removeClass("over");
    $(this).parents(‘li’).addClass("over");
    })
    });
    ][/quote]

  • boyzan (March 30, 2009)

    awesome tutorial…i like it..

  • website design norwich (May 11, 2009)

    Great tutorial, what jQuery adds to a website really does make a website stand out

  • siya (May 12, 2009)

    Awesome..! I was looking for the same :)

  • Max (June 4, 2009)

    Can you use label instead of div left? With this you can you use css selector anyway without using 2 divs (right and left). what do you think?

  • Andrew Turn (June 6, 2009)

    I really appreciate this tutorial! I’m in the middle of creating a rather long form / application and this will has certainly made the form easier and more appealing.

    I also wanted to say, that while I understand both sides of the argument between divs vs. tables for certain things, I like the divs because it is the new way, except for data of course, to display information. Sure labels would work too but, I like the divs. Thanks again.

  • Marco (July 19, 2009)

    I love you!. I was all night trying to do something like that without success. Luckily I found your blog through Google and man, am I glad I did? You know how sometimes you take the most difficult and hard route when there is a simple solution staring at you?
    Anyway, thanks for this post. jQuery has always been a pain in the rear for me.

  • deepak (August 20, 2009)

    like this stuff
    gr8

  • Daniel (October 3, 2009)

    Excellent, thanks!

  • Shafeeq (October 20, 2009)

    It’s a Awesome Site , with a neat and Tidy Way to Explain the Working of the Application,
    it’s code and all the stuff, I really Appreciate the People Here for their time and patience.
    From now on words i don’t ping anywhere, except Here

  • Emil Uzelac (October 30, 2009)

    Great Janko, really easy and clean way to do this. I was working on this with multi forms for auto insurance (i.e. form wizard) however as you know it does take time to add a class on each form, to get the highlights in place, well this will really help and reduce hours of work.

    Say hello to homeland,
    Emil