Deep learning bootstrap Form _javascript skills

This article knowledge points from http://www.runoob.com/bootstrap/bootstrap-forms.html, which wrote a more detailed example, here summed up the key to facilitate memory.

One, form layout

1. Vertical form (default)

Add role= "Form" to the parent <form> element.
Put the labels and controls in a <div> with class. Form-group. This is necessary to obtain optimal spacing.
Add Class. Form-control to all text elements <input>, <textarea> and <select>.

<form action= "#" role= "form" > 
  <div class= "Form-group" > 
   <lable> Name: <input class= " Form-control "type=" text "/></lable> 
   <lable> Sex: <input class=" Form-control "type=" text "/> </lable> 
  </div> 
 </form> 

2. Inline form

Add Class. Form-inline to <form> tags;
By default, the input, select, and textarea in Bootstrap have 100% widths. When working with inline forms, you need to set a width on the form control.
Using Class. Sr-only, you can hide the labels for the inline form.

3. Horizontal form

Adds class. Form-horizontal to the parent <form> element.
Put the labels and controls in a <div> with class. Form-group.
Add Class. Control-label to the label.

<form action= "#" role= "form" class= "Form-horizontal" > 
  <div class= "Form-group" > 
   <lable class= "Control-label col-lg-2" > Name:</lable> <div class= "col-lg-10" ><input class= 
   "Form-control" type = "text"/></div> 
 
   <lable class= "Control-label col-lg-2" > Gender:</lable> <div 
   " Col-lg-10 "><input class=" Form-control "type=" text "/></div> 
  </div> 
 </form> 

Second, supported form controls

1. Input box (inputs)

<lable> Name: <input class= "Form-control" type= "text"/></lable>

2. Text box (Textarea) To change the Rows property

<div class= "Form-group" > 
  <textarea rows= "8" class= "Form-control" > 
 
   </textarea> 
 
 </ Div> 

3. check box (checkbox) and Radio Box (Radio)
When creating a form, use a checkbox if you want users to select several options from the list. If you restrict users to only one option, use radio.
Use the. Checkbox-inline or. Radio-inline class for a series of check boxes and radio boxes to control that they appear on the same line.

<div class= "Checkbox-inline" > 
    <lable class= "Control-label" ><input type= "checkbox"/> Basketball </ lable> 
   </div> 
   <div class= "Checkbox-inline" > 
    <lable class= "Control-label" >< Input type= "checkbox"/> Music </lable> 
   </div> 
   <div class= "Checkbox-inline" > 
    < lable class= "Control-label" ><input type= "checkbox"/> painting </lable> 
   </div> 
   <div class= "Radio" > 
    <lable><input type= "Radio"/> Men </lable> 
   </div> 
   <div class= " Radio "> 
    <lable><input type=" Radio "/> Women </lable> 
   </div> 

4. Selection box (SELECT)

Use the <select> Show list option, usually a list of choices that are familiar to users, such as states or numbers.
Use multiple= "multiple" to allow users to select multiple options.

<div class= "Form-group" > 
     <select name= "id=" "class=" Form-control "multiple> <option" value= " 
      ">1</option> 
      <option value=" ">1</option> 
      <option value=" ">1</option> 
      <option value= "" >1</option> 
      <option value= "" >1</option> 
     </select> 
    </div> 

5. Static controls

When you want to place plain text behind a form label in a horizontal form, use class. Form-control-static on <p>.

<div class= "Form-group" > 
  <label class= "col-sm-2 control-label" >Email</label> 
  <div class= "col-sm-10" > 
  <p class= "form-control-static" >email@example.com</p> 
  </div> 
 </div> 

Three, form control state

1. Input Box focus

When the input box input receives: Focus, the outline of the input box is removed and the Box-shadow is applied.

2. The disabled input boxes input

If you want to disable one input box input, simply add the disabled property, which will not only disable the input box, but also change the style of the input box and the style of the mouse pointer when the mouse pointer hovers over the element.

<div> 
  <lable> Name: <input type= "text" Disabled class= "Form-control"/></lable> 
 < /div> 

3. Disabled field set FieldSet

Add the Disabled property to <fieldset> to disable all controls within <fieldset>.

4. Verification status

Bootstrap contains validation styles for errors, warnings, and success messages. You only need to simply add the appropriate class (. has-warning,. Has-error, or. has-success) to the parent element to use the validation status.

<div class= "Has-error" > 
  <lable class= "Control-label" > 
   name: <input type= "text" class= " Form-control "placeholder=" Has-error "/> 
  </lable> 
</div> 
<div class=" Has-warning " > 
  <lable class= "Control-label" > 
   name: <input type= "text" class= "Form-control" placeholder= " Has-warning "/> 
  </lable> 
</div> 

5. Form Control Size

Use class. INPUT-LG (or. input-sm) and. col-lg-* respectively to set the height and width of the form

<div class= "Form-group" > 
  name: <input type= "text" class= "Form-control input-lg" placeholder= "INPUT-LG"/ > 
  Name: <input type= "text" class= "Form-control input-sm" placeholder= "Input-sm"/> 
  name: <input type= " Text "class=" Form-control "placeholder=" normal "/> 
</div>

6. Form Help text

Bootstrap form controls can have a block-level help text on input box input. To add a block of content that occupies an entire width, use the. Help-block after <input>.

<div class= "FORM-GROUNP" > 
  <input type= "text"/> <span class= 
  "Help-block" > 
   Bootstrap Form controls can have a block-level help text on input box input. 
  </span> 
</div> 

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.