Bootstrap Form Inputs (more)

Static Control

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:

Example

<form class=”form-horizontal”>
<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:

Example

<form class=”form-horizontal”>
<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” disabled>
</div>
</div>
<fieldset disabled>
<div class=”form-group”>
<label for=”disabledTextInput” class=”col-sm-2 control-label”>Fieldset disabled</label>
<div class=”col-sm-10″>
<input type=”text” id=”disabledTextInput” class=”form-control”>
</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 icon</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 icon</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 icon</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:

Example

<form class=”form-inline”>
<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>

Leave a Reply

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