A complete in-depth study of Bootstrap forms

Foreword: Since there are many elements in the form, we will summarize the Bootstrap form separately. As the core content of Bootstrap, the main function of the form is a web control used to communicate with users. A good form design can make the web page communicate with users. Better communication. Common elements in forms mainly include: text input boxes, drop-down selection boxes, radio buttons, check buttons, text fields and buttons, etc.

1. Basic form

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1">邮箱：</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

Detailed explanation:

(1) The role attribute of the form tag is only to enhance the semantics and has no other effect;

(2) Set .form-group for the div The class name is to keep a certain distance between the top and bottom of each input box, otherwise the two will be next to each other;

(3) The for attribute of label and the id of input must have the same name to identify that they are the same group, and when the mouse clicks on the label label, the cursor will automatically lock to the input box. You can also write like this without the for attribute: Email: At this time, the length of the input is not the screen width;

(4) Add the .form-control class to the form:
1. The width is displayed at 100%;
2 .Set a light gray (#ccc) border;
3. Have 4px rounded corners;
4. Set a shadow effect, and when the element is focused, the shadow and border effects will change;

2. Horizontal form (The label is on the left, the input box is on the right)

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
  </div>
 </div>
 <div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default">进入邮箱</button>
  </div>
 </div>
</form>

Specific explanation:

Using the class .form-horizontal on the form tag mainly has the following functions:
1. Set the form control padding and margin values;
2. Change the " The expression form-group" is similar to the "row" of the grid system;
When used, it must be used in conjunction with the grid system to achieve the horizontal effect. Different layouts can be displayed for devices of different widths. When used, Adjust the size of the browser to see different effects. When the browser size is smaller than a certain value, it will display vertically.

3. Inline form (form controls are displayed in one line)

<form class="form-inline" role="form">
 <div class="form-group">
  <label for="exampleInputEmail2">邮箱</label>
  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword2">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

Detailed explanation:
Sometimes we will use the navigation bar at the top of the web page to enter the user name and password. In this case, it needs to be displayed in one line. At this time, give form It can be easily implemented by adding the .form-inline class to the label; at the same time, when the size of the display device is changed, line breaks will occur automatically, showing the style of a normal form.

4. Basic elements of the form

1. Input element: Adding the class .form-control can realize the most basic input box style

(1) Basic input box

<input type="text" class="form-control">

(2) Larger than basic The input box

<input type="text" class="form-control input-lg">

(3) is smaller than the basic input box

<input type="text" class="form-control input-sm">

2. Textarea element: Adding the class .form-control eliminates the need to set the cols attribute value. At this time, the label width is 100%

<textarea rows="5" class="form-control">

3. , select element: consistent with the original, as a drop-down selection box, you can achieve multi-line selection and single-line selection, adding the .form-control class just for the same style

<select class="form-control"><option>222</option></select>

4., checkbox checkbox and radio button radio:

(1) Two classes, .checkbox and .radio, are specially written for checkbox and radio to solve the alignment problem. The following code is displayed vertically

`<form role="form">
 <div class="checkbox">
  <label>
   <input type="checkbox" value="">
   踢足球
  </label>
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox" value="">
   打篮球
  </label>
 </div>
 <div class="radio">
  <label>
   <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
   喜欢
  </label>
 </div>
  <div class="radio">
  <label>
   <input type="radio" name="optionsRadios" id="optionsRadios2" value="h