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:
<input type="checkbox" data-blogger-escaped-value="">
Option one is this and that—be sure to include why it’s great
or
<input id="optionsRadios1" name="optionsRadios" type="radio" value="option1" data-blogger-escaped-checked="">
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:
<input type="checkbox" data-blogger-escaped-disabled="" data-blogger-escaped-value="">
Option two is disabled
or
<input id="optionsRadios3" name="optionsRadios" type="radio" value="option3" data-blogger-escaped-disabled="">
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:
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
</div>
<div class="col-sm-10">
<div class="form-control-static">
<p>email@example.com</p>
</div>
</div>
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:
<input id="disabledInput" class="form-control" type="text" data-blogger-escaped-disabled="" data-blogger-escaped-placeholder="Disabled input here...">
Disable Fieldset:
To make the total fieldset disabled inside an HTML tag then used disabled attributes to that HTML tag
Example:
<fieldset data-blogger-escaped-disabled="">
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input id="disabledTextInput" class="form-control" type="text" data-blogger-escaped-placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<div class="checkbox">
<input type="checkbox"> Can’t check this</p>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</fieldset>
Readonly state
To make a form field Readonly use the attributes read-only.
Example:
<input class="form-control" type="text" data-blogger-escaped-placeholder="Readonly input here…" data-blogger-escaped-readonly="">
Block-level help text for form controls.
Use help-block to give some helper text inside a form-group
Example:
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
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:
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input id="inputSuccess1" class="form-control" type="text" data-blogger-escaped-aria-describedby="helpBlock2">
</div>
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input id="inputWarning1" class="form-control" type="text">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input id="inputError1" class="form-control" type="text">
</div>
<input id="checkboxSuccess" type="checkbox" value="option1">
<p>Checkbox with success</p>
<input id="checkboxWarning" type="checkbox" value="option1">
<p>Checkbox with warning</p>
<input id="checkboxError" type="checkbox" value="option1">
<p>Checkbox with error</p>
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:
<label class="control-label" for="inputSuccess2">Input with success</label>
<input id="inputSuccess2" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputSuccess2Status">
<p><span id="inputSuccess2Status" class="sr-only">(success)</span></p>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input id="inputWarning2" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputWarning2Status">
</div>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input id="inputError2" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputError2Status">
</div>
<span id="inputError2Status" class="sr-only">(error)</span>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input id="inputGroupSuccess1" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputGroupSuccess1Status">
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
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:
<input class="form-control input-lg" type="text" data-blogger-escaped-placeholder=".input-lg"> <input class="form-control" type="text" data-blogger-escaped-placeholder="Default input"> <input class="form-control input-sm" type="text" data-blogger-escaped-placeholder=".input-sm"> <select class="form-control input-lg">…</select> <select class="form-control">…</select> <select class="form-control input-sm">…</select>
Please give your comments to make the site better. Thanks For Reading
Add a Comment