Bootstrap three forms layout usage _javascript tips

Bootstrap offers three form layouts: vertical forms, inline forms, and horizontal forms
To create a vertical or basic form:
• Add role= "form" to the parent <form> element.
Put labels and controls in a <div> with class. Form-group. This is necessary to obtain optimal spacing.
Add class to all text elements <input>, <textarea> and <select>. Form-control

 <form role= "Form" > 
   <div class= "Form-group" >
    <label for= "name" > name </label> 
    < Input type= "text" class= "Form-control" id= "name" 
      placeholder= "Please enter the name" >
    </div>
   <div class= " Form-group ">
     <label for=" inputfile "> File input </label>
     <input type=" file "id=" Inputfile ">
     <p class= "Help-block" > here is an example of block-level help text. </p>
   </div>
   <div class= "checkbox" >
    <label>
     <input type= "checkbox" > Please tick 
    </label> 
   </div>
    <button type= "Submit" class= "BTN Btn-default" > Submit </ Button>
   </form>

Inline form:
all the elements in the inline form are aligned to the left, with the labels side-by, to create an inline form, you need to add class.form-inline to the form label

 <form class= "Form-inline" role= "form" > 
   <div class= "Form-group" > <label class= "sr-only" for= "
     Name > Name </label>
    <input type= "text" class= "Form-control" id= "name"
      placeholder= "Please enter names" >
    </div>
   <div class= "Form-group" >
    <label class= "sr-only" for= "inputfile" > File input </ label>
    <input type= "file" id= "Inputfile" > 
   </div>
    <div class= "checkbox" >
     <label>
      <input type= "checkbox" > Please tick
     </label>
    </div>
   <button type= " Submit "class=" BTN Btn-default "> Submit </button>
  </form> 

The display effect is as follows:

Note: The input, select, and textarea in Bootstrap are 100% widths by default. When working with inline forms, you need to set a width on the form control.

Horizontal form: differs from the other two forms, and you need to follow these steps to create a horizontal form.
  adds class. Form-horizontal to the parent <form> element. The
  the labels and controls in a <div> with class. Form-group. The
  adds class. Control-label to the label.
  Example:  

<form class= "form-horizontal" role= "form" > <div class= "Form-group" > <label for= "FirstName" class= "Col-sm-2 Control-label" > Name </label> <div class= "col-sm-10" > <input type= "text" class= "Form-co 
    Ntrol "id=" FirstName "placeholder=" Please enter first name > </div> </div> <div class= "Form-group" > <label for= "LastName" class= "Col-sm-2 Control-label" > Surname </label> <div class= "col-sm-10" > &L
    T;input type= "text" class= "Form-control" id= "LastName" placeholder= "Please enter last Name" > </div> </div>
      <div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <div class= "checkbox" > <label> <input type= "checkbox" > Please remember me </label> </div> </div> & lt;/div> <div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <button type= "s Ubmit "class=" btn btn-deFault "> Login </button> </div> </div> </form>
 

The display effect is as follows:

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

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.