Bootstrap Form Inputs (more)
Mục Lục
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:
Bootstrap Input Groups
The .input-group
class is a container to enhance an input by adding an icon, text or a button in front or behind it as a “help text”.
The .input-group-addon
class attaches an icon or help text next to the input field.
Text
The .input-group-btn
attaches a button next to an input. This is often used together with a search bar:
Bootstrap Form Control States
Disabled
Success
Warning
Error
- 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=”disabledInput” 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>
Try it Yourself »
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>
Try it Yourself »