Comprehensive parsing of Bootstrap forms using methods (Form control state) _javascript tips

One, Focus state
The focus state is implemented through the pseudo class: focused. The focus state of the form control in the bootstrap frame removes the outline default style and adds the shadow effect again.

<form role= "form" class= "Form-horizontal" >
 <div class= "Form-group" > <div class= "col-xs-6"
 >
 <input class= "Form-control input-lg" type= "text" placeholder= "not focus effect" >
 </div>
 < Div class= "col-xs-6" >
 <input class= "Form-control input-lg" type= "text" placeholder= "focus point State effect" >
 </div>
 </div>
</form>

Second, disabled status
The disabled state of the form control for the bootstrap framework is the same as the normal form disabled state implementation method, adding the property "disabled" on the corresponding form control.

<form role= "Form" > <input class= "Form-control input-lg" id= "Disabledinput" type= "
 text" placeholder= " The form has been disabled and cannot be entered "disabled>
 <fieldset disabled> <div class=" Form-group "
 >
 <label for=" Disabledtextinput > Disabled input box </label>
 <input type= "text" id= "Disabledtextinput" class= "Form-control" placeholder= "no input" >
 </div>
 <div class= "Form-group" >
 <label for= "Disabledselect" > Disable drop-down box </label>
 <select id= "Disabledselect" class= "Form-control" >
 <option> not selectable < /option>
 </select>
 </div>
 <div class= "checkbox" >
 <label>
 <input type= "checkbox" > cannot select
 </label>
 </div>
 <button type= "Submit" class= "BTN" Btn-primary "> Submit </button>
 </fieldset>
</form>

Third, verify the status
When making a form, it is unavoidable to make form validation. You also need to provide validation status styles, which are also available in the bootstrap framework.
1. Has-warning: Warning Status (yellow)
2. Has-error: Error status (red)
3. Has-success: Success status (Green)
You only need to add the State class name on the Form-group container when you use it

<form role= "Form" >
 <div class= "Form-group has-success" > <label class= "Control-label" for= "
 InputSuccess1 "> Success status </label>
 <input type=" text "class=" Form-control "id=" inputSuccess1 "placeholder = "Success Status" >
 </div>
 <div class= "Form-group has-warning" >
 <label class= "Control-label" For= "InputWarning1" > Warning status </label>
 <input type= "text" class= "Form-control" id= "InputWarning1" placeholder= "Warning Status" >
 </div>
 <div class= "Form-group has-error" >
 <label class= " Control-label "for=" InputError1 "> Error status </label>
 <input type=" text "class=" Form-control "id=" InputError1 "placeholder=" error status >
 </div>
</form>

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is a detailed description of the state of the bootstrap form control, and more content will be updated continuously, I hope you continue to pay attention.