Completely in-depth learning of Bootstrap forms

Preface: Since there are many elements in the form, the Bootstrap form is summarized separately. The form is the core content of Bootstrap. Its main function is a web control used to communicate with users. A good form design can enable the web page to communicate better with users. 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">Mail：</label>
  <input type="email" class="form-control"  placeholder="Please enter your email address">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">password</label>
  <input type="password" class="form-control"  placeholder="Please enter your email password">
 </div>
 <button type="submit" class="btn btn-default">进入Mail</button>
</form>

Specific explanation:

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

(2) Set the .form-group class name for the div to make the upper and lower parts of each input box be spaced by a certain distance, otherwise the two will be next to each other;

(3) The for attribute of label and the input id must have the same name, in order to identify that they are in the same group. When the mouse clicks on the label label, the cursor will automatically lock to the input box. You can also write this way if you do not use the for attribute: <label>Email: <input type="email" class="form-control" placeholder="Please enter your email address"> </label>. At this time, the length of input is not the screen width;

(4) Add .form-control class to form:
1. Display 100% width;
2. Set a light gray (#ccc) border;
3. Round corners with 4px;
4. Set the shadow effect and the elements are focused, the shadow and border effects will change;

2. Horizontal form (the label is on the left and 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">Mail</label>
  <div class="col-sm-10">
   <input type="email" class="form-control"  placeholder="Please enter your email address">
  </div>
 </div>
 <div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">password</label>
  <div class="col-sm-10">
   <input type="password" class="form-control"  placeholder="Please enter your email password">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default">进入Mail</button>
  </div>
 </div>
</form>

Specific explanation:

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

3. Inline form (the form controls are displayed on one line)

<form class="form-inline" role="form">
 <div class="form-group">
  <label for="exampleInputEmail2">Mail</label>
  <input type="email" class="form-control"  placeholder="Please enter your email address">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword2">password</label>
  <input type="password" class="form-control"  placeholder="Please enter your email password">
 </div>
 <button type="submit" class="btn btn-default">进入Mail</button>
</form> 

Specific explanation:
Sometimes we use the navigation bar at the top of the web page to enter the user name and password. At this time, we need to display it on one line. At this time, adding the .form-inline class to the form tag can be easily implemented; at the same time, when the display device size is changed, the line wrap will automatically occur, and the style of a normal form is presented.

4. Basic elements of the form

1. Input element: Add class.form-control to implement the most basic input box style

(1) Basic input box

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

(2) Input box larger than basic

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

(3) Input box smaller than basic

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

2. Textarea element: Add class.form-control without setting the cols attribute value, 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 realize multi-line selection and single-line selection, plus the .form-control class is just for the same style

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

4. Checkbox and radio button radio:

(1) I specially wrote the .checkbox and .radio classes 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="">
   play soccer
  </label>
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox" value="">
   Play basketball
  </label>
 </div>
 <div class="radio">
  <label>
   <input type="radio" name="optionsRadios"  value="love" checked>
   like
  </label>
 </div>
  <div class="radio">
  <label>
   <input type="radio" name="optionsRadios"  value="hate">
   不like
  </label>
 </div> 
</form>   `

(2) Check boxes and radio boxes are displayed horizontally. At this time, there is no need for .checkbox and .radio classes, but you need to use them simultaneously with the .form-group class, add .check-inline or .radio-inline classes to the label tag.

<form role="form">
 <div class="form-group">
  <label class="checkbox-inline">
   <input type="checkbox" value="option1">game
  </label>
  <label class="checkbox-inline">
   <input type="checkbox" value="option2">photography
  </label>
  <label class="checkbox-inline">
  <input type="checkbox" value="option3">travel
  </label>
 </div>
 <div class="form-group">
  <label class="radio-inline">
   <input type="radio" value="option1" name="sex">male
  </label>
  <label class="radio-inline">
   <input type="radio" value="option2" name="sex">female
  </label>
  <label class="radio-inline">
   <input type="radio" value="option3" name="sex">neutral
  </label>
 </div>
</form>

V. Form verification

<form role="form">
 <div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">Successful status</label>
  <input type="text" class="form-control"  placeholder="Successful Status" >
  <span class="help-block">The information you entered is correct</span>
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning1">Warning status</label>
  <input type="text" class="form-control"  placeholder="Warning Status">
  <span class="help-block">Please enter the correct information</span>
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError1">Error status</label>
  <input type="text" class="form-control"  placeholder="Error Status">
 <span class="help-block">The information you entered is incorrect</span>  
  <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
 </div>
</form>  

Specific explanation:
Add different classes to the div, such as .has-warning warning status, which is displayed in yellow, .has-error error status, which is displayed in red, .has-success success status, which is displayed in green; the .help-block of the first span is the prompt information; the second span is added with a long list of class names after the input box, which is to prompt different icons after the input box. The .form-control-feedback must be used with the .has-feedback of the div, otherwise the icon cannot be displayed inside the input box.

Summary: The above introduces the different display styles of the form and some specific labels of the form. Personally, I think that as a framework, the most important thing is its nested structure. When using it, you need to know which label is nested which label. If you want a different style, you can add your own CSS style, and use it flexibly!