Bootstrap offers three form layouts: vertical form, inline form, and horizontal form. Let me introduce it to you one by one. Interested friends will learn together.
Create a vertical or basic form:
•・Add role="form" to the parent <form> element.
•・Put the tags and controls in a <div> with class .form-group. This is necessary to get the best spacing.
•・Add class .form-control to all text elements <input>, <textarea> and <select>
<form role="form"><div><label for="name">Name</label><input type="text" id="name"placeholder="Please enter a name"></div><div><label for="inputfile">File input</label><input type="file" id="inputfile"><p>This is an example of block-level help text. </p></div><div><label><input type="checkbox"> Please check</label></div><button type="submit">Submit</button></form>
Inline form:
All elements in the inline form are aligned to the left and the labels are side by side. To create an inline form, you need to add class to the form tag.
.form-inline
<form role="form"><div><label for="name">Name</label><input type="text" id="name"placeholder="Please enter a name"></div><div><label for="inputfile">File input</label><input type="file" id="inputfile"></div><div><label><input type="checkbox">Please check</label></div><button type="submit">Submit</button></form>
The display effect is as follows:
Note: By default, input, select, and textarea in Bootstrap have 100% width. When using inline forms, you need to set a width on the form control.
Horizontal Form: Different from the other two forms, you need to follow the following steps to create a horizontal form.
•Add class .form-horizontal to the parent <form> element.
•Put the tags and controls in a <div> with class .form-group.
•Add class .control-label to the label.
For example:
<form role="form"><div><label for="firstname">Name</label><div><input type="text" id="firstname"placeholder="please enter a first name"></div></div><div><label for="lastname">Last</label><div><input type="text" id="lastname"placeholder="please enter a last name"></div></div><div><label><input type="checkbox"> Remember me</label></div></div><div><div><button type="submit">Login</button></div></div></form>
The above is the complete description of the seventh Bootstrap form layout example code detailed explanation (three forms layouts) introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!