50个有用的jQuery插件来增强您的表单

14年前
这次看到的jQuery也觉得挺有用。转载过来介绍给大家。

Turn Any Webform into a Powerful Wizard ( 示例 | 下载 )
这件插件可以把一个表单转换成一组表单向导增强用户体验(The FormToWizard plugin helps you to turn any webform into a powerful wizard with jQuery “steps left” information.)

toChecklist plugin ( 示例 | 下 载 )
下拉多项目选择列表(The toChecklist plugin for jQuery will give you the functionality of a SELECT box without the need to ctrl+click items to select them.)

FlexBox ( Demo | Download )
FlexBox is a jQuery plugin that is intended to be a very flexible replacement for html textboxes and dropdowns, using ajax to retrieve and bind JSON data.

A fancy contact form ( Demo | Download )
Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channel are contact forms. In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.

Jquery Collapser ( Demo | Download )
Jquery collapser is a multi purpose collapser plugin made for expanding and collapsing elements.

asmSelect – Select Multiple Form Fields ( Demo | Download )
asmSelect is a jQuery plugin that answers some of these issues. A progressive enhancement is applied to the select multiple that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options.

JQUERY: DFORM ( Demo | Download )
The jQuery.dForm plugin allows you to create your HTML forms programmatically from

A jQuery Inline Form Validation ( Demo | Download )

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.

JQuery plugin for input text field filtering ( Demo | Download )
This is simple JQuery plugin for filtering text input field by using regexp. Only allowed characters will be inserted into input field, others will be silently dropped.

Jqueryform28 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery Show Password Plugin ( Demo | Download )
This plugin works by adding a text field that takes the value of what is typed into the password field. Then, when the link is clicked the password field is hidden and the text field is shown.

Simple Validation Plugin ( Demo | Download )
A simple validation plugin that comes in at about 1.5kb.

Jqueryform19 in 50 Useful jQuery Plugins to Enhance your Forms

AutoSuggest jQuery Plugin ( Demo | Download )
AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.

Jqueryform20 in 50 Useful jQuery Plugins to Enhance your Forms

How to create Skype-like Form buttons using jQuery ( Demo | Download )
If you use Skype then you have probably 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. In this tutorial Janko Jovanovic is going to show you how to create the same button using jQuery and some simple CSS.

Jqueryform21 in 50 Useful jQuery Plugins to Enhance your Forms

Create an AJAX/jQuery/PHP Contact Form ( Demo | Download )
This tutorial uses XHTML, CSS, jQuery and a little PHP to make a pop-up/modal contact form that validates whatever is entered into the form and then uses AJAX to send the form without refreshing the page.

Jqueryform38 in 50 Useful jQuery Plugins to Enhance your Forms

JavaScript image combo box ( Demo | Download )
Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing “select” element.

Jqueryform2 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery plugin: Password Valida ( Demo | Download )

Jqueryform3 in 50 Useful jQuery Plugins to Enhance your Forms

prettyCheckboxes ( Demo | Download )
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.

Jqueryform5 in 50 Useful jQuery Plugins to Enhance your Forms

Boxy – 非死book-like dialog/overlay, with frills ( Demo | Download )
Boxy is a flexible, 非死book-style dialog box for jQuery with support for dragging and size tweening.

Jqueryform6 in 50 Useful jQuery Plugins to Enhance your Forms

Enlarge input fields on focus ( Demo | Download )

Jqueryform7 in 50 Useful jQuery Plugins to Enhance your Forms

WordPress contact form without a plugin, using jQuery ( Demo | Download )
There are lots of WordPress plugins for contact forms, but wouldn’t it be nice to have more control over the markup? In this tutorial, Trevor is going to show how to use a custom page template to create a contact form in WordPress without a plugin.

Jqueryform8 in 50 Useful jQuery Plugins to Enhance your Forms

Build An Incredible Login Form With jQuery ( Demo | Download )
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

Jqueryform9 in 50 Useful jQuery Plugins to Enhance your Forms

In-Field Labels jQuery Plugin ( Demo | Download )
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.

Jqueryform10 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery Keypad ( Demo | Download )

Jqueryform11 in 50 Useful jQuery Plugins to Enhance your Forms

How to Enhance Forms Using jQuery UI ( Demo | Download )
jQuery makes creating UI so much easier without compromising speed and quality. In this tutorial we are going to enhance form using jQuery UI, so let’s get started

Jqueryform12 in 50 Useful jQuery Plugins to Enhance your Forms

Autocomplete ( Demo | Download )
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

Jqueryform13 in 50 Useful jQuery Plugins to Enhance your Forms

jqTransform ( Demo | Download )
This plugin is a jQuery styling plugin wich allows you to skin form elements.

Jqueryform14 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery Validation ( Demo | Download )

Jqueryform15 in 50 Useful jQuery Plugins to Enhance your Forms

Submit A Form Without Page Refresh using jQuery ( Demo | Download )
Submit a contact form that sends an email, without page refresh using jQuery, This tutorial will help you creating a form that can be submitted without page refreshing, using JQuery.

Jqueryform16 in 50 Useful jQuery Plugins to Enhance your Forms

Selecting Multiple Select Form Elements on the Fly ( Demo | Download )
The following jQuery tutorial offers a simplified solution to selecting related select menu options within a form.

Jqueryform17 in 50 Useful jQuery Plugins to Enhance your Forms

timepickr ( Demo | Download )
jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.

Jqueryform22 in 50 Useful jQuery Plugins to Enhance your Forms

AJAX forms ( Demo | Download )
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX.

Jqueryform23 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery AlphaNumeric ( Demo | Download )
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

Jqueryform24 in 50 Useful jQuery Plugins to Enhance your Forms

Give Your Characters a NobleCount ( Demo | Download )
NobleCount is a customizable jQuery plugin for a more improved counting of the remaining characters, and handling of resulting behaviors, of a text entry object, e.g. input textfield, textarea. Also, NobleCount supports pre-existing text within the text object and jQuery chaining.

Jqueryform25 in 50 Useful jQuery Plugins to Enhance your Forms

Password Strength Indicator and Generator ( Demo | Download )
In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

Jqueryform26 in 50 Useful jQuery Plugins to Enhance your Forms

“SAFE SUBMIT” AJAX REQUEST BUTTON HANDLER ( Demo | Download )
If you want to disable your ajax submit buttons when clicked to disallow double submits, jquery.safesubmit makes it simple and safe.

Jqueryform29 in 50 Useful jQuery Plugins to Enhance your Forms

JQByte StickyForms ( Demo | Download )
StickyForms is a jQuery plugin that automatically saves all form fields into cookies, and then autofills those values on any form that shares element IDs across your site.

Jqueryform32 in 50 Useful jQuery Plugins to Enhance your Forms

A BETTER FORM – SPAM-LESS ROBOT-LESS FORMS ( Demo | Download )
A Better Form is a jQuery plugin I designed to help eliminate spam comments, spam emails and other automated form submissions.

Jqueryform35 in 50 Useful jQuery Plugins to Enhance your Forms

Simple chained combobox ( Demo | Download )

Jqueryform37 in 50 Useful jQuery Plugins to Enhance your Forms

Changing Form Input Styles on Focus with jQuery ( Demo | Download )
This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.

Jqueryform39 in 50 Useful jQuery Plugins to Enhance your Forms

Ajax Upload; A file upload script with progress-bar, drag-and-drop ( Demo | Download )
This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

Jqueryform40 in 50 Useful jQuery Plugins to Enhance your Forms

Select Multiple Form Fields ( Demo | Download )

Jqueryform41 in 50 Useful jQuery Plugins to Enhance your Forms

Masked Input Plugin ( Demo | Download )

Jqueryform43 in 50 Useful jQuery Plugins to Enhance your Forms

Elastic – Make your textareas grow ( Demo | Download )
This jQuery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on 非死book. The major difference between Elastic and it’s competitors is it’s weight.

Jqueryform91 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery “Highlight” Plugin ( Demo | Download )

Jqueryform92 in 50 Useful jQuery Plugins to Enhance your Forms

Ajax Fancy Captcha ( Demo | Download )

Jqueryform93 in 50 Useful jQuery Plugins to Enhance your Forms

File Style jQuery ( Demo | Download )
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Jqueryform95 in 50 Useful jQuery Plugins to Enhance your Forms

Emblematiq Niceforms ( Demo | Download )
You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!

Jqueryform96 in 50 Useful jQuery Plugins to Enhance your Forms

Uploadify – a multiple file upload plugin for jQuery ( Demo | Download )
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Jqueryform97 in 50 Useful jQuery Plugins to Enhance your Forms

Progress Bar ( Demo | Download )
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.

Jqueryform98 in 50 Useful jQuery Plugins to Enhance your Forms

Uniform – Sexy forms with jQuery ( Demo | Download )
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Jqueryform99 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery.uiSelect ( Demo | Download )

Jqueryform100 in 50 Useful jQuery Plugins to Enhance your Forms

Autocomplete ( Demo | Download )
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.

Jqueryform1011 in 50 Useful jQuery Plugins to Enhance your Forms