JavaScript forms

Use any of the custom jQuery plugins to enhance your forms. Easily include them all, or one by one.

Bootstrap Colorpicker

Adds a color picker to a field or any other element. Bootstrap Colorpicker provides documentation on GitHub .

Example

You can view a basic example of the Colorpicker here

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional CSS 

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/bootstrap-colorpicker/bootstrap-colorpicker.css">

Additional Javascript 

<script src="assets/js/libs/bootstrap-colorpicker/bootstrap-colorpicker.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code. 

<input type="text" class="demo1" value="#5367ce" />
<script>
    $(function(){
        $('.demo1').colorpicker();
    });
</script>

Bootstrap datepicker

Adds a datepicker to a field or any other element. Bootstrap datepicker provides documentation on their website .

Example

You can view a basic example of the Colorpicker here

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional CSS 

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/bootstrap-datepicker/datepicker3.css">

Additional Javascript 

<script src="assets/js/libs/moment/moment.min.js"></script>
<script src="assets/js/libs/bootstrap-datepicker/bootstrap-datepicker.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code. 

$('#datepicker').datepicker()

Html

The Javascript is tied to an element in the body of your page. 

<input type="text" class="form-control" id="datepicker">

Bootstrap Rating Input

Bootstrap Rating Input is a plugin that eases the generation of rating stars for jQuery and Bootstrap.
Documentation is provided on GitHub .

Example

You can view a basic example of Bootstrap Rating Input here .

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional Javascript 

<script src="assets/js/libs/bootstrap-rating/bootstrap-rating-input.min.js"></script>

Html

You do not need extra JavaScript. Only add an input with the attribute type="number" to your forms and add the class .rating to it. 

<input type="number" name="rating" class="rating" value="3"/>

CSS

Wrap the input in a <div> tag with a .star-rating class to inline the stars. 

<div class="star-rating">
	<input type="number" name="rating" class="rating" value="3"/>
</div>

Bootstrap Tags Input

jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Bootstrap Tags Input provides documentation on GitHub .

Example

You can view a basic example of the Colorpicker here

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional CSS 

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/bootstrap-tagsinput/bootstrap-tagsinput.css">

Additional Javascript 

<script src="assets/js/libs/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>

Html

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.

Bootstrap Wizard

This Twitter Bootstrap plugin builds a wizard using a formatted tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events which allows to hook into each step individually.
Bootstrap Wizard provides documentation on GitHub .

Example

You can view a basic example of Bootstrap Wizard here

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional CSS 

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/wizard/wizard.css">

Additional Javascript 

<script src="assets/js/libs/wizard/jquery.bootstrap.wizard.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code. 

$('#wizard').bootstrapWizard(options);

Html

The Javascript is tied to an element in the body of your page. 

<div id="wizard" class="form-wizard form-wizard-horizontal">
	<form class="form-horizontal" role="form" novalidate="novalidate">
		<div class="form-wizard-nav">
			<div class="progress"><div class="progress-bar progress-bar-primary"></div></div>
			<ul class="nav nav-justified">
				<li class="active"><a href="#tab1" data-toggle="tab"><span class="step">1</span> <span class="title">Location information</span></a></li>
				<li><a href="#tab2" data-toggle="tab"><span class="step">2</span> <span class="title">Address information</span></a></li>
				<li><a href="#tab3" data-toggle="tab"><span class="step">3</span> <span class="title">User settings</span></a></li>
				<li><a href="#tab4" data-toggle="tab"><span class="step">4</span> <span class="title">Confirmation</span></a></li>
			</ul>
		</div><!--end .form-wizard-nav -->
		<div class="tab-content">
			<div class="tab-pane active" id="tab1">
				...
			</div><!--end #tab1 -->
			<div class="tab-pane" id="tab2">
				...
			</div><!--end #tab2 -->
			<div class="tab-pane" id="tab3">
				...
			</div><!--end #tab3 -->
			<div class="tab-pane" id="tab4">
				...
			</div><!--end #tab4 -->
		</div><!--end .tab-content -->
		<ul class="pager wizard">
			<li class="previous first"><a href="javascript:void(0);">First</a></li>
			<li class="previous"><a href="javascript:void(0);">Previous</a></li>
			<li class="next last"><a href="javascript:void(0);">Last</a></li>
			<li class="next"><a href="javascript:void(0);">Next</a></li>
		</ul>
	</form>
</div><!--end #rootwizard -->

CKEditor

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. CKEditor provides documentation on their website .

Example

You can view a basic example of CKEditor here

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional Javascript 

<script src="assets/js/libs/ckeditor/ckeditor.js"></script>
<script src="assets/js/libs/ckeditor/adapters/jquery.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code. 

$( '#ckeditor' ).ckeditor();

Html

The Javascript is tied to an element in the body of your page. 

<textarea id="ckeditor">
	...
</textarea>

Dropzone

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
DropzoneJS provides documentation on their website .

Example

You can view a basic example of DropzoneJS here

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional CSS should be included after <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional CSS 

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/dropzone/dropzone-theme.css">

Additional Javascript 

<script src="assets/js/libs/dropzone/dropzone.min.js"></script>

Javascript

You can enable validation by adding attributes to input elements.

jQuery Autosize

jQuery Autosize is a plugin to automatically adjust the height of a textarea. jQuery Autosize provides documentation on their website .

Example

You can view a basic example of the jQuery Autosize on their website

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional Javascript 

<script src="assets/js/libs/autosize/jquery.autosize.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code. 

$('textarea').autosize();

jQuery inputmask

jquery.inputmask is a jQuery plugin which creates an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, etc.
jquery.inputmask provides documentation on GitHub .

Example

You can view a basic example of jquery.inputmask here

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional Javascript 

<script src="assets/js/libs/inputmask/jquery.inputmask.bundle.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code. 

$(":input").inputmask();

Html

The Javascript is tied to an element in the body of your page. 

<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

jQuery Validation

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.
jQuery Validation provides documentation on their website .

Example

You can view a basic example of jQuery Validation here

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional Javascript 

<script src="assets/js/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/js/libs/jquery-validation/dist/additional-methods.min.js"></script>

Javascript

You can enable validation by adding attributes to input elements.

Multi select

User-friendly drop-in replacement for the standard <select> with multiple attribute activated.
Multi select provides documentation on their website .

Example

You can view a basic example of Multi select here

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional CSS 

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/multi-select/multi-select.css">

Additional Javascript 

<script src="assets/js/libs/multi-select/jquery.multi-select.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code. 

$('#multi-select').multiSelect({});

Html

The Javascript is tied to an element in the body of your page. 

<select multiple="multiple" id="multi-select" name="my-select[]">
	<option value='elem_1'>elem 1</option>
	<option value='elem_2'>elem 2</option>
	...
</select>

Select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Select2 provides documentation on GitHub .

Example

You can view a basic example of Select2 here

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional CSS 

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/select2/select2.css">

Additional Javascript 

<script src="assets/js/libs/select2/select2.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code. 

$("#select2").select2();

Html

The Javascript is tied to an element in the body of your page. 

<select id="select2">
	<option value="AL">Alabama</option>
	...
	<option value="WY">Wyoming</option>
</select>

Summernote

Super Simple WYSIWYG Editor on Bootstrap. Summernote provides documentation on github .

Example

You can view a basic example of Summernote here

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional CSS 

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/summernote/summernote.css">

Additional Javascript 

<script src="assets/js/libs/libs/summernote/summernote.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code. 

$('#summernote1').summernote();
$('#summernote2').summernote();

Html

Summernote is applied to a textarea element: 

<!-- Add summernote to an div element -->
<div id="summernote1">
	...
</div>

<!-- Or to an textarea -->
<textarea id="summernote2">
	...
</textarea>

Typeahead.js

Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.
Typeahead.js provides documentation on GitHub .

Example

You can view a basic example of the Typeahead.js here

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional CSS 

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/typeahead/typeahead.css">

Additional Javascript 

<script src="assets/js/libs/typeahead/typeahead.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code. 

$('#typeahead').typeahead(options);

Html

The Javascript is tied to an element in the body of your page. 

<input type="text" id="typeahead" class="form-control" data-source="data/countries.json" placeholder="Countries">