• Problems

  This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

In this chapter we will study how to create forms with ease using Bootstrap.
 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 <form> element.
 ? Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing.
 ? Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.
example:
<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 CHAPTER 8
</label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
 </form>

 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 <form> tag.

 <form class="form-inline" role="form">
<div class="form-group">
 <label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter 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>

 ? 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.
EXAMPLE:
<form class="form-horizontal" role="form">
<div class="form-group">
 <label for="firstname" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="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>





Form Control Sizing

You can set heights and widths of forms using classes like .input-lg and .col-lg-* respectively.

Following example demonstrates this:
<form role="form">
<div class="form-group">
<input class="form-control input-lg" type="text" placeholder=".input-lg"> </div>
<div class="form-group"> <input class="form-control" type="text" placeholder="Default input"> </div>
<div class="form-group"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> </div>
<div class="form-group"> </div>
 <div class="form-group"> <select class="form-control input-lg"> <option value="">.input-lg</option> </select> </div>
<div class="form-group"> <select class="form-control"> <option value="">Default select</option> </select> </div>
 <div class="form-group"> <select class="form-control input-sm"> <option value="">.input-sm</option> </select> </div>
 <div class="row"> <div class="col-lg-2"> <input type="text" class="form-control" placeholder=".col-lg-2"> </div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3"> </div>
<div class="col-lg-4"> <input type="text" class="form-control" placeholder=".col-lg-4"> </div> </div>
</form>


Help Text
 Bootstrap form controls can have a block level help text that flows with the inputs.
To add a full width block of content, use the .help-block after the <input>.

Following example demonstrates this:
<form role="form">
<span>Example of Help Text</span>
 <input class="form-control" type="text" placeholder="">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>