Bootstrap Forms

Form is a very useful html components which is used for send the data to server via get or post method. Now a days so many users are using mobile for internet browsing so we have to make a form easy to fillup from mobile also .

so bootstrap is given us many classes to make a form in bootstrap.

Inside a form tag we are using the class .form-group as a container of a group of label and field.and using the class form-control in a field to make its width 100%, and in bootstrap the form fields are given some basic property which will automatically work on bootstrap form.

For code and example visit my website

1. Inline form

If we have to sow all the fields and labels in a line then we can use inline form in bootstrap . for that we have to give the class .form-inline in form.

In case of inline form the selest and input are width 100% and the other are width auto.

2. Horizontal form:

In case of horizontal form each form group stays horizontly. to use a horizontal form we can use the class .form-horizontal in a form tag.

Supported controls:

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.

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

Simplly Do not give any label

Selects

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

Multiple Select

Simply give a multiple attribute with the tag named select.

Static Controll:

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

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 attributs disabled.

Disable Fieldset:

To make the total fieldset disabled inside a html tag then used disabled attributs to that html tag

Readonly state

To make a form field Readonly use the attributs readonly.

Block level help text for form controls.

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

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.

Form field With optional icons

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

Control sizing

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

For code and example visit my website