10 jQuery Plugins to Improve HTML Forms

Sam Deering
Tweet
10 jQuery Plugins to improve on 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.

Related posts:


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


Detailed tutorial will show you how to turn long web form into a wizard with “steps left” information.
Turn-any-webform-into-a-powerful-wizard-with-jQuery-FormToWizard-plugin.jpg
Source


2. BabySteps


(A ‘What About Bob?’ reference) is a simple and easily configurable tool for turning long forms into broken out steps without going from page to page.
BabySteps1.jpg
Source


3. 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.
File-Style-Plugin-for-jQuery1.jpg
Source


4. 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.
How-to-create-Skype-like-buttons-using-jQuery.jpg
Source


5. jQuery Impromptu


An extension 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.
jQuery-Impromptu.jpg
Source


6. 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.
Highlight.jpg
Source


7. Geogoer VChecks


Avery user friendly way to show checkboxes.
Geogoer-VChecks1.jpg
Source


8. 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.
Make-image-buttons-a-part-of-input-fields.jpg
Source


9. clearField


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.
clearField1.jpg
Source


10. mcDropdown


Allow users to select from a complex hierarchical tree of options.
mcDropdown.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.