Illuminati Karate, Inc.

10 Javascript Tricks for Better Forms

By: George Huger

March 05, 2009

Nothing exposes the gap between web apps and desktop applications more than plain HTML forms. Fortunately, by leveraging Javascript we can start to close this gap while maintaining a consistent experience for users using screen readers and old browsers.

We’ve identified 10 ways in which normal HTML forms fall short, and dug up the Javascript and CSS code you’ll need to fix them. Although the best enhancements are so intuitive as to be unnoticed, rest assured your visitors would thank you if they knew.

Note: Many of the solutions in this list depend on jQuery, our javascript framework of choice.

Combo Boxes

For those unfamiliar, a Combo Box is a combination of a text box and a list box. It allows the user the option of selecting from a list of predefined items, or entering a new item of their choice. Your browser’s address bar is a perfect example.

Its an elegant solution to a common problem, yet the combo box was somehow left out of HTML’s form elements.

Enter Sexy Combo, a jQuery plugin which provides a seamless solution. Users without javascript will simply encounter a normal select element.

Progress Bars For Uploads

The standard file input frustrates users with its awkwardness and lack of information. Furthermore, not being able to upload asynchronously results in a lot of wasted time.

To be fair, providing information on an ongoing upload is trickier than it might sound. Thankfully, SWFUpload provides a very clean solution that will convert your standard file inputs into a very flexible and asynchronous file uploader complete with a progress bar.

Note: As the name implies, SWFUpload uses an invisible Flash movie to actually perform the upload. As such, your users will need Flash as well as javascript enabled to take advantage.

Date Selection

Using a standard text input for a date leads to all manner of formatting issues, and using 3 select boxes is cumbersome. Desktop apps have a great solution – the date picker, which is to say a pop-up calendar.

jQuery UI’s Datepicker plugin is a perfect solution.

Note: The download page is for the entire jQuery UI library, but will allow you to download only what you want. I’d recommend only downloading the Datepicker with Packed compression, as the library is quite large.

Time Selection

Time selection in a normal HTML form has the same problems as date selection, but it lacks a uniform solution. We’ve provided 2 implementations, so that you can decide which is more appropriate for your audience.

Time Entry is a jQuery plugin that is simple and very customizable. Its normal behavior is to provide a text box where the user can use the arrow keys to quickly set the hour, minute, and am/pm settings. Its similar to how you set the time in Windows, so it should be intuitive for most visitors.

ClockPick is a more creative, but less traditional solution. If you’re generally comfortable with creative inputs, its a fantastic interface.

Color Selection

Color selection might not apply to every app, but when you need it the native options leave you out in the cold. There’s only a handful of visitors who would know what a hex code is, and even fewer who have their favorites memorized.

ColorPicker is a very nice solution, which provides a color picker similar to that in Adobe Photoshop.

Input Masking / Validation

Input masking is when a text box has static characters already included, and the cursor moves intelligently. For example, a text box for a social security number should already have the dashes, and after you enter the first three numbers the cursor should move past the first dash. Furthermore, it shouldn’t allow anything but numbers to be entered.

Input validation is checking to see if the value the user entered falls within the boundaries. In our social security number example, if the number entered isn’t exactly 9 digits, its not valid.

Note: Client-side validation can be easily overridden by a malicious visitor, so you’ll need to sanitize and validate your data server-side as well.

The Masked Input jQuery plugin can implement both of these features for us. It will let you define any custom mask, and you can use its “completed” callback function to flag the inputs as valid.

Better Support for Defaults

HTML inputs do allow for default values, but its nice to have them disappear when the input gains focus, and reappear on blur if the user hasn’t entered anything.

The aptly named Default Values plugin does exactly that.

AJAX Form Submission

Submitting forms can be a great use of AJAX, particularly if you have a series of forms which are affected by the user entered values (i.e. a wizard). Its also a nice way to break a long form into stages to decrease abandonment.

The jQuery Form Plugin is an easy way to convert your current forms to AJAX forms while preserving their functionality for users without Javascript. If you are feeling creative or want to write something more customized, jQuery’s serialize function will get you almost all the way there.

Automatically Growing Textareas

If you’ve used Facebook or Basecamp, you’ve probably noticed that the textareas get longer when you’re running out of space. Its aesthetically pleasing and very convenient.

Here’s a jQuery plugin to add the same behavior to your textareas.

Spin Buttons

A spin button is a text box with up/down arrows, allowing the user to easily “nudge” a numeric value up or down. Like a combo box, the user can still type in their own value.

They are most useful when the range of possible values is fairly small – for example selecting the number of diners in a reservation.

The jQuery Spin Button plugin is a nice implementation of this control.

One More Thing

Each of these ten solutions requires at least one external javascript library, and some require stylesheets. Implementing all ten would be great, but including a bunch of external javascript / css files can drastically increase the load time of your page.

Therefore, we recommend you do 2 things:

1. Concatenate your Javascript and CSS files as much as makes sense.
2. Compress them using Dean Edward’s packer and CSSDrive’s CSS Compressor, respectively.

Also, if you know of any scripts that we missed here let us know in the comments. Thanks for reading!