Thoroughly learn bootstrap form _javascript skills

Foreword: Because the form element is more, therefore will bootstrap the form individual to make a summary, the form takes the bootstrap the core content, the main function is uses to make the communication with the user a webpage control, the good form design can let the webpage and the user better communication. Common elements in a form include text-entry boxes, Drop-down selection boxes, radio buttons, check buttons, text fields, and buttons.

First, the underlying form

<form role= "Form" >
 <div class= "Form-group" >
  <label for= "ExampleInputEmail1" > Mailbox: </ label>
  <input type= "email" class= "Form-control" id= "exampleInputEmail1" placeholder= "Please enter your email address" >
 </div>
 <div class= "Form-group" >
  <label for= "exampleInputPassword1" > Password </label>
  <input type= "password" class= "Form-control" id= "exampleInputPassword1" placeholder= "Please enter your email password" >
 </div>
 <button type= "Submit" class= "btn Btn-default" > enter mailbox </button>
</form>

Specific explanation:

(1) The role attribute of form label, just for the sake of enhancing semantics, has no other function;

(2) to the DIV set. Form-group class name, is to allow each input box up and down a certain distance, otherwise two will be next to each other;

(3) There is also a label for the property and the ID of the input must have the same name, is to identify that they are a group, and when the mouse clicks the label label, the cursor will automatically lock to the input box, do not use the For property can also write:<label> mailbox: <input Type= "Email" class= "Form-control" placeholder= "Please enter your email address" > </label>, at this time the length of input is not screen width;

(4) Add the. Form-control class to form:
1. width 100% display;
2. Set a light gray (#ccc) border;
3. With 4px rounded corners;
4. Shadows and Border effects change when you set the shadow effect and the elements are focused;

Second, the horizontal form (label on the left, the input box on the right)

<form class= "form-horizontal" role= "form" >
 <div class= "Form-group" >
  <label for= "InputEmail3" "class=" col-sm-2 control-label > Mailbox </label>
  <div class= "col-sm-10" >
   <input type= "Email" class= "Form-control" id= "inputEmail3" placeholder= "Please enter your email address" >
  </div>
 </div>
 <div class= "Form-group" >
  <label for= "InputPassword3" class= "col-sm-2 Control-label" > Password </label>
  <div class= "col-sm-10" >
   <input type= "password" class= "Form-control" id= "InputPassword3" placeholder= " Please enter your email password ">
  </div>
 </div>
 <div class=" Form-group ">
  <div class=" Col-sm-offset-2 col-sm-10 ">
   <button type=" Submit "class=" btn Btn-default "> enter mailbox </button>
  </div>
 </div>
</form>

Specific explanation:

Use the class on the form label. Form-horizontal mainly has the following functions:
1, set the form control padding and margin value;
2, change the "form-group" form of expression, similar to the grid system "row";
In use must be used in conjunction with the grid system in order to achieve the horizontal direction of the effect, for different width of the device display different layout, use can adjust the size of the browser to see different effects, when the browser size is less than a value will be displayed vertically.

Three, inline form (form controls are displayed on one line)

<form class= "Form-inline" role= "form" >
 <div class= "Form-group" >
  <label for= " ExampleInputEmail2 "> Mailbox </label>
  <input type=" email "class=" Form-control "id=" ExampleInputEmail2 " Placeholder= "Please enter your email address" >
 </div>
 <div class= "Form-group" >
  <label for= " ExampleInputPassword2 "> Password </label>
  <input type=" password "class=" Form-control "id=" ExampleInputPassword2 "placeholder=" Please enter your email password ">
 </div>
 <button type=" Submit "class=" btn Btn-default "> Enter mailbox </button>
</form> 

Specific explanation:
Sometimes we use the navigation bar at the top of the page to enter the username and password, and then we need to display it on one line, and then add the form tag to it. The Form-inline class can be easily implemented, and when the display device size is changed, the line wraps automatically, and the style of the normal form.

The basic elements of the form

1, INPUT element: Add Class. Form-control can achieve the most basic style of the input box

(1) Basic input box

<input type= "text" class= "Form-control" >

(2) More than the basic size of the input box

<input type= "text" class= "Form-control input-lg" >

(3) smaller than the basic input box

<input type= "text" class= "Form-control input-sm" >

2, TEXTAREA elements: Add Class. Form-control can not set the Cols property value, the label width is 100%

<textarea rows= "5" class= "Form-control" >

3., select elements: Consistent with the original, as a drop-down selection box, you can implement multiline selection and Single-line selection, plus. Form-control class just for the same style

<select class= "Form-control" ><option>222</option></select>

4. check box checkbox and radio button radio:

(1) Specially written for checkbox and radio. CheckBox and. Radio these two classes are to solve the alignment problem, the following code is displayed vertically

 ' <form role= "form" >
 <div class= "checkbox" >
  <label>
   <input type= "checkbox" Value= " ">
   football
  </label>
 </div>
 <div class=" checkbox ">
  <label>
   < Input type= "checkbox" Value= "" >
   play Basketball
  </label>
 </div>
 <div class= "Radio" >
  <label>
   <input type= "Radio" name= "Optionsradios" id= "optionsRadios1" value= "Love" checked>
   likes
  </label>
 </div>
  <div class= "Radio" >
  <label>
   <input Type= "Radio" name= "Optionsradios" id= "OptionsRadios2" value= "hate" > Dislike
  </label>
 </div > 
</form>   '

(2) check box and radio box horizontal display, you do not need. CheckBox and. Radio class, but with the. Form-group class, Add. check-inline or. Radio-inline class to the label label.

<form role= "Form" >
 <div class= "Form-group" >
  <label class= "Checkbox-inline" >
   < Input type= "checkbox" value= "Option1" > Game
  </label>
  <label class= "Checkbox-inline" >
   < Input type= "checkbox" value= "Option2" > Photography
  </label>
  <label class= "Checkbox-inline" >
  < Input type= "checkbox" value= "Option3" > Tourism
  </label>
 </div>
 <div class= "Form-group" >
  <label class= "Radio-inline" >
   <input type= "Radio" value= "Option1" name= "Sex" > Male
  </label>
  <label class= "Radio-inline" >
   <input type= "Radio" value= "Option2" name= "Sex" > Women
  </label>
  <label class= "Radio-inline" >
   <input type= "Radio" value= "Option3" Name= " Sex "> Neutral
  </label>
 </div>
</form>

V. Validation of forms

<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 > you entered the information is correct </span> <span class= "Glyphicon Glyphicon-ok -feedback "></span> </div> <div class=" Form-group has-warning has-feedback "> <label class=" con Trol-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" > The information you entered is wrong </span> <span class= Glyphicon glyphicon-remove form-control-feedback  

 ></span> </div> </form>

Specific explanation:
To add a different class to the Div, such as. has-warning warning status, displayed as yellow,. Has-error error status, displayed as red,. Has-success success status, displayed as green, first span of. Help-block as hint; the second span plus a long string of class names after the input box Shows a different icon, where. Form-control-feedback must be used with Div. has-feedback, otherwise the icon cannot be displayed inside the input box.

Summary: The above describes the different display style of the form, as well as the specific label of the form, personally feel that as a framework, the most important is its nesting structure, when you need to know which tags nested which tags. Want a different style, you can add their own CSS style, in short, flexible use it!