How to Create Bootstrap 3 Responsive Form

Bootstrap 3 Responsive Form is a very useful HTML component that is used to send the data to the server via getting or post method. Nowadays 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 labels and fields. 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.

Now a basic example of a bootstrap form

Example block-level help text here.

 Check me out

Various types of forms

1. Inline form

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

In the case of an inline form, the select and input are width 100% and the other are width auto.

Example:

2. Horizontal form:

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

Example:

 Remember me

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.

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 tage 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 controls colder 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.