Bootstrap _ form _ Form Control and bootstrap Form Control

Bootstrap _ form _ Form Control and bootstrap Form Control

I. input box

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

When using input in Bootstrap, the type must also be added. If the type is not specified, the correct style cannot be obtained, because the Bootstrap framework uses the input [type = "?"]

(Where? Number indicates the type. For example, the text type corresponds to the input [type = "text"]) format to define the style.

To prevent style errors 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>

 

 

Ii. select

The drop-down box in the Bootstrap framework is consistent with the original one. For multiple rows, 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. textarea

The text field is the same as the original usage method. You can set rows to define its height and cols to set its width.

However, if the class name". Form-controL "class name, you do not need to set the cols attribute.

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

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

 

 

Iv. Check box checkbox and single-choice button radio

1. Both checkbox and radio are packaged with labels.
2. checkbox and label are placed in a. Checkbox"In the container
3. radio and label are placed in a. Radio"In the container

<Form role = "form"> <div class = "checkbox"> <label> <input type = "checkbox" value = ""> Remember password </label> </div> <div class = "radio"> <label> <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "love" checked> like </label> </div> <div class = "radio"> <label> <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "hate"> NO like </label> </div> </form>

 

5. Check box and radio button horizontal arrangement

1. If the checkbox needs to be horizontally arranged, you only need to add the class name". Checkbox-inline"
2. If radio needs to be horizontally arranged, you only need to add the class name". Radio-inline"

<Form role = "form"> <div class = "form-group"> <label class = "checkbox-inline"> <input type = "checkbox" value = "option1"> games </label> <label class = "checkbox-inline"> <input type = "checkbox" value = "option2"> photography </label> <label class = "checkbox "-inline "> <input type =" checkbox "value =" option3 "> tourism </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>

 

 

 

6. Form Control size

The Bootstrap framework also provides two different class names to control the height of Form Controls. The two classes are:
1. input-sm: make the control smaller than normal
2. input-lg: make the control larger than normal

These two classes apply to the input, textarea, and select controls in the form.

<Input class = "form-control input-lg" type = "text" placeholder = "add. input-lg, control grows "> <input class =" form-control "type =" text "placeholder =" normal size "> <input class =" form-control input-sm "type =" text "placeholder =" add. input-sm, the control becomes smaller ">