Oct 03

20 Best jQuery Plugins for Better HTML forms

Thu, 10/03/2013 - 20:17 — julie

jQuery helps you provide high quality, dynamic and attractive input forms for your website’s visitors. In this post, you’ll find some of the best jQuery plugins which will help you a lot in creating better HTML forms. These plugins will help you visually enhance your HTML forms, manipulate data and validation, create calendars and date pickers and more!

Let us know, which ones of these 20 Best jQuery Plugins for Better HTML forms will you choose?

FormToWizard plugin

This detailed tutorial will show you how to turn long webform into a wizard with “steps left” information. The plugin is also available for download.

FormToWizard plugin

In-Field Labels jQuery Plugin

This is a simple plugin that turns HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins.

In-Field Labels jQuery Plugin

jQuery UI Multiselect

This useful jQuery plugin turns HTML multiple select inputs into a better looking equivalent. There’s no extra markup needed. You have search within available options, counts display, select all / deselect all buttons and more.

jQuery UI Multiselect

prettyCheckboxes

This script is for creating a consistent look for checkboxes across browsers and making them look better. By using this script you wont loose any of the regular inputs usability.

prettyCheckboxes

jqTransform

This plugin is a jQuery styling plugin wich allows you to skin form elements. You can add click event on checkbox and radio and auto resize the select field if necessary.

jqTransform

A jQuery inline form validation

It may be difficult to have a versatile solution that works with every kind of form. Finding the best way of displaying errors may not be that easy. When an error has to be displayed, this script creates a div and positions it in the top right corner of the input. Very useful and looks good too!

A jQuery inline form validation

jQuery Password Strength Meter

Password Strength Meter is a jQuery plugin that provides a smart script which shows the strength of the password in the input field.

jQuery Password Strength Meter

jQuery Form Tips

Form Tips is a plugin for jQuery. It enables a form to draw default values or messages into input/textarea elements. The text is fetched from the title-attribute of the element.

jQuery Form Tips

jQuery UI Datepicker

The datepicker is connected to a standard form input field. If you focus on the input, you’ll 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.

jQuery UI Datepicker

jQuery.timepickr.js

jquery.timepickr plugin was created in order to make the process of inputing time in a form as easy and natural as possible. It has nice styling too.

jQuery.timepickr.js

AutoSuggest jQuery Plugin

AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy. If you need to add some auto-completing functionality to your project, this is the right jQuery plugin to use.

AutoSuggest jQuery Plugin

jQuery UI Slider from a Select Element

The plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control.  You can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there.

jQuery UI Slider from a Select Element

Uploadify

Uploadify is fully customizable so you can create the uploader that suits your site perfectly. This plugin gives you both the client-side and server-side functionality you’ll need to handle single-file and multi-file uploads.

Uploadify

Virtual Keyboard with jQuery Tutorial

Very few websites provide their users with the option of using a virtual keyboard to key in their passwords, and thus protect them. This is a tutorial on creating a virtual keyboard with jQuery with the script at the end.

Virtual Keyboard with jQuery Tutorial

jQuery 1.4 API Cheat Sheet

Cheat Sheets are always useful for web developers, especially if you’re a beginner. This is a very complex and helpful jQuery API cheat sheet, available to download in PDF format too.

jQuery 1.4 API Cheat Sheet

File Style Plugin for jQuery

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.

File Style Plugin for jQuery

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. This tutorial will show you how to create the same button using jQuery and some simple CSS. The plugin can be downloaded at the end of the article.

How to create Skype-like buttons using jQuery

jQuery Impromptu

jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. This is a great replacement for an alert, prompt, and confirm.

jQuery Impromptu

Highlight

Form-filling can be made clearer by highlighting the element around a control as you tab into it. 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.

Highlight

Justify Elements Using jQuery and CSS 

A web form should have a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing width of labels. This small jQuery tutorial shows you how.

Justify Elements Using jQuery and CSS – Tutorial

The post 20 Best jQuery Plugins for Better HTML forms appeared first on Design Inspiration | How to Design a Website.

Copyright 2009. E-mail Me
Auto Spare Parts