In this chapter, we'll learn how to create a form using Bootstrap. Bootstrap can create different styles of forms by using simple HTML tags and extended classes.
Bootstrap form types are divided into three formats: vertical or basic forms, inline forms, horizontal forms.
Vertical or basic form (display:block;)
The basic form structure is Bootstrap, with individual form controls automatically receiving some global styles. The following is a list of steps to create a basic form:
Add role= "Form" to the parent <form> element.
Put the labels and controls in a <div> with class. Form-group. This is necessary to obtain optimal spacing.
Add Class. Form-control to all text elements <input>, <textarea> and <select>.
<!doctype html>
The effect is as follows:
If we remove the Form-control of the Select and add Form-control to input type = "File", see how it works.
Can you see the difference with the above effect? This way you probably understand the role of Form-control, which is to set the perimeter of the border effect, including wide, high, get
The style of the form when the focus is.
Inline form (all on one line, display as Inline-block)
If you need to create a form, all of its elements are inline, left aligned, and the label is side-by, add class to the <form> tag. Form-inline.
Because the head part of the content is the same, so we only list the contents of the body part.
<body style= "padding:20px;" > <form role = "form" class= "Form-inline" > <div class = "Form-group" > <label for = "name" > Name </label> <input type = "text" class = "Form-control" id = "name" placeholder = "Please enter name" ></input> & Lt;/div> <div class = "Form-group" > <label for = "TEL" > Phone number </label> <input type= "text" Class= "Form-control" id = "tel" placeholder = "Please enter your phone number" ></input> </div> <div class = "Form-group
"> <label for =" Idcard > Please upload id </label> <input type = "file" id = "Idcard" ></input> </div> <div class = "Form-group" > <label for = "profession" > select career </label> <select ID
= "profession" class = "Form-control" > <option> software engineer </option> <option> test Engineer </option> <option> Hardware Engineer </option> <option> quality analyst </option> </select> </div>
<div class= "Form-group" > <button type = "Submit" class= "Btn-info btn-lg" > Submit </button> </div> </form> </body>
Display effect:
By default, the input, select, and textarea in Bootstrap have 100% widths. When you use a horizontal form, you need to set a width on the form control.
Using Class. Sr-only, you can hide the labels for inline forms.
Note: Sr-only is shown to screen readers, not to ordinary readers.
Other elements when the form's class is Form-inline, display is inline-block, but input tyoe = "File" is still display:block, you can see that its layout is problematic, At this point, you can set its display as Inline-block;
Horizontal form (form elements such as label and input are on the same line)
A horizontal form differs from the number of other forms that are not labeled, and forms are rendered differently. To create a form that is horizontally laid out, follow these steps:
1. Add Class. Form-horizontal to the parent <form> element.
2. Put the labels and controls in a <div> with class. Form-group.
3, add class to the label. Control-label.
4, set the label and its brother Div width (because input, such as the default width is 100%).
<body style= "padding:20px;" > <form role = "form" class= "Form-horizontal" > <div class = "Form-group" > <label class= "col-sm-" 2 Control-label "for =" Name > name </label> <div class= "col-sm-2" > <input type = "text" class = "F" Orm-control "id =" name "placeholder =" Please enter name "></input> </div> </div> <div class = "Form-group" > <label class= "col-sm-2 control-label" for = "TEL" > Phone number </label> <div class= "COL-SM"
-2 "> <input type=" text class= "Form-control" id = "tel" placeholder = "Please enter your phone number" ></input> </div> </div> <div class = "Form-group" > <label class= "col-sm-2 control-label" for = "Idcar D "> Please upload ID </label> <div class=" col-sm-2 "> <input type =" file "id =" Idcard "style= Ne-block; " ></input> </div> </div> <div class = "Form-group" > <label class= "Col-sm-2 control-label" for = "profession" > select occupation </label> <div class= "Col-sm-2" > <select ID = "profession" class = "Form-control" > <option> software engineer </option> <option> test Engineer </option>
; <option> Hardware Engineer </option> <option> quality analyst </option> </select> </div> </ div> <div class= "Form-group" > <div class= "col-sm-2 col-sm-offset-2" > <button type = "Submit" class= "Btn-info btn-lg" > Submit </button> </div> </div> </form> </body>
Effect:
The above content has introduced the bootstrap to create the form the related content, hoped everybody likes.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
