Seventh bootstrap form Layout instance code explanation (three form layout) _javascript tips

Bootstrap provides three form layouts: vertical forms, inline forms, and horizontal forms. The following one to introduce you, interested friends to study together.

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, and the labels are side-by. To create an inline form, you need to add class to the form label

. form-inline

<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: Unlike the other two forms, you need to follow these steps to create a horizontal form.

• Add Class. Form-horizontal to the parent <form> element.

• Place labels and controls in a <div> with class. Form-group.

• Add Class. Control-label to the label.

For 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-control" id= "FirstName"
placeholder= "Please enter name" >
</div>
</div>
<div class= "Form-group" >
<label for= "LastName" class= "Col-sm-2 Control-label" > Surname </label>
< Div class= "col-sm-10" > <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>
</div>
<div class= "Form-group" >
<div class= "Col-sm-offset-2 col-sm-10" >
<button type= "Submit" class= "btn btn-default" > Login </ button>
</div>
</div>
</form>

The above is a small part of the introduction of the seventh Bootstrap form layout example code details (three form layout) of all the narrative, 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!