Bootstrap Form

Bootstrap makes it easy with the simple HTML markup and extended classes for different styles of forms.
Form Layout
Bootstrap provides you with following types of form layouts:

  • Vertical (default) form
  • Inline form
  • Horizontal form

VERTICAL OR BASIC FORM
The basic form structure comes with Bootstrap; individual form controls automatically receive some global styling. To create a basic form do the following:

  • Add a role form to the parent element
  • Wrap labels and controls in a with class .form-group. This is needed for optimum spacing.
  • Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.
<form role="form"> <div class="form-group"> <label for="name">Name</label>
 <input type="text" class="form-control" id="name" placeholder="Enter Name"> </div> <div class="form-group"> <label for="inputfile">File input</label> <input type="file" id="inputfile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out 
</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>

Output: VERTICAL OR BASIC FORM

Example block-level help text here.

INLINE FORM
To create a form where all of the elements are inline, left aligned and labels are alongside, add the class .form-inline to the tag.

<form class="form-inline" role="form"> <div class="form-group"> 
<label class="sr-only" for="name">Your Name</label> <input type="text" class="form-control" id="name" placeholder="Enter Your Name"> </div> <div class="form-group"> <label class="sr-only" for="inputfile">File input</label> <input type="file" id="inputfile"> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div>
 <button type="submit" class="btn btn-default">Submit</button> </form>

Output: INLINE FORM

  • By default Inputs, selects, and textareas have 100% width in Bootstrap. You need to set a width on the form controls when using inline form.
  • Using the class .sr-only you can hide the labels of the inline forms

HORIZONTAL FORM
Horizontal forms stands apart from the others not only in the amount of markup, but also in the presentation of the form. To create a form that uses the horizontal layout, do the following

  • Add a class of .form-horizontal to the parent <form> element.
  • Wrap labels and controls in a <div> with class .form-group.
  • Add a class of .control-label to the labels.
<form class="form-horizontal" role="form">
 <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">Yourn First Name</label> 
<div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="Plz Enter First Name">
 </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">Last Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="Enter Last Name"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>

Output: HORIZONTAL FORM

Creating Inline Form Layout
Sometimes you might require to place the form controls side-by-side to compact the layout. You can do this easily by adding the Bootstrap class .form-inline to the <form>element.
Example

<form class="form-inline">
    <div class="form-group">
    <label class="sr-only" for="inputEmail">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
    <label class="sr-only" for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
    </div>
     <button type="submit" class="btn btn-primary">Login</button>
 </form>

The output of the above example will look something like this:



Static Form Control
There might be a situation when you need to place just plain text next to a form label instead of a form control. You can do this within a horizontal form layout by using the .form-control-static class
Example

 <form class="form-horizontal">
 <div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
 <p class="form-control-static">harrypotter@mail.com</p>
 </div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-2">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
 </div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
 </div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>

The output of the above example will look something like this:

shiksha360@gmail.com

Height sizing of Inputs and Select Boxes
You can easily control the height of your input and select boxes to match the button sizes. The Bootstrap’s relative sizing classes like .input-lg, .input-sm

 <form>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control input-lg" placeholder="Larger input">
</div>
<div class="col-xs-6">
<select class="form-control input-lg">
<option>Larger select</option>
</select>
</div>
</div>
<br>
<div class="row">
 <div class="col-xs-6">
<input type="text" class="form-control" placeholder="Default input">
</div>
<div class="col-xs-6">
<select class="form-control">
<option>Default select</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control input-sm" placeholder="Smaller input">
</div>
<div class="col-xs-6">
<select class="form-control input-sm">
<option>Smaller select</option>
</select>
</div>
</div>
</form>

Extending Form Controls with Bootstrap
Bootstrap includes some other useful form components to make your form more attractive.
Creating Prepended and Appended Inputs
You can add text and icons or buttons before or after any text-based input.
To prepend or append text and icons to an input:

  • Warp the text or icon within a <span>element having the class .input-group-addon and place it before or after the <input> element.
  • Wrap both the <span>and text-based element and apply the class .input-group on it.

Example

<form>
<div class="row">
<div class="col-xs-4">
        <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
        <input type="text" class="form-control" placeholder="Username">
        </div>
        </div>
        <div class="col-xs-4">
         <div class="input-group">
 <input type="text" class="form-control" placeholder="Amount">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">$</span>
            <input type="text" class="form-control" placeholder="US Dollar">
            <span class="input-group-addon">.00</span>
                </div>
            </div>
        </div>
    </form>

The output of the above example will look something like this:


.00
$

.00

Creating Button Dropdowns
You can also create dropdown buttons if you want to do more than one action from a button
Example

<form>
        <div class="row">
            <div class="col-xs-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>

The output of the above example will look something like this:

Creating Segmented Dropdown Button Groups

Similarly you can define the segmented dropdown button group where dropdown button is placed besides the other buttons.
Example

   <form>
        <div class="row">
            <div class="col-xs-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>

The output of the above example will look something like this:


Toggle Dropdown


Toggle Dropdown

Creating Disabled Inputs
To create disabled inputs just add the attributes disabled to the element and Bootstrap will do the rest.
Example

<form>
<input type="text" class="form-control" placeholder="Disabled input" disabled="disabled">
 </form>

The output of the above example will look something like this:

Similarly you can add the readonly attribute on input elements to create read only input controls that prevent user inputs and give the style same as disabled.
Example

<form>
        <input type="text" class="form-control" placeholder="Readonly input" readonly="readonly">
 </form>

Bootstrap Form Validation States
Bootstrap provides easy to use and powerful mechanism for styling input controls to present different validation states. Bootstrap includes validation styles for error, warning, and success messages. To use, just add the appropriate class to the surrounding .form-group.
Example

   <form class="form-horizontal">
        <div class="form-group has-success">
            <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
            <div class="col-xs-10">
                <input type="text" id="inputSuccess" class="form-control" placeholder="Input with success">
                <span class="help-block">Username is available</span>
            </div>
        </div>
        <div class="form-group has-warning">
            <label class="col-xs-2 control-label" for="inputWarning">Password</label>
            <div class="col-xs-10">
                <input type="password" id="inputWarning" class="form-control" placeholder="Input with warning">
                <span class="help-block">Password strength: Weak</span>
            </div>
        </div>
        <div class="form-group has-error">
            <label class="col-xs-2 control-label" for="inputError">Email</label>
            <div class="col-xs-10">
                <input type="email" id="inputError" class="form-control" placeholder="Input with error">
                <span class="help-block">Please enter a valid email address</span>
            </div>
        </div>
    </form>

The output of the above example will look something like this:


Username is available


Password strength: Weak


Please enter a valid email address

 

kinokiste

Admin has written 171 articles