Best jQuery Forms Plugins & Tutorials with Demo

DictAndList : jQuery plugin for editable Dict and List html

DictAndList : jQuery plugin for editable Dict and List html

It is a plugin for editable Dict and List html, their values can be attached into form as stringified JSON when processing jQuery post.

LabelinPlace : jQuery form enhancement plugin for In-field Label

LabelinPlace : jQuery form enhancement plugin for In-field Label

A simple fully customizable form enhancement jQuery plugin for in-field label support.

jQuery Incrementer Plugins

jQuery Incrementer Plugins

This plugin extends an html input field which serves a number to be given. Handling validation and easy incrementing or decrementing of given value is provided.

switch.js : Switch-like widget using bootstrap and jQuery

switch.js : Switch-like widget using bootstrap and jQuery

A lightweight switch-like widget using twitter bootstrap and jQuery. This is good for simulating states like on/off, user/admin etc.

jQuery Masked Input Plugin

jQuery Masked Input Plugin

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined:

  • a – Represents an alpha character (A-Z,a-z)
  • 9 – Represents a numeric character (0-9)
  • * – Represents an alphanumeric character (A-Z,a-z,0-9)

bselect : Select decorator component for Bootstrap

bselect : Select decorator component for Bootstrap

The select decorator component that was missing for Twitter Bootstrap.

Features:

  • Bootstrap-like dropdown decorator for <select> elements
  • Easy to use, a simple jQuery call and you’re done!
  • Doesn’t require any Bootstrap CSS or JS to work
  • Tested via QUnit
  • Support for internationalization
  • ARIA ready

floatlabels.js : jQuery Float Label

floatlabels.js : jQUery Float Label

Follows the famous Float Label Pattern. Built on jQuery.The Float Label Pattern found his success after Brad Frost wrote a blog post about Float Label Patterns. The idea is based on a Dribbble Shot by Matt D Smith. The Pattern is easy to explain. On User Interaction with an input field the placeholder value moves up, and is displayed above the typed text. This Plugin offers you the possibility to upgrade your forms with this famous pattern.

Alpaca : Easy Forms for jQuery

Alpaca : Easy Forms for jQuery

Alpaca generates forms on-the-fly using JSON schema and configuration to define object models, types, properties, validation logic and layout. Alpaca generates intuitive forms while giving your business the assurance of data compliance.

The Alpaca library is pre-packaged with controls, wizards, layouts, I18N support and pluggable template engines for EJS, Handlerbars and jQuery.tmpl. API Documentation is provided so that you can extend Alpaca as you see fit.

Alpaca helps you to separate your data from your presentation. Design your forms once and have them work across different devices and UI engines without any additional coding.

Selecter : jQuery plugin for replacing default Select Elements

Selecter : jQuery plugin for replacing default Select Elements

A jQuery plugin for replacing default select elements. Replace those boring default select elements with something a little nicer. Selecter also integrates with Scroller, giving you complete control of your project’s UI. Oh, and they play nice with that shiny new responsive layout (try resizing this window).

jQuery Label Better

jQuery Label Better

jQuery Label Better will let you create a beautiful unobtrusive label for your form’s input fields. The uniqueness about this plugin is that all you have to do is add a placeholder text, and we will show the label only when the user needs it.