When making a form, it is inevitable to do form verification. It is also necessary to provide verification status styles, and these effects are also provided in the Bootstrap framework.
1.has-warning: Warning status (yellow)
2. .has-error: Error status (red)
3. .has-success: Success status (green)
When using it, you only need to add the status class name corresponding to the form-group container.
<form role="form"><div><label for="inputSuccess1">Success Status</label><input type="text" id="inputSuccess1" placeholder="success status"></div><div><label for="inputWarning1">Warning Status</label><input type="text" id="inputWarning1" placeholder="warning status"></div><div><label for="inputError1">Error Status</label><input type="text" id="inputError1" placeholder="Error Status"></div></form>
The running effect is as follows or view the result window on the right:
Many times, when verifying the form, different states will provide different icons, such as success is a check sign (√), error is a cross sign (×), etc. This effect is also provided in the Bootstrap box. If you want the form to display icon in the corresponding state, you only need to add the class name "has-feedback" in the corresponding state. Note that such names are to be with "has-error", "has-warning" and "has-success":
<form role="form"><div><label for="inputSuccess1">Success Status</label><input type="text" id="inputSuccess1" placeholder="success Status" ><span></span></div><div><label for="inputWarning1">Warning Status</label><input type="text" id="inputWarning1" placeholder="Warning Status"><span></span></div><div><label for="inputError1">Error Status</label><input type="text" id="inputError1" placeholder="Error Status"><span></span></div></form>
The running effect is as follows or view the result window on the right:
As can be seen from the renderings, the icons are on the right. The small icons in Bootstrap are all created using @font-face (a section will be introduced in the following content). And you must add a span element to the form:
<span></span>
The above is the form control status (verification status) in Bootstrap introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!