How to Make Bootstrap 3 Form Inputs

In bootstrap, the form components if properly declared then it will automatically take some property inside class .form-control and the form fields are text, password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, and color.

Textarea:

As other form fields textarea will have some default property and width 100% when its declared as class .form-control and coder can change the row and column of the textarea by declaring inside the textarea.

Example:

Checkboxes and radios:

The checkbox and radio button are also given some property in bootstrap

example:

    

Option one is this and that—be sure to include why it’s great

or

    

Option one is this and that—be sure to include why it’s great

as: to make a textbox or radio button disabled use the class name .disabled with the class name .checkbox or use class .disabled with class .radio on the checkbox container tag.

Example:

    

Option two is disabled

or

    

Option three is disabled

Inline checkbox or inline radio

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

Checkboxes and radios without label text

Simply Do not give any label

Selects

Give the class .form-control with a select tag or dropdown input menu.

Multiple Select

Simply give multiple attributes with the tag named select.

example:

A label: in a from group give a label tag class name to .control-label to make a label.

Static Control:

Make a value static in a form give a class name .form-control-static to an HTML tag inside form group make it static.

Example:

Focus state:

We remove the default outline styles on some form controls and apply a box-shadow in its place for focus.

Disable Status:

To make a form field disabled use the attributes disabled.

Example:

    

Disable Fieldset:

To make the total fieldset disabled inside an HTML tag then used disabled attributes to that HTML tag

Example:

 Can’t check this

Readonly state

To make a form field Readonly use the attributes read-only.

Example:

    

Block-level help text for form controls.

Use help-block to give some helper text inside a form-group

Example:

A block of help text that breaks onto a new line and may extend beyond one line.

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Example:

A block of help text that breaks onto a new line and may extend beyond one line.

Checkbox with success

Checkbox with warning

Checkbox with error

Form field With optional icons

We can give some bootstrap in initial and at the end of the field  and for that, we have to use glyphicon

Example:



(success)

(warning)
(error)
@ (success)

Control sizing

In form control coder can make the sizing also by giving some class as .input-lg .col-lg-* or input-sm etc.

Example:







Please give your comments to make the site better. Thanks For Reading

Share The Post On -

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.