Bootstrap Form form comprehensive analytic _javascript skill

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

In the background of their own revision, general layout are used bootstrap, the rest of the form part of no reason not to use it, for the form of beautification and layout, Bootstrap do is also very good, have the atmosphere of the border, multi-function buttons and macro form layout, everything is so complete and perfect!

General form

We need to wrap the form elements into the Form-group class, typically <div class= "Form-group" >...</div>, where the content form element name is generally placed in the label label, The input tag class name is Form-control, it is noteworthy that your checkbox and radio elements need to write in their div.

For example, the following form

<form>
 <div class= "Form-group" >
  <label for= "ExampleInputEmail1" >email Address</label >
  <input type= "email" class= "Form-control" id= "exampleInputEmail1" placeholder= "email" >
 </div >
 <div class= "Form-group" >
  <label for= "ExampleInputPassword1" >Password</label>
  <input type= "Password" class= "Form-control" id= "exampleInputPassword1" placeholder= "password" >
 </div >
 <div class= "Form-group" >
  <label for= "Exampleinputfile" >file
  input</label> <input type= "File" id= "Exampleinputfile" > <p class= "help-block" >example block-level help
  text here. </p>
 </div>
 <div class= "checkbox" >
  <label>
   <input type= "checkbox" > Check me Out
  </label>
 </div>
 <button type= "Submit" class= "BTN Btn-default" > Submit</button>
</form>

The effect after running

Horizontal discharge of the form

You need your form elements to be level-emitting, and you can add classes to the form. Form-inline, this form is generally applied when the element is relatively young

For example

<form class= "Form-inline" >
 <div class= "Form-group" > <label class= "sr-only" for= "
  ExampleInputEmail3 ">email address</label>
  <input type=" Email "class=" Form-control "id=" ExampleInputEmail3 "placeholder=" Email ">
 </div>
 <div class=" Form-group ">
  <label class= "Sr-only" for= "ExampleInputPassword3" >Password</label> <input type= "Password"
  Form-control "id=" ExampleInputPassword3 "placeholder=" Password ">
 </div>
 <div class=" CheckBox ">
  <label>
   <input type= checkbox" > Remember me
  </label>
 </div >
 <button type= "Submit" class= "btn btn-default" >sign in</button>
</form>

Common form + element level emission

This table is the largest single, in general user registration, fill in information, often see the following form effects

Implementing this form uses the. Form-horizontal class, each line element is wrapped in <div class= "Form-group" >...</div> can

Form class= "Form-horizontal" > <div class= "Form-group" > <label for= "inputEmail3" class= "Col-sm-2 control-l Abel ">Email</label> <div class=" col-sm-10 "> <input type=" Email "class=" Form-control "id=" Inputemai L3 "placeholder=" Email > </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" CLA ss= "Form-control" id= "InputPassword3" placeholder= "Password" > </div> </div> <div class= "Form-group" "> <div class=" col-sm-offset-2 col-sm-10 "> <div class=" checkbox "> <label> <input typ e= "checkbox" > Remember me </label> </div> </div> </div> <div class= "Form-group" &G
  T <div class= "Col-sm-offset-2 col-sm-10" > <button type= "Submit" class= "btn Btn-default" >sign in</button&
  Gt </div> </dIv> </form> 

We can also see through the code, in the form layout, can also use COL-SM and Col-sm-offset for grid layout !

The above is a small set to introduce the bootstrap form comprehensive analysis, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!