Saturday, 25 April 2015

Bootstrap Forms



Bootstrap's Default Settings:
Form controls automatically receive some global styling with Bootstrap. All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Bootstrap Form Layouts:

Bootstrap provides three types of form layouts:
  • Vertical form (this is default)
  • Horizontal form
  • Inline form
Standard rules for all three form layouts:
  • Always use <form role="form"> (helps improve accessibility for people using screen readers)
  • Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
  • Add class .form-control to all textual <input>, <textarea>, and <select> elements

Bootstrap Vertical Form (default):

The following example creates a vertical form with two input fields, one checkbox, and a submit button:
<form role="form">
  
<div class="form-group">
    
<label for="email">Email address:</label>
    
<input type="email" class="form-control" id="email" placeholder="Enter email">
  
</div>
  
<div class="form-group">
    
<label for="pwd">Password:</label>
    
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
  
</div>
  
<div class="checkbox">
    
<label><input type="checkbox"> Remember me</label>
  
</div>
  
<button type="submit" class="btn btn-default">Submit</button>
</form>


Bootstrap Inline Form:

In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.
Note: This only applies to forms within viewports that are at least 768px wide!
Additional rule for an inline form:
  • Add class .form-inline to the <form> element
The following example creates an inline form with two input fields, one checkbox, and one submit button:
<form class="form-inline" role="form">
  
<div class="form-group">
    
<label for="email">Email address:</label>
    
<input type="email" class="form-control" id="email" placeholder="Enter email">
  
</div>
  
<div class="form-group">
    
<label for="pwd">Password:</label>
    
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
  
</div>
  
<div class="checkbox">
    
<label><input type="checkbox"> Remember me</label>
  
</div>
  
<button type="submit" class="btn btn-default">Submit</button>
</form>


Tip: If you don't include a label for every input, screen readers will have trouble with your forms. You can hide the labels for all devices, except screen readers, by using the .sr-only class:
<form class="form-inline" role="form">
  
<div class="form-group">
    
<label class="sr-only" for="email">Email address:</label>
    
<input type="email" class="form-control" id="email" placeholder="Enter email">
  
</div>
  
<div class="form-group">
    
<label class="sr-only" for="pwd">Password:</label>
    
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
  
</div>
  
<div class="checkbox">
    
<label><input type="checkbox"> Remember me</label>
  
</div>
  
<button type="submit" class="btn btn-default">Submit</button>
</form>

 Bootstrap Horizontal Form

A horizontal form stands apart from the other forms both in the amount of markup, and in the presentation of the form.
Additional rules for a horizontal form:
  • Add class .form-horizontal to the <form> element
  • Add class .control-label to all <label> elements
Tip: Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
The following example creates a horizontal form with two input fields, one checkbox, and one submit button:
<form class="form-horizontal" role="form">
  
<div class="form-group">
    
<label class="control-label col-sm-2" for="email">Email:</label>
    
<div class="col-sm-10">
      
<input type="email" class="form-control" id="email" placeholder="Enter email">
    
</div>
  
</div>
  
<div class="form-group">
    
<label class="control-label col-sm-2" for="pwd">Password:</label>
    
<div class="col-sm-10"> 
      
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
    
</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">Submit</button>
    
</div>
  
</div>
</form>








No comments:

Post a Comment