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:
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