About bootstrap--form controls (disabled form disabled, showing form validation styles)

Source: Internet
Author: User

1, Disabled:

(1) Adding disabled to input allows the form to be disabled,

<input class= "Form-control input-lg" id= "Disabledinput" type= "text" placeholder= "form is disabled and cannot be entered" disabled></ Div>

(2) If fieldset set the Disabled property, the entire domain will be disabled.

class  for class class  for class= "Form-control" ><option> not selectable </option></select></div></fieldset>

2, Legend: If there is an input box in the legend, this input box cannot be disabled ,

<legend><input type= "text" class= "Form-control" placeholder= "Obviously I'm gray, but I'm not banned, don't believe me?" Click to try "/></legend>

3, Form verification status: Add Has-feedback, and add a

<span class= "Glyphiconglyphicon-ok form-control-feedback" ></span>

Label, the small icon appears, and under <input> add <span class= "Help-block" > to display "The correct information you have entered".

<form role= "Form" >
<div class= "Form-group has-success has-feedback" >
<label class= "Control-label" for= "InputSuccess1" > Success Status </label>
<input type= "text" class= "Form-control" id= "InputSuccess1" placeholder= "Success Status" >
<span class= "Help-block" > The information you entered is correct </span>
<span class= "Glyphicon glyphicon-ok form-control-feedback" ></span>
</div>
<div class= "Form-group has-warning has-feedback" >
<label class= "Control-label" for= "inputWarning1" > Warning status </label>
<input type= "text" class= "Form-control" id= "inputWarning1" placeholder= "Warning Status" >
<span class= "Help-block" > Please enter the correct information </span>
<span class= "Glyphicon glyphicon-warning-sign form-control-feedback" ></span>
</div>
<div class= "Form-group has-error has-feedback" >
<label class= "Control-label" for= "InputError1" > Error status </label>
<input type= "text" class= "Form-control" id= "InputError1" placeholder= "Error status" >
<span class= "Help-block" > You are entering the information is wrong </span>
<span class= "Glyphicon glyphicon-remove form-control-feedback" ></span>
</div>
</form>

About bootstrap--form controls (disabled form disabled, showing form validation styles)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.