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

    Email address
    


    Password
    


    File input
    


    
Example block-level help text here.


     Check me out


    Submit

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:

    Name
    


    Email
    


    Send invitation

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:

    Email

    
    

    Password

    



     Remember me


    Sign in


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:

    Email



    
[email protected]


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:
 Disabled input 
 Disabled select menu
  Can’t check this
Submit
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:

    Input with success
    

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

    Input with warning
    


    Input with error
    


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:
Input with success

(success)

Input with warning


(warning)

    Input with error
    

(error)

Input group with success


@

(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