75+ Top jQuery Plugins to improve Your HTML Forms

jQuery makes it easier and simpler to provide your users with high quality, dynamic, good looking and intuitive input forms.

This post lists some of the best available in different categories; “Form Element Visual Enhancements”, “Form Element Data Validation and Manipulation”, “Form Tool tips”, “Calendars and date pickers”, “jQuery hot key plugins” etc.

Drop a comment if you know a good plugin that should be added to the list! Please remember to support tripwire magazine and share the article if you like it!

Have a look at some of our other posts:

• 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables
• Toolkit with 6 Awesome jQuery User Interface components

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

Form Element Visual Enhancements

jQuery plugin: ‘autoResize’

This is an animating ‘autoResize’ jQuery plugin adjusting the text field height as needed.

Uniform

Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.

Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

This detailed tutorial will show you how to turn long webform into a wizard with “steps left” information. A plugin is also available for download. demo

Baby Steps

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..

File Style Plugin for jQuery

File Style plugin enables you to use image as browse button. You can also style filename field as normal textfield using css.

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

In-Field Labels jQuery Plugin

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.

jQuery UI Multiselect

Another attempt of a sortable, searchable multiple select widge. It depends on jQuery 1.3 and jQuery UI 1.7. The widget is styleable using Themeroller. It works in an unobtrusive fashion, by just turning html multiple select inputs into a sexier equivalent. There’s no extra markup needed.

Jeditable

Normal flow is this. User clicks text on web page. Block of text becomes a form. User edits contents and presses submit button. New text is sent to webserver and saved. Form becomes normal text again.

prettyCheckboxes

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

jQuery Impromptu

Query Impromptu is an extention to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm.

Highlight

Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.

Justify Elements Using jQuery and CSS – Tutorial

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.

jQuery jNice

jquery.Combobox

An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

Geogoer VChecks

Avery user friendly way to show checkboxes.

Styling input file

Make image buttons a part of input fields

If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

clearField

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.

mcDropdown

mcDropdown allow users to select from a complex hierarchical tree of options.

ASM Select

This plugin provides an enhancement to multiple select boxes that is worth taking a look at.

Emblematiq Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

jqTransform

This plugin is a jQuery styling plugin wich allows you to skin form elements.

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

jQuery Checkbox

Provides for the styling of checkboxes that degrades nicely when javascript is dsiabled.

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

Simple Image Submit Button Rollovers with jQuery

Have you ever wanted a simple rollover technique with a form submission button? Something like this:

… without having to resort to a complicated mess of javascript form submission and cross browser compatibility issues? With jQuery it’s really easy

Table Row Checkbox Toggle

It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, there is an initialization step in the script that correctly marks a row when it’s considered checked on page load.

Form Element Data Validation and Manipulation

Dropdown Check List

The Dropdown Check List jQuery widget transforms a regular select html element into a dropdown checkbox list.

jQuery Form Plugin

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX.

vanadiumjs

Great client side validation script that support ajax.

jQuery Validation

jQuery Validation is a plugin that give you many form validating options.

Masked Input Plugin for jQuery

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). If you like the simplicity of jQuery you will like this validation script too!

A jQuery inline form validation

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. This is something the author have tried to remedy with this script. 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. There is no images needed.

Stunning ajax form validation

This is a tutorial that shows you how to create a very nice jQuery-based form with ajax posting and validation. Our form will also change the css classes of the inputs, display validation errors and all that sexy stuff which is meant to help our visitor better identify what was filled wrong and what needs to be done in order to successfully submit the form.

Form validation with jQuery from scratch

The tutorial covers building a lightweight, flexible solution from scratch. It won’t be nearly as advanced and powerful as the official plugin. Nevertheless, I hope you’ll learn something from a jQuery, JavaScript and Object-Oriented aspect.

jQuery Field Plug-in

This plugin greatly expands the ability to retrieve and set values in forms beyond jQuery’s standard val() method (and Mike Alsup’s Form Plug-in’s fieldArray() method) by allowing you to interact with all types of form field elements (except input[type=”file”], which is a read-only element.) It works the same way for text elements as it does for radio, checkbox and select elements.

Using form labels as text field values

New jQuery plugin targeting usability for password masking on forms

ToggleVal

ToggleVal gives you the option to populate the default text of form fields (in a few different ways), and will then toggle the default value when the field receives and loses keyboard focus.

jQuery magicpreview plug-in

magicpreview automatically updates selected elements on a page based on form fields. Perfect for previewing forms.

Form Validation Techniques

Password Strength Indicator

Password Strength Indicator does what it says on the tin, however my preference would be to have the colors swapped round red for bad, green for good

jQuery Password Strength Meter

Password Strength Meter is a jQuery plug-in that provides a smart algorithm that shows the strength of the input.

Password Indicator

This is example is a merging of Benjamin Sterling’s Password Strength Indicator and Microsoft Passport’s Password Strength CSS.

Demo

Ajax Username Checker

It’ll validate against your username records so that a user can choose a unique name straight away.

Meio Mask

meioMask is a simple use plugin for creating and applying masks at text input fields.

Form Tool tips

jQuery Form Tips

“Form Tips” is a jQuery plugin which enables a form to draw default values or messages into input/textarea elements. The text is fetched from the title-attribute of the element.

The jQuery Tooltip

jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It’s nothing that fancy, really, just your normal everyday over hyped AJAX/AXAH type stuff. In keeping with all of this web 2.0 silliness, this means all of the tips are external. This is a handy feature depending upon the type of usage a person might intend for jTip.

Calendars and date pickers

Full Calendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event)

Demo

jQuery UI Datepicker

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.

Demo

Date Picker

Date Picker component with a lot of options and easy to fit in your web application.

Demo

Simple jQuery Date Picker

Simple date picker script. Author requests assistance for adding improvements.

Demo

jQuery Week Calendar

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Demo

jMonthCalendar

MonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar now supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.

Demo

jQuery.timepickr.js

jQuery plugin that makes filling time inputs very easy. With a maximum of 2 clicks, a user can fill the form and there is also a keyboard navigation support too.

Auto complete and save

AutoSuggest jQuery Plugin

This one is really awesome. Just 7kb minified. AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.

jQuery autosave plug-in

Autosave is designed to save the progress of forms by saving the fields to cookies so you won’t lose anything should anything go wrong

The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.

jQuery Autosave

A small jQuery Plugin but useful for working with the form. Autosave plugin will send entire form when one element changes. You can callbacks on sending, success and error… really helpful for form working.

Auto Complete

Are you trying to build a custom search feature for a site? The Auto Complete jQuery plugin can supercharge your form inputs with additional user feature.

AjaxDaddy jQuery Auto Complete

This script is based on jQuery Autocomplete plugin made by PengoWorks. It has many options and is quite easy to setup in your page. You can pass advanced options as a JavaScript object, hashes etc.

Bassistance jQuery Auto Complete

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

jQuery Pagers

jQuery pager plug-in

Pagination

jQuery paginator is based on the jQuery Pagination plugin originally written by Gabriel Birke. For information, documentation and license please visit http://plugins.jquery.com/project/pagination

jQuery paginator plugin file already includes the required jQuery pagination plugin.

Demo

jQuery hot key plugins

jQuery auto-tabbing and filter plugin

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.

Special Keys

Tiny plugin helps you recorzine special key from key board when users pressed it. At the moment, this plugin just has some special key such as: CTRL, SHIFT, ALT, RETURN …, but you can include other keys you might want to.

Access Key Highlighter

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.

BS Form Accelerator

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.

jQuery shortKeys plug-in

Hot Keys

jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination.

Demo

jQuery Sliders

slider

The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.

Creating a Nice Slider With jQuery UI

Sliders have many things going for them as a UI element; they offer the benefit restricting the choice a user has, without taking up the space of a drop down. If you need to ask the user to select a number between a range, you can either do an input box with validation, a drop down select element listing each possibility, or you can do a slider.

jQuery UI Slider from a Select Element

selectToUISlider plugin uses progressive enhancement to scrape the data from a select element (or two for a range) and generate a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. It also allows the user to interact and make a choice with or without javascript, since the select element can be used if the slider is unavailable.

jQuery File Uploaders

Uploadify

Uploadify is a package written on top of jQuery that gives you both the client-side and server-side functionality you’ll need to handle single-file and multi-file uploads.

AJAX Upload

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 Upload doesn’t pollute the global namespace, so it’s compatible with jQuery, Prototypejs, Mootools, and other JavaScript libraries. Demo

Virtual Keyboard for Form Input Elements

Customizable jQuery Virtual Keypad Plugin

jQuery Keypad is a plugin for creating more secure input entry by providing a keyboard like interface. The values to be displayed can be easily set which makes it possible to show only numbers, foreign letters, etc.

Virtual Keyboard with jQuery Tutorial

Tutorial on creating a virtual keyboard with jQuery (script can be downloaded).

Such virtual keyboards are generally used in bank websites or forms that require extra security. They are a step for preventing keyloggers (but may not be an absolute solution as keyloggers are getting smarter).

Cheat Sheets

jQuery 1.4 API Cheat Sheet

oscarotero jquery 1.3 (as wallpaper)

jQuery Cheat sheets are always nice to have

jQuery Visual Map

Although the jQuery Visual Map is not a printable reference like most of the other cheat sheets on this list, it is still a great tool for referencing, learning jQuery and grabbing snippets. Unfortunately it’s a bit outdated. If you’re still using jQuery 1.2 you need to consider upgrading… if you wont this sheet may be useful to you!

colorcharge jQuery 1.2

If you’re still using jQuery 1.2 you need to consider upgrading… if you wont this sheet may be useful to you!

jQuery Cheat Sheet 1.2

If you’re still using jQuery 1.2 you need to consider upgrading… if you wont this sheet may be useful to you!

Cisco certified network professional or ccnp certification is considered proof of having the ability to work with medium-sized networks with technology like ccvp and ccsp security area.

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.