Metronic | Form Stuff - Form Components

THEME COLOR

Layout

Header

Sidebar

Footer

Form Components form components and widgets

Date Pickers

Default Datepicker

Select date

Start With Years

Select date

Months Only

Select month only

Date Range

Select date range

Inline

View Datepicker in modal

Datetime Pickers

Default Datetimepicker

Advance Datetimepicker

Meridian Format

Inline

View Datetimepicker in modal

Time Pickers

Default Timepicker

24hr Timepicker

View Timepicker in modal

Clockface Time Pickers

Input

Button

Inline

View Clockface Time Pickers in modal

Daterangepickers

Default Date Ranges

Advance Date Ranges

Color Pickers

Default

RGBA

As Component

View colorpicker in modal

Select 2 Dropdowns

Fixed Width

Extra Large

.input-xlarge

Large

.input-large

Medium

.input-medium

Small

.input-small

Extra Small

.input-xsmall

Fluid Width

Column 4

.col-md-4

Column 5

.col-md-5

Column 6

.col-md-6

Column 9

.col-md-9

Advance Samples

With Icon

Multi-Value Select

Loading Data

Country List

Tags Support List

Loading Remote Data

View Select2 in modal

Multiple Select

Default

Grouped Options

Searchable

Bootstrap Input MaxLength

Default usage

Maxlength is 25 chars. The badge will show up by default when the remaining chars are 10 or less.

Change the threshold value

Maxlength is 25 chars. Do you want the badge to show up when there are 20 chars or less? Use the threshold option: threshold: 20

Advance usage

This is a complete example where all the options configured for the bootstrap-maxlength counter are setted. Please note: if the alwaysShow option is enabled, the threshold

Textarea

Bootstrap maxlength supports textarea as well as inputs. Even on old IE.

Position

The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left, bottom-left and centered-right. All you need to do is specify the placement option, with one of those strings.

Spinners

Spinner 1

basic example

Spinner 2

disabled state

Spinner 3

with max value: 10

Spinner 4

with step: 5

Form Tools

Google reCaptcha

Incorrect please try again

Enter the words above Enter the numbers you hear

Note: Please visit http://www.google.com/recaptcha to learn more about the Google reCaptcha

Auto Complete

Start typing to auto complete!. E.g: California. To use autocomplete feature include: assets/plugins/bootstrap/js/bootstrap2-typeahead.min.js

Username #1

Check

Type a username(E.g: user1, user2) and check its availability.

Username #2

Type a username(E.g: user1, user2) and check its availability on focus lost

Password

Type a password to check its strength

IP Address Input

IPV4

192.168.120.150

IPV6

3ffe:1900:4545:3:200:f8ff:fe21:67cf

Input Masks

Date 1

y/m/d

Date 2

change the placeholder

Date 3

multi-char placeholder

Phone

(999) 999-9999

Tax ID

99-9999999

Number

mask "9" or mask "99" or ... mask "9999999999"

Currency

123456 => € ___.__1.234,56

Currency 2

123456 => € ___.__1.234,56(left aligned)

SSN

999-99-9999. remove the empty mask on blur or when not empty removes the optional trailing part

Tags Input

Advanced File Input

Default

Advanced

Select file Change Remove

Without input

Select file Change

Image Upload

Select image Change Remove

NOTE! Attached image thumbnail is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 10 only

Bootstrap Markdown Editor

Default Markdown

Inline Editing

This is some editable heading

Well, actually all contents within this "markdown-editable" context is really editable. Just click anywhere!

Click above content to edit it

Fixed Width

Fixed widthe set with data-width="400" html attribute

WYSIWYG Editors

WYSIHTML5 Editor 1

WYSIHTML5 Editor 2

CKEditor