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
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input id="exampleInputEmail1" class="form-control" type="email" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input id="exampleInputPassword1" class="form-control" type="password" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input id="exampleInputFile" type="file">
</div>
<div class="help-block">
<p>Example block-level help text here.</p>
</div>
<div class="checkbox">
<input type="checkbox"> Check me out</p>
</div>
<div class="form-group">
<button class="btn btn-default" type="submit">Submit</button>
</div>
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:
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input id="exampleInputName2" class="form-control" type="text" data-blogger-escaped-placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input id="exampleInputEmail2" class="form-control" type="email" data-blogger-escaped-placeholder="jane.doe@example.com">
</div>
<div class="form-group">
<button class="btn btn-default" type="submit">Send invitation</button>
</div>
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:
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input id="inputEmail3" class="form-control" type="email" placeholder="Email">
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input id="inputPassword3" class="form-control" type="password" placeholder="Password">
</div>
</div>
<div class="checkbox">
<input type="checkbox"> Remember me</p>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" type="submit">Sign in</button>
</div>
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:
<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 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:
<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 controls colder 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