Easy user interaction and data collection is really a key functionality on most websites and web applications. Providing users high quality and intuitive input forms may be just what is needed to make your users take the time to fill in and submit the information you’re trying to collect. In this article I have collected a number of really essential jQuery Form Enhancements. Another very popular use of jQuery is jQuery image sliders that can be used to spice up a front page or sales page significantly.
This plugin provides a simple and easily configurable solution for turning long forms into broken out steps without going from page to page.It works well like a wizard where users can go back and correct inputs if needed. This is really a handy tool if you need to collect a lot of information from users as one huge form introduces a risk that users drop filling in all fields and goes on to something else..
Autotab provides smart auto-tabbing and filtering on text fields in a form. Simply put: once you have typed the maximum number of characters in a text field, you will automatically have focus on the next defined text field. The plugin also offers a mask / filter function to ensure that only valid characters can be put in.
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! There’s a few good demos and examples on the plugins use here.
The Access Key Highlighter plugin provides various options for highlighting access keys on web forms when the user presses their browser’s access key shortcut key, e.g. Alt in Internet Explorer and Safari, Shift+Alt in Firefox.
With this plugin you will be able to use Enter or Space buttons in your forms replacing the buttons such as Tab for changing focus in fields just with assigning an ID to the form. This plugin may not be applicable to most public applications as changing basic browser behaviour may confuse users. In some cases it is on the other hand very useful to avoid that users submit a form simply by hitting Enter.
Replaces radiobuttons and checkboxes with a more skinable Version.
This plugin provides an enhancement to multiple select boxes that is worth taking a look at.
This plugin makes it easy to have auto-growing textareas. Meaning, if you have a textarea, as the user types it will expand vertically to accommodate the size of the entry. This was inspired by Facebook’s auto-expanding text areas. Demo
To make a textarea autogrow, simply do this
Similar plugin is: Bigger Textarea
Checkbox checkall with group and set max items group can select
This plugin allows users to check or uncheck large groups of checkboxes quickly. When the user drags the mouse a red highlighting box follows the area that they have draged over. Any checkboxes within the highlit area will be checked. If the user shifts and drags then any checkboxes in the highlit area will be unchecked.
Know the effect used in the Google Custom Search input field? This plugin provides a similar effect in a very simple way. This is often used by opt-in input fields where the default value of the field is something like “Your e-mail address”. If you click the field the text disappears so that you can type your e-mail address.