Saturday, 25 April 2015

Bootstrap Form Inputs

Supported Form Controls:
Bootstrap supports the following form controls:
  • input
  • textarea
  • checkbox
  • radio
  • select

 

Bootstrap Input:

Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Note: Inputs will NOT be fully styled if their type is not properly declared!
The following example contains two input elements; one of type text and one of type password:
<div class="form-group">
  
<label for="usr">Name:</label>
  
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  
<label for="pwd">Password:</label>
  
<input type="password" class="form-control" id="pwd">
</div>

 

Bootstrap Textarea:

The following example contains a textarea:
<div class="form-group">
  
<label for="comment">Comment:</label>
  
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>

Bootstrap Checkboxes:

Checkboxes are used if you want the user to select any number of options from a list of preset options.
The following example contains three checkboxes. The last option is disabled:
<div class="checkbox">
  
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
  
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Use the .checkbox-inline class if you want the checkboxes to appear on the same line:
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

Bootstrap Radio Buttons:

Radio buttons are used if you want to limit the user to just one selection from a list of preset options.
The following example contains three radio buttons. The last option is disabled:
<div class="radio">
  
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Use the .radio-inline class if you want the radio buttons to appear on the same line:
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

Bootstrap Select List:

Select lists are used if you want to allow the user to pick from multiple options.
The following example contains a dropdown list (select list):
<div class="form-group">
  
<label for="sel1">Select list (Select one):</label>
  
<select class="form-control" id="sel1">
    
<option>1</option>
    
<option>2</option>
    
<option>3</option>
    
<option>4</option>
  
</select>
</div>
<div class="form-group">
  
<label for="sel2">Multiple Select list (hold shift to select more than one):</label>
  
<select class="form-control" id="sel2">
    
<option>1</option>
    
<option>2</option>
    
<option>3</option>
    
<option>4</option>
    <option>5</option>
  
</select>
</div>
If you need to insert plain text next to a form label within a horizontal form, use the .form-control-static class on a <p> element:
<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">
      
<p class="form-control-static">someone@example.com</p>
    
</div>
  
</div>
</form>

 

Bootstrap Form Control States:

  • INPUT FOCUS - The outline of the input is removed and a box-shadow is applied on focus
  • DISABLED INPUTS - Add a disabled attribute to disable an input field
  • DISABLED FIELDSETS - Add a disabled attribute to a fieldset to disable all controls within
  • READONLY INPUTS - Add a readonly attribute to an input to prevent user input
  • VALIDATION STATES - Bootstrap includes validation styles for error, warning, and success messages. To use, add .has-warning,.has-error, or .has-success to the parent element
  • ICONS - You can add feedback icons with the .has-feedback class and an icon
  • HIDDEN LABELS - Add a .sr-only class on non-visible labels
The following example demonstrates some of the form control states above in a Horizontal form:
<form class="form-horizontal" role="form">
  
<div class="form-group">
    
<label class="col-sm-2 control-label">Focused</label>
    
<div class="col-sm-10">
      
<input class="form-control" id="focusedInput" type="text" value="Click to focus">
    
</div>
  
</div>
  
<div class="form-group">
    
<label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
    
<div class="col-sm-10">
      
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
    
</div>
  
</div>
  
<fieldset disabled>
    
<div class="form-group">
      
<label for="disabledTextInput" class="col-sm-2 control-label">Disabled input and select list (Fieldset disabled)</label>
      
<div class="col-sm-10">
        
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
      
</div>
    
</div>
    
<div class="form-group">
      
<label for="disabledSelect" class="col-sm-2 control-label"></label>
      
<div class="col-sm-10">
        
<select id="disabledSelect" class="form-control">
          
<option>Disabled select</option>
        
</select>
      
</div>
    
</div>
  
</fieldset>
  
<div class="form-group has-success has-feedback">
    
<label class="col-sm-2 control-label" for="inputSuccess">
    Input with success and glyphicon
</label>
    
<div class="col-sm-10">
      
<input type="text" class="form-control" id="inputSuccess">
      
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
    
</div>
  
</div>
  
<div class="form-group has-warning has-feedback">
    
<label class="col-sm-2 control-label" for="inputWarning">
    Input with warning and glyphicon
</label>
    
<div class="col-sm-10">
      
<input type="text" class="form-control" id="inputWarning">
      
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    
</div>
  
</div>
  
<div class="form-group has-error has-feedback">
    
<label class="col-sm-2 control-label" for="inputError">
    Input with error and glyphicon
</label>
    
<div class="col-sm-10">
      
<input type="text" class="form-control" id="inputError">
      
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
    
</div>
  
</div>
</form>
And here is an example of some of the form control states in an Inline form:
<form class="form-inline" role="form">
  
<div class="form-group">
    
<label for="focusedInput">Focused</label>
    
<input class="form-control" id="focusedInput" type="text">
  
</div>
  
<div class="form-group">
    
<label for="inputPassword">Disabled</label>
    
<input class="form-control" id="disabledInput" type="text" disabled>
  
</div>
  
<div class="form-group has-success has-feedback">
    
<label for="inputSuccess2">Input with success</label>
    
<input type="text" class="form-control" id="inputSuccess2">
    
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
  
</div>
  
<div class="form-group has-warning has-feedback">
    
<label for="inputWarning2">Input with warning</label>
    
<input type="text" class="form-control" id="inputWarning2">
    
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  
</div>
  
<div class="form-group has-error has-feedback">
    
<label for="inputError2">Input with error</label>
    
<input type="text" class="form-control" id="inputError2">
    
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
  
</div>
</form>



No comments:

Post a Comment