12 Essential Javascript Form Plugins

12 Essential Javascript Form Plugins


12 Essential Javascript Form Plugins

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.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

3 comments

vsync
Wed, 28th March 2012
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
Wed, 4th April 2012
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
Mon, 9th April 2012
Thanks for the Article Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement