Unleash the Full Power of Form Elements with Javascript

I have this love-hate relationship with web form. I have created countless of forms, from the simplest email subscription form, login form to the massive form that needs to be divided into pages. It takes effort to build usable and beautiful forms.

First of all, we have a few plugins that allow form skinnning, it can theme up the form easily with just a few line of javascript and followed by a list of plugins that enhance form elements by adding more features.Â It's particularly useful to make sure users enter correct data by restricting the data type and value they are allowed to enter. For example, textarea word count, range slider and auto complete text field. We also include a few plugins that add cool effects to your form elements.Â

Generic Form Skinning

jqTransform

jqTransform has been in web industry for quite some times now. If you want to skin your form quickly, you should try this. If you inspect the code, you can control which form elements you want to skin.

Ideal Forms

While jqTransform is a bit old, here we have Ideal Forms which also come with on-the-spot form validation. It support responsive layout and a datepicker.

Formly

The main focus of this plugin is its validation, however once this script is up and running, it will skin some of the form elements also.

Niceform

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

Input Text

fancyInput

Add effects to each letter being typed / deleted. It's using CSS3 as a result, only latest browsers support this.

Typehead.js

Inspired by twitter.com's autocomplete search functionality, typeahead.js is a fast and fully-featured autocomplete library.

Textext.js

TextExtâ€™s modular design allows you easily turn a standard HTML text input into a wide range of modern, tailored to your needs input field. It supports tags, autocomplate, ajax loading, placeholder text and drop down.

Textarea

Widearea

WideArea is simple and lightweight JavaScript and CSS library (2KB JS and 4KB CSS) which helps you to write better, simpler and faster. It makes textarea into a full screen, distraction free editor.

Countable

Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable is a zero-dependency library and comes in at 1KB when minified and gzipped.

Long Press

Insert alternate characters easily by pressing the key such as a, e, i, o, u.

Select Drop Down

ddSlick

A free light weight jQuery plugin that allows you to create a custom drop down with images and description. It converts select drop down into a better drop down menu that supports images and short description.

Chosen

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. It can convert a multiple select into tags based input field.

DropKick

DropKick works by transforming your existing, boring <select> lists into beautiful, customizable HTML dropdowns.

Selectize.js

Selectize is a jQuery-based custom <select> UI control. It's useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API.

Checkbox & Radio

iCheck

Highly customizable checkboxes and radio buttons for jQuery and Zepto.

Checkbox

Lightweight custom styled checkbox implementation. Just like those you would see on Android and iOS.

On/Off FlipSwitch

CSS3 powered On/Off flip switch.

Fancy Checkboxes and Radio Buttons

Old tutorial, but it works perfectly. It comes in raw Javascript and jQuery version.

File Uploader

FineUploader

Javascript plugin tool to give your users a smooth experience when uploading files to your website.

jQuery File Uploader

File Upload widget with multiple file selection, drag&drop support and progress bar for jQuery.

DropZoneJS

DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.

Uploadify

Uploadify available online for quite some time. Personally I have used it a few times, its flash version works great. I even bought the HTMl5 version but ended up with disappointment because of its documentation and poor support. Flash version is much better.

Slider

jqRangeSlider

A powerful slider for selecting value ranges, supporting dates and more.

noUISlider

A lightweight, highly customisable slider without bloat. Supports Google Chrome, Firefox, Opera, Safari and Internet Explorer 7 to 10. It also supports touch on capable devices, such as iPhone, iPad and Windows 8 and Android devices.

SliderControl

jQuery plugin that allows you to easily make sliders for range inputs

jsSlider

jQuery Slider is easy to use and multifunctional jQuery plugin that supports any webkit based touch mobile devices such as iPhone/iPod/iPad and Android. Below you can find demos and documentation.

Buttons

Buttons

A CSS button library built with Sass & Compass. It comes with a dozen of button styles.

Creative Button Styles

Modern and subtle styles & effects for buttons (hover and click)

CSS Gradient buttons

Pure CSS background gradient buttons by webdesignerwall.

Zurb Super Awesome Buttons

You shouldn't miss this buttons created by Zurb.

Datepicker

jQuery UI datepicker is the best I have seen, however, I'm not really a big fan of it because its dependencies are very heavy and also it has several image requests. Here we have 2 lightweight jQuery datepickers, good alternatives if you don't want to use jQuery UI's datepicker.

Pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Pikaday.js

Pikaday is a JavaScript datepicker with a light footprint and easy style-ability with modular CSS. It has no dependencies and less than 5kb minified and gzipped.