1.

Form Control states in Bootstrap

Answer»

DIFFERENT form control states are available in BOOTSTRAP such as input focus, disabled input, READONLY input, etc. It also includes validation styles for errors, warnings, and success messages.

Let us see them ONE by one:

States
Description
Disabled Input
The disabled attribute disables an input field.
Disabled FieldsetThe disabled attribute added to a <fieldset> disable all the controls within the <fieldset>
Input Focus
On receiving focus, the outline is removed and box-shadow is applied.
Error - Validation State
Add .has-error to parent element to SET validation style for error.
Warning - Validation State
Add .has-warning to parent element to set validation style for error.
Success - Validation State
Add .has-success to parent element to set validation style for error.
Readonly Inputs
To set readonly inputs and prevent user from any input, use readonly attribute.

The following is an example that displays some of the states:

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Form Control States</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h2>Form control states</h2>   <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" placeholder="Disabled input" disabled>       </div>     </div>     <div class="form-group has-success has-feedback">       <label class="col-sm-2 control-label" for="inputSuccess">Input with success</label>       <div class="col-sm-10">         <input type="text" class="form-control" id="inputSuccess">       </div>     </div>     <div class="form-group has-warning has-feedback">       <label class="col-sm-2 control-label" for="inputWarning">Input with warning</label>       <div class="col-sm-10">         <input type="text" class="form-control" id="inputWarning">       </div>     </div>     <div class="form-group has-error has-feedback">       <label class="col-sm-2 control-label" for="inputError">Input with error</label>       <div class="col-sm-10">         <input type="text" class="form-control" id="inputError">       </div>     </div>   </form> </div> </body> </html>

The output displays the different states: 


Discussion

No Comment Found

Related InterviewSolutions