In this post we have a selection of jQuery plugins and tutorials for enhancing and aiding in the development of the dreaded form area. There are the always important validation plugins, plugins that will give the form added functionality (stretching text-areas, auto-tabbing…) and also plugins that will help you to style the form exactly as you need…and more.
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
This plugin is a jQuery styling plugin wich allows you to skin form elements and transform the entire look an d feel of the form.
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers.
This plugin takes care of your input fields. 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.
When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing the width of labels. But what if you don't want to use tables and you want to align input elements according to the width of the longest label? This small jQuery tutorial shows you how.
Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element.
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
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!
The jQuery Shiftcheckbox Plugin allows you to select a range of consecutive checkboxes with just two clicks. The plugin is inspired by the GMail checkboxes functionality and works exactly the same. Just keep the 'Shift' key pressed and select a starting checkbox and the last checkbox that you want to select.
Sexy Combo is a jQuery plugin that allows you to turn default browser selectboxes into much more attractive and usable comboboxes. The user can choose whether to select option from the dropdown list or just type it.
jQuery Comment Preview plugin not only gives site users the chance to preview a comment they have posted, it also allows them to preview it in real time, and it is simply awesome. There is also a MooTools version of this tutorial.
jQuery "Highlight" plugin increases usability by highlighting elements within a form as you interact with each element. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.
Most of the form fields available with HTML are straightforward and easy for people to understand and use. But there is one exception. The select multiple. While useful and necessary, the select multiple form field has always been a usability challenge. The Select Multiple Form Fields plugin offers a really cool solution, click the demo button to see for yourself.
AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and starting from version 2.0 doesn’t require any library to run (although it will use some jQuery functions if it’s already loaded on the page).
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. It has a basic design and its elements are easy to style and customize.
meioMask jQuery plugin is a simple to use plugin for creating and applying maskstot text input fields.
Did you ever see some input fields that have a description tag in it and as soon as you click into them, in order to write something, the description disappears? That’s exactly what this jQuery plugin does for you. Even picture watermarks are a piece of cake, in fact everything handled by a string of Text and/or a CSS-class assigned to an input field, is possible.
This Jquery plugin makes your textareas grow and shrink to fit it's content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it's competitors is it's weight.
This plugin extends the jQuery validation plugin by providing two components: A function that rates passwords for factors like mixed upper/lower case, mix of characters (digits, special characters), length and similarity to a username (optional) and another function that uses the rating function to display a password strength meter, requiring the field to have a “good” rating. You can also easily customize the appearance of the strength meter and localize the messages and integrate it into existing forms.