Tutorials and plugins for styling web forms

There are many ways you can format your web forms. Some elements like for instance dropdown menus (select) aren´t that easy to style without help of javascript. This comprehensive collection lists tutorials and plugins will help you to deal with your forms. It contains styling, validations, captcha, autofillers, uploads and many more.

jQuery checkbox v.1.3.0 Beta

Lightweight custom styled checkbox implementaion

Demo | Source page

jQuery inline form validation

A jQuery inline form validation, because validation is a mess.

Demo | Source page

jQuery ´highlight´

Highlight increases usability by highlighting elements as you interact with the page.

Demo | Source page

AJAX Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers.

Demo | Source page

AJAX Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page.

Demo | Source page

Ajax Username Check

The embedded javascript picks up the onblur event of the input field with id username.

Demo | Source page

Nodstrum AutoCompleter

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

Demo | Source page

Autotab

jQuery auto-tabbing and filter plugin.

Demo | Source page

Autocomplete plugin

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

Demo | Source page

Password Validation plugin

This plugin extends the jQuery validation plugin rating password.

Demo | Source page

Incredible Login Form With jQuery

This plugin extends the jQuery validation plugin rating password.

Demo | Source page

Default Value

A simple Javascript-based user enhancement to your web forms.

Source page

Digg Style Sign Up Form

A tutorial describing how to create ´Digg.com like´ sign up form.

Demo | Source page

Styling an input type – file

Of all form fields, the file upload field is by far the worst when it comes to styling.

Demo | Source page

Elastic

Make your textareas grow Facebook style jQuery plugin.

Demo | Source page

Enlarge input fields on focus

Enlarge input fields on focus so that entire text could be visible during typing.

Source page

markitup

It allows you to turn any textarea into a markup editor.

Demo | Source page

FancyForm

FancyForm is a powerful checkbox replacement script.

Demo | Source page

File Style

Style those darn file inputs. With jQuery of course.

Demo | Source page

mcDropdown jQuery

Input forms multi drop down jQuery plugin.

Demo | Source page

Improved Current Field Highlighting

As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms.

Demo | Source page

In-Field Labels

Labels fade when the field is focussed and disappear when text entry begins.

Demo | Source page

JQuery Geogoer VChecks

jQuery plugin for nice looking checkboxes.

Demo | Source page

jCryption

jCryption is a JavaScript HTML-Form encryption plugin.

Demo | Source page

combobox v2.1

You can add an icon with each option. It works with your existing ´select´ element.

Demo | Source page

jQuery AlphaNumeric

Did you ever have the need to prevent users from entering certain characters into your form?

Demo | Source page

jQuery Comment Preview

jQuery Comment Preview…

Demo | Source page

uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website.

Demo | Source page

jQuery Form Plugin

Easily and unobtrusively upgrade HTML forms to use AJAX.

Demo | Source page

jQuery Nice Form

Custom styling for your forms.

Demo | Source page

jQuery shiftcheckbox plugin

To select a range of consequetive checkboxes with just two clicks.

Demo | Source page

Selecting Multiple Select Form Elements on the Fly

Selecting Multiple Select Form Elements on the Fly

Demo | Source page

jQuery plugin: Validation

jQuery plugin: Validated your form.

Demo | Source page

jquery.combobox

jquery.combobox is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s).

Demo | Source page

jQuery fieldtag plugin

Handles custom styling of your form.

Demo | Source page

jTip plugin

Displays tips for input forms.

Demo | Source page

Justify elements using jQuery and CSS

Allign your form not using tables.

Demo | Source page

livevalidation

Allign your form not using tables.

Demo | Source page

meioMask – a jQuery mask plugin

Encoding is important if you are going to use the mask with special characters like áéã (rule ´@´, see below for more).

Demo | Source page

NiceForms V2

Custom style your forms.

Demo | Source page

jqTransform

Another custom style your forms.

Demo | Source page

jVal

jQuery Form Field Validation Plugin.

Demo | Source page

TextArea Resizer

Allows the user to extend the textarea element/area within the web page whenever they feel.

Demo | Source page

prettyCheckboxes

This script is for people who wants to have a consistent look for checkboxes across browser.

Demo | Source page

prettyComments

Comment boxes that are alway too small for long comment.

Demo | Source page

Select Multiple Form Fields

Most of the form fields available with HTML are straightforward and easy for people to understand and use. But there is one exception. The select multiple.

Demo | Source page

Sexy Combo jQuery plugin

Sexy Combo is a jQuery plugin that allows you to turn default browser selectboxes into much more attractive and usable comboboxes.

Demo | Source page

chain combobox

Very simple chained selects plugin for jQuery.

Demo | Source page

Submit Without Page Refresh

Submit A Form Without Page Refresh using jQuery.

Demo | Source page

Password Strength Indicator

Sometimes you want to show your user the strength of their password.

Demo | Source page

CLEARFIELD

This plugin takes care of your input fields.

Demo | Source page

Date Range Selector

Transcendent jQuery Date Range Selector + Short Cuts.

Demo | Source page

LightForm

Takes care of your form validation, spam check, alerts…

Demo | Source page