Forms extended

Examples of various extended form controls.

Forms extended

Extra from controls for select, date, multiselect, inline edit and spin. All form controls automatically receive some global styling.

X-editable

X-editable library allows you to create editable elements on your page. It includes both popup and inline modes. Please try out demo below to see how it works.

How to use

Markup elements that should be editable. Usually it is <A> element with additional data-* attributes

Simple text field superuser
Empty text field, required Empty
Select, local array, custom display not selected
Combodate (date) 15/05/1984
Combodate (datetime) Empty
Textarea, buttons below. Submit by ctrl+enter awesome user!
Checklist peach
apple

All examples and documentation you can find at: http://vitalets.github.io/x-editable/

Select2

Select2 Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Bootstrap theme with Select 2 - basic example
Multi Selection example
Bootstrap TouchSpin

TouchSpin A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

Basci example
Vertical button alignment:
Example with postfix
Basci with button postfix
Bootstrap clockpicker
ClockPicker

A clock-style timepicker for Bootstrap.

Bootstrap datetimepicker
Date/time picker

Date/time picker widget based on twitter bootstrap

Bootstrap datepicker

Bootstrap-datepicker provides a flexible datepicker widget in the Twitter bootstrap style. http://bootstrap-datepicker.readthedocs.org/en/latest/index.html

Inline version
Input

The simplest case: focusing the input (clicking or tabbing into it) will show the picker.

Component

Adding the date class to an input-group bootstrap component will allow the input-group-addon elements to trigger the picker.

Range

Using the input-daterange construct with multiple child inputs will instantiate one picker per input and link them together to allow selecting ranges.

to
Options

There are many avalible options to datapicker, check: https://bootstrap-datepicker.readthedocs.org/en/latest/options.html

Awesome bootstrap checkbox

Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier. https://github.com/flatlogic/awesome-bootstrap-checkbox

Basic

Supports bootstrap brand colors: .checkbox-primary, .checkbox-info etc.

Checkboxes without label text

Inline checkboxes

Circled

.checkbox-circle for roundness.

Radio

Supports bootstrap brand colors: .radio-primary, .radio-danger etc.

Radios without label text

Inline radios