12 Essential Javascript Form Plugins

Written by Kevin Liew on 27 Mar 2012
40,226 Views • Javascript

Introduction

Web Form is a really common web component in a website, you use it to collect data, user details etc. However, the existing form features are pretty restricted and has the most basic capability. I know we have HTML5 form, unfortunately not all browsers are supporting it yet, so for now we can use some awesome jQuery or javascript magic to enhance the existing form elements.

Below we have collected 12 really useful form plugins that will help you to create a better and user friendlier web form.

  • DropKickDropKickCreate a custom drop down menu and skin it up easily.
  • ChosenChosenChosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.
  • TextextJSTextextJSTextExt is a plugin for jQuery which is designed to provide functionality such as tag input and autocomplete.
  • AutoTabAutoTabAutotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element.
  • jQuery FIle UploadjQuery FIle UploadFile Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing.
  • MailCheckMailCheckThe jQuery plugin that suggests a right domain when your users misspell it in an email address.
  • jQuery Mask PluginjQuery Mask PluginA jQuery plugin to make field masks.
  • NoUISliderNoUISlidernoUiSlider is a little jQuery plugin that turns a html object into a nice (range) slider. It can have two handles to select a range, a fixed minimum or maximum to select a limit, or just two handles to pick some points.
  • ClearfieldClearfieldThis plugin takes care of your input fields. 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.
  • jQuery.fn.autoResizeAutoresizeA plugin for jQuery which changes the dimensions of input elements to suit the amount of data entered. It operates on textarea, input[type=text] and input[type=password] elements.
  • LimitLimitLimit is a plugin for the javascript framework Jquery that limits the number of characters that can be entered in a textarea or input field. The plugin can also report the number of characters left before the user reaches the length limit.
  • Password StrengthPassword StrengthThis plugin can detect the strength of your password.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

3 comments
vsync 13 years ago
I have coded all these myself in the past and I want to share my findings as well:

http://dropthebit.com/150/validation-styling-semantics-of-forms/

Reply
Krishna Mathias 13 years ago
Not new to graphics, but new to coding: How, where exactly do you put the js coding in Edge?
Thank you in advance
Reply
Imran Haider 13 years ago
Thanks for the Article
Reply