推荐:50个加强表单的jQuery插件

  1. 云栖社区>
  2. 博客>
  3. 正文

推荐:50个加强表单的jQuery插件

技术小胖子 2017-11-21 00:07:00 浏览792
展开阅读全文

Here we present some useful plugins and tutorials that will let you create awesome forms for your websites — whether it’s a sign up form or contact us form. You can enhance its functionality and usefulness with these plugins. Since these forms are used by the visitors of your website to interact with you, they are of great importance and for this reason you cannot just ignore them as they play an important role in the success of your website. So here we have gathered a bunch of jQuery Plugins, Tutorials and Resources which will help you in improving the effectiveness and beauty of these forms

 

Useful jQuery Plugins

Turn Any Webform into a Powerful Wizard ( Demo Download )
The FormToWizard plugin helps you to turn any webform into a powerful wizard with jQuery “steps left” information.
Jqueryform1 in 50 Useful jQuery Plugins to Enhance your Forms

toChecklist plugin ( Demo Download )
The toChecklist plugin for jQuery will give you the functionality of a SELECT box without the need to ctrl+click items to select them.

Jqueryform44 in 50 Useful jQuery Plugins to Enhance your Forms

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.

Jqueryform33 in 50 Useful jQuery Plugins to Enhance your Forms

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.

Jqueryform45 in 50 Useful jQuery Plugins to Enhance your Forms

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

Jqueryform27 in 50 Useful jQuery Plugins to Enhance your Forms

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.

Jqueryform42 in 50 Useful jQuery Plugins to Enhance your Forms

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

Jqueryform31 in 50 Useful jQuery Plugins to Enhance your Forms

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.

Jqueryform36 in 50 Useful jQuery Plugins to Enhance your Forms

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.

Jqueryform18 in 50 Useful jQuery Plugins to Enhance your Forms

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 – Facebook-like dialog/overlay, with frills ( Demo Download )
Boxy is a flexible, Facebook-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 Facebook. 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

Useful jQuery Resources

 

 

转载于:50 Useful jQuery Plugins to Enhance your Forms




 本文转自 陈本峰 51CTO博客,原文链接:http://blog.51cto.com/zhoujg/516845,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
技术小胖子
+ 关注