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!
Form Element Visual Enhancements
This is an animating ‘autoResize’ jQuery plugin adjusting the text field height as needed.
Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.
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
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 enables you to use image as browse button. You can also style filename field as normal textfield using css.
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.
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.
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.
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.
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.
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 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.
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.
An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.
Avery user friendly way to show checkboxes.
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.
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 allow users to select from a complex hierarchical tree of options.
This plugin provides an enhancement to multiple select boxes that is worth taking a look at.
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.
This plugin is a jQuery styling plugin wich allows you to skin form elements.
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.
How to replace radio buttons and check boxes with jQuery.
Have you ever wanted a simple rollover technique with a form submission button? Something like this:
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
The Dropdown Check List jQuery widget transforms a regular select html element into a dropdown checkbox list.
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX.
Great client side validation script that support ajax.
jQuery Validation is a plugin that give you many form validating options.
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.
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.
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.
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.
magicpreview automatically updates selected elements on a page based on form fields. Perfect for previewing forms.
Form Validation Techniques
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
Password Strength Meter is a jQuery plug-in that provides a smart algorithm that shows the strength of the input.
It’ll validate against your username records so that a user can choose a unique name straight away.
meioMask is a simple use plugin for creating and applying masks at text input fields.
Form Tool 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.
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
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)
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 component with a lot of options and easy to fit in your web application.
Simple date picker script. Author requests assistance for adding improvements.
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.
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 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
This one is really awesome. Just 7kb minified. AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.
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.
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.
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.
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.
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
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.
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.
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.
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.
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.
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 File Uploaders
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.
Virtual Keyboard for Form Input Elements
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.
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).
jQuery Cheat sheets are always nice to have
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!
If you’re still using jQuery 1.2 you need to consider upgrading… if you wont this sheet may be useful to you!