Bootstrap_ form _ Form control state

First, the focus of the state

The focus state is implemented by pseudo-class ": Focus". Bootstrap the focus state of a form control in the frame removes the default style of outline and re-adds the shadow effect.

<formrole= "form"class= "Form-horizontal">  <Divclass= "Form-group">    <Divclass= "Col-xs-6">      <inputclass= "Form-control input-lg"type= "text"placeholder= "effect not in focus state">    </Div>    <Divclass= "Col-xs-6">      <inputclass= "Form-control input-lg"type= "text"placeholder= "Focus point State effect">    </Div>  </Div></form>

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

<formrole= "form">  <inputclass= "Form-control input-lg"ID= "Disabledinput"type= "text"placeholder= "form is disabled, cannot be entered"Disabled>  <fieldsetDisabled>    <Divclass= "Form-group">      <label for= "Disabledtextinput">Disabled input Box</label>      <inputtype= "text"ID= "Disabledtextinput"class= "Form-control"placeholder= "No input">    </Div>    <Divclass= "Form-group">      <label for= "Disabledselect">Disabled drop-down box</label>      <SelectID= "Disabledselect"class= "Form-control">        <option>Not selectable</option>      </Select>    </Div>    <Divclass= "checkbox">      <label>        <inputtype= "checkbox">cannot select</label>    </Div>    <Buttontype= "Submit"class= "Btn btn-primary">Submit</Button>  </fieldset></form>

Third, verify the status

When making a form, it is unavoidable to do form validation. It is also necessary to provide a validation state style, which is 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.

<formrole= "form">  <Divclass= "Form-group has-success">    <labelclass= "Control-label" for= "InputSuccess1">Success Status</label>    <inputtype= "text"class= "Form-control"ID= "InputSuccess1"placeholder= "Success Status" >  </Div>  <Divclass= "Form-group has-warning">    <labelclass= "Control-label" for= "InputWarning1">Warning status</label>    <inputtype= "text"class= "Form-control"ID= "InputWarning1"placeholder= "Warning Status">  </Div>  <Divclass= "Form-group has-error">    <labelclass= "Control-label" for= "InputError1">Error status</label>    <inputtype= "text"class= "Form-control"ID= "InputError1"placeholder= "Error status">  </Div></form>

Bootstrap_ form _ Form control state