Hello, my name is Pieter!

I build web applications and craft user interfaces.

10 jQuery form usability tips

We all know thatjQuery is a very useful Javascript library. But it also comes in very handy when you want to improve the form usability on your site. Here's a mashup with 10 little scripts or jQuery plugins.

1) Clear the default value when the input box is clicked

$(document).ready(function () {
$("#username").focus(function() {
if(this.value=='Username') {this.value=''}
});
$("#username").blur(function() {
if(this.value=='') {this.value='Username'}
});
});
 This code snippet is very simple. When you focus on the input with the id username, it checks if the value is 'Username', if so, it deletes the value. Then on blur, it inverts the taken action. Note: if you want to clear the Wordpress search box, its id is #s.
This can be done with this plugin too if you need to do this for a lot of elements.

2) Using labels as values

As an addition to above, here's a plugin that takes the label for an text field and places it as the text field's value. This is definitely a best practice from a semantic view. It's also a better solution for screenreaders.
By: CSS Globe

3) Auto-resizing textareas

You might have seen this on Facebook. If you type more than one line when updating your status, the input area grows magically. This plugin does the same. Extra options are min-height, max-height and line-height.
By: A clever cookie

4) Playing with checkboxes

Check all, check all except one, uncheck all, ... You can even have a group of checkboxes act like a group of radiobuttons. A plugin that sometimes may come in useful!
By: Texotela

5) Validating

Validating sure is a must. You can do this server side, but then you need some refreshes and stuff. Now, thanks to jQuery and this plugin it's easy to handle live validation on the client side. It also supports AJAX submission.
By: Bassistance.

6) Masking

When masking input areas, you automatically change the way it's shown. Like when the user types in 1212 as a time, it shows up as 12:12. This makes it easier for the user to read his form again before submitting and it's supposed to reduce errors made. A very extended plugin is meioMask.
By: Meio Código

7) Auto-completing

Sometimes you do your users a very big favor when you show up with some possible inputs. Having a Google Suggest-like input box on your webpage is now very easy thanks to this plugin.
By: Bassistance.

8) Highlighting the active input field

Highlighting is a great way to make sure the user won't get distracted while filling in a form. This can be done with some simple code snippet using focus and blur - actually it's included in the most browsers. But if you want something more, you can use this plugin.
By: Keyframes and Code.

9) Modal preview

A preview is a good way to reduce mistakes and errors when the user is about the submit a form. A modal window is a good way to have the user's attention. Combine these two and you've got Modal Preview.
By: Devkick.

10) Limiting characters in textareas

Unlike text inputs, textareas can't be told to only have a number of characters. Sometimes, this might be needed (look at Twitter's 140 characters limit) and this is where Textlimit comes in.

Extra: AJAXify your forms

AJAX is the way to go it seems these days, and to make your developing life a little bit easier there's the jQuery Form Plugin.