How to make your forms better with jQuery?

Say “Good Bye!” to the old, plain looking forms. Using jQuery we can create more interactive and stylish forms. What we need to do is, replace form fields that are difficult to style. jQuery provides lot of plugins which can imitate the behavior of these fields.

Then we need to add some interactivity to forms using auto complete, dynamic validation etc.

Replacing checkbox and radio button

Checkbox and radio buttons were a big problem for designers as the implementations were different in different browsers and it could not be styled. Now we can use simple jQuery plugins to imitate the behavior of checkbox and radio buttons. And these are fully stylable using css. Most of these plugins uses images for different states of checkbox button and hence it can be customized anyway.

Recommended plugins

• http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
• http://widowmaker.kiev.ua/checkbox/

Replacing Select box

Another browser dependent thing. Some browser supports basic styling but we need more customization.  This plugin replaces select box with a normal input field styled with background image. As it is an image, it is customizable by changing the image.

http://www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement/

Replacing File input fields

Again, browser dependent thing which is almost impossible to style. Using Flash or Iframe, an Ajax effect can be achieved here.

jQuery Plugins for Ajax upload

Or if you want to use normal file input field, http://www.quirksmode.org/dom/inputfile.html has provided a solution using javascript and CSS. But it is not perfect.

Auto complete

It is better usability to automatically suggest something that the user wants.

• http://jquery.bassistance.de/autocomplete/demo/
• http://www.pengoworks.com/workshop/jquery/autocomplete.htm

Restricting input fields

If we need some inputs in certain format, don’t rely on the user to input in that specific way. Instead restrict them to input only in that form. Less error in input.

http://digitalbush.com/projects/masked-input-plugin/

Calendar Plugin

It is always better to show a calendar to pick the date rather than select box or text boxes. Also, user can not select an invalid date.

jQuery UI Date picker is the best calendar plugin. Also try the theme roller for customizing styles.

Form Validation

Instead of throwing errors after form submission, validating the form dynamically as the user types in and showing messages adds more interactiveness to form. User will know what is wrong as soon as he types in some thing. The best plugin to use is,

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Form plugin

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!

http://malsup.com/jquery/form/

Related posts:

1. jQuery Ajax File Upload
2. jQuery Impromptu – alert and confirm replacement with form support
3. Three jQuery modal plugins to repace alert and confirm
4. 3 jQuery plugins to show context menu
5. jQuery Coda Slider

If you like this post, please share it so that others can also find this