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.
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.
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
It is better usability to automatically suggest something that the user wants.
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.
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.
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,
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods,
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!