FORM ELEMENT | BLANKON - Fullpack Admin Theme-后台管理系统模板

Form Elements form elements and more

You are here:

Input Fields

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group no-margin for optimum spacing.

Default Input

Rounded Input

Focus Input

Left Icon

Right Icon

With Spinner

With Spinner Flat

Disabled Input

Read-Only Input

Static control

email@example.com

Block Help Text

A block of help text that breaks onto a new line.

Input with Tooltip

Input with Popover

Placeholder

Input Sizing

Input Tags

Input Fields

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

Default Input

Rounded Input

Focus Input

Left Icon

Right Icon

With Spinner

With Spinner Flat

Disabled Input

Read-Only Input

Static control

email@example.com

Block Help Text

A block of help text that breaks onto a new line.

Input with Tooltip

Input with Popover

Placeholder

Input Sizing

Input Tags

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a .form-control.

Input Groups

Basic examples

.00

$ .00

Sizing

Checkbox & Radio

Button addons

Segmented buttons

Input Groups

Basic examples

.00

$ .00

Sizing

Checkbox & Radio

Button addons

Segmented buttons

A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.

Use the default option, or add multiple to show multiple options at once.

Select Fields

Disabled select menu

Select Sizing

Multiple Select

Chosen Select

Multiple Chosen Select

Select Fields

Disabled select menu

Select Sizing

Multiple Select

Chosen Select

Multiple Chosen Select

The file input plugin allows you to create a visually appealing file or image input widgets.

File Input

File input basic

Example block-level help text here.

File input widget type 1

Select fileChange Remove

File input widget type 2

Select fileChange ×

Image upload widget type 1

Select imageChange Remove

Image upload widget type 2

Select imageChange Remove

Image upload widget type 3

Select imageChange Remove

File Input

File input basic

Example block-level help text here.

File input widget type 1

Select fileChange Remove

File input widget type 2

Select fileChange ×

Image upload widget type 1

Select imageChange Remove

Image upload widget type 2

Select imageChange Remove

Image upload widget type 3

Select imageChange Remove

Form control which supports multiple lines of text. Change rows attribute as necessary.

Textarea

Without character count

Character limit

Textarea autosize

Textarea

Without character count

Character limit

Textarea autosize

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

Form Elements form elements and more

Input Fields

Input Fields

Input Groups

Input Groups

Checkbox

Checkbox

Radio

Radio

Select Fields

Select Fields

File Input

File Input

Textarea

Textarea

Input Grid

1, 412, 101

781, 601

52.2%

67.8%