Comprehensive analysis of how to use Bootstrap forms (form controls)_javascript skills

1. Input box input

Single-line input box, a common text input box, that is, the type attribute value of input is text.

When using input in Bootstrap, you must also add the type type. If the type type is not specified, you will not be able to get the correct style, because the Bootstrap framework uses input[type="?"]

(where ? represents the type type, such as text type, which corresponds to input[type="text"]) to define the style.

In order to make the control style correct in various form styles, you need to add the class name ".form-control".

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

2. Drop-down selection box select

The use of the drop-down selection box in the Bootstrap framework is consistent with the original one. For multi-line selection, set the value of the multiple attribute to multiple.

<form role="form">
<div class="form-group">
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 <div class="form-group">
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
</div>
</form>

3. Text area textarea

The text field is used in the same way as the original one. Setting rows can define its height, and setting cols can set its width.

But if the class name ".form-control" is added to the textarea element, there is no need to set the cols attribute.

Because the width of the form control in the "form-control" style in the Bootstrap framework is 100% or auto.

 <form role="form">
 <div class="form-group">
 <textarea class="form-control" rows="3"></textarea>
 </div>
 </form>

4. Checkbox and radio button

1. Both checkbox and radio are wrapped with labels
2. The checkbox and label are placed in a container named ".checkbox"
3. The radio and label tag are placed in a container named ".radio"

<form role="form">
<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="hate">
不喜欢
</label>
</div>
</form>

5. Check boxes and radio buttons arranged horizontally
1. If checkboxes need to be arranged horizontally, just add the class name ".checkbox-inline" to the label
2. If the radio needs to be arranged horizontally, you only need to add the class name ".radio-inline" to the label

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline">
 <input type="checkbox" value="option1">游戏
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option2">摄影
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option3">旅游
 </label>
 </div>
 <div class="form-group">
 <label class="radio-inline">
 <input type="radio" value="option1" name="sex">男性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option2" name="sex">女性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option3" name="sex">中性
 </label>
 </div>
</form>

6. Form control size
The Bootstrap framework also provides two different class names for controlling the height of form controls. These two class names are:
1. input-sm: Make the control smaller than normal size
2. input-lg: Make the control larger than normal size
These two classes are suitable for input, textarea and select controls in forms.

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">

The above is how to use Bootstrap form controls. More content will be updated in the future. I hope you will continue to pay attention.