75+ Top jQuery Plugins to improve Your HTML Forms
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
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.
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)
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.
Date Picker
Date Picker component with a lot of options and easy to fit in your web application.
Simple jQuery Date Picker
Simple date picker script. Author requests assistance for adding improvements.
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.
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.
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.
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.
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 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.
ajax 