How to Create Bootstrap 3 Responsive Form

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

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.