Bootstrap 3 Responsive Form is a very useful html components which is used for send the data to server via get or post method. Now a days 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 label and field.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 botstrap 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>
Verious types of forms
1. Inline form
If we have to sow all the fields and labels in a line then we can use inline form in bootstrap . for that we have to give the class .form-inline in form.
In case of inline form the selest 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 case of horizontal form each form group stays horizontly. 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
Simplly Do not give any label
Selects
Give the class .form-control with a selece tag or dropdown input menu.
Multiple Select
Simply give a multiple attribute 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 Controll:
Make a value staric in a form give a class name .form-control-static to a 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 attributs 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 a html tag then used disabled attributs 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 attributs readonly.
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 in 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 controll coader 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 comment to make the site better. Thanks For Reading
Add a Comment