Bootstrap Form Components Tutorial detailed _javascript Tips

The most common elements of a form include text entry boxes, Drop-down selection boxes, radio boxes, check boxes, text fields, buttons, and so on. Here are the different versions of Bootstrap:

LESS:forms.less

SASS: _forms.scss

Bootstrap only customize the fieldset, legend, label labels within the form

fieldset {
min-width:0;
padding:0;
margin:0;
border:0;
}
Legend {
display:block;
width:100%;
padding:0;
margin-bottom:20px;
font-size:21px;
Line-height:inherit;
Color: #333;
border:0;
border-bottom:1px solid #e5e5e5;
}
label {
display:inline-block;
margin-bottom:5px;
Font-weight:bold;
}

In addition to this few elements, there are input, select, textarea and other elements, in the bootstrap framework, by customizing a class name. Form-control to achieve the effect

1, the width becomes 100%;

2, set a light gray (#ccc) border

3, with 4px rounded corners

4, set the shadow effect, and the element gets focus, shadow and border effects will change

5, set the color of the Palceholder for #999

Inline form

If you want to add a label label before input, it causes input to wrap, and if you have to add such a label label and do not want input to wrap, you need to place the label label in the container. Form-group, for example:

<div class= "Form-group" >
<label class= "sr-only" > Email address </label>
</div>
<div class= "Form-group" >
<input type= "email" class= "Form-control" placeholder= "Please enter your mailbox number" >
</div>

The effect is as follows:

Implementing a form effect simply adds the class name to the form element. Form-inline can be achieved:

Sets the form control to an inline block element (Display:inline-block) so that the form control is displayed on one line.

Example:

<form class= "Form-inline" >
<div class= "Form-group" >
<label class= "sr-only" > Mailbox </label >
<input class= "Form-control" type= "email" placeholder= "Please enter the mailbox number" >
</div>
<div class= " Form-group ">
<label class=" sr-only "> Password </label>
<input type=" password "class=" Form-control "placeholder=" Please enter password ">
</div>
<div class=" checkbox ">
<label>
<input type= "checkbox" > Remember password
</label>
</div>
<div class= "Form-group" >
<button class= "btn btn-default" > enter mailbox </button>
</div>
</form> 

The effect is as follows:

See the above picture effect did you notice that there was a label tag in the code and it was not placed in the container. Form-group, input will not wrap, more strange is the label label content incredibly not show out! Actually, look closely. The label label is added with the class name. Sr-only, that is, it hides the label to see its source code:

. sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin: -1px;
Overflow:hidden;
Clip:rect (0, 0, 0, 0);
border:0;
}

Now that you have added the label label, add the. Sr-only class name to hide the label, is it superfluous??? But this is just one of the advantages of the bootstrap framework, and if you don't set a label for the input control, the screen reader will not recognize it correctly, but it's also a concern for people with disabilities

Horizontal form

The following two conditions are required to implement the horizontal form effect in bootstrap:

1. Use the class name on the form element. Form-horizontal

2, with the bootstrap framework of the grid system (details: Detailed bootstrap grid system)

Use the class name in the form element. Form-horizontal mainly has the following several functions:

1, set the form control padding and margin values

2, change the expression of from-group, similar to the grid system of row

CSS Source:

. form-horizontal. Control-label,
form-horizontal Radio,.
form-horizontal. CheckBox,
. Form-horizontal. Radio-inline,
form-horizontal checkbox-inline {
padding-top:7px;
margin-top:0;
margin-bottom:0
}
. Form-horizontal. Radio,
. form-horizontal. checkbox {
min-height:27px;
}
. Form-horizontal. Form-group {
margin-right: -15px;
Margin-left: -15px
}
. Form-horizontal. form-control-static {
padding-top:7px;
}
@media (min-width:768px) {
. form-horizontal. Control-label {
text-align:right
}
}
. Form-horizontal. Has-feedback. form-control-feedback {
top:0;
right:15px;
}

Example:

<form class= "Form-horizontal" >
<div class= "Form-group" >
<label class= "Col-sm-2" Control-label "> Mailbox </label>
<div class=" col-sm-10 ">
<input type=" email "class=" Form-control "placeholder=" Please enter the mailbox ">
</div>
</div>
<div class=" Form-group ">
<label class= "col-sm-2 control-label" > Password </label>
<div class= "col-sm-10" >
<input Type = "Password" class= "Form-control" placeholder= "Please enter password" >
</div>
</div>
<div class= " Form-group ">
<div class=" col-sm-10 col-sm-offset-2 ">
<label>
<input type=" CheckBox "> Remember password
</label>
</div>
</div>
<div class=" Form-group ">
<div class= "col-sm-10 col-sm-offset-2" > <button class= "btn
btn-default" > enter mailbox </button>
</div>
</div>

The effect is as follows:

Single Line Input box

You must also add type types when you use input in bootstrap, and you cannot get the correct style if you do not specify type types because the bootstrap frame is passed through input[type= "?". To define the style, such as: text type, corresponding to the input[type= "text"

To make the control look good in a variety of 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>

Dropdown Select box Select

Multiple-line selection setting the Multiple property has a value of 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>

Text field textarea

The text field is the same as the original use method, set rows to define its height, set cols to define its width, and if the TEXTAREA element is added with the class name. Form-control, you do not need to set the Cols property. Because the bootstrap in the frame. Form-control style has a space width of 100% or auto

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

check box checkbox and Radio Box Radio

There are minor problems with checkbox and radio with label labels (such as alignment issues)

<form>
<div class= "checkbox" >
<label>
<input type= "checkbox" > Remember password
< /label>
</div>
<div class= "Radio" >
<label>
<input type= "Radio" name= " Optionsradios "id=" optionsRadios1 "checked> like
</label>
</div>
<div class=" Radio " >
<label>
<input type= "Radio" name= "Optionsradios" id= "OptionsRadios2" > Don't like
</ label>
</div>
</form>

1, whether the checkbox or radio are used label wrapped up

2. The checkbox, along with the label label, is placed in a container named. checkbox

3, radio with label label in a container named. Radio, Bootstrap the use of. CheckBox and. Radio Style to handle check box, radio button and label alignment

. Radio,
. checkbox {
display:block;
min-height:20px;
padding-left:20px;
margin-top:10px;
margin-bottom:10px
}
. Radio label,
. CheckBox label {
display:inline;
Font-weight:normal;
Cursor:pointer
}
. Radio Input[type= "Radio"],
. Radio-inline input[type= "Radio"],
. CheckBox input[type= "checkbox",
. Checkbox-inline input[type= "checkbox"] {
float:left;
Margin-left: -20px
}
. Radio +. Radio,
. CheckBox +. CheckBox {
margin-top: -5px;
}

check boxes and radio buttons are arranged horizontally

1, if the checkbox needs to be arranged horizontally, simply add the class name to the label label. Checkbox-inline

2, if the radio need to arrange horizontally, simply add the class name to the label label. Radion-inline

Below is the CSS source code:

. Radio-inline,
. checkbox-inline {
display:inline-block;
padding-left:20px;
margin-bottom:0;
Font-weight:normal;
Vertical-align:middle;
Cursor:pointer
}
. Radio-inline +. Radio-inline,
. Checkbox-inline +. Checkbox-inline {
margin-top:0;
margin-left:10px;
} 
<div class= "Form-group" >
<label class= "Radio-inline" >
<input type= "Radio" name= "Sex" value = "Option1" > Male
</label>
<label class= "Radio-inline" >
<input type= "Radio" name= " Sex "value=" option2 "> Women
</label>
<label class=" Radio-inline ">
<input type=" Radio "Name=" Sex "value=" Option3 "> Neutral
</label>
</div>

Form control state

1, Focus State:

The focus state is implemented through a pseudo class: Focus, and the bootstrap in the form control removes the default style of the outline, adding the shadow effect again, and the following is

CSS Source:

. form-control:focus {
border-color: #66afe9;
outline:0;
-webkit-box-shadow:inset 0 1px 1pxrgba (0,0,0,.075), 0 0 8px Rgba (102, 175, 233,. 6);
Box-shadow:inset 0 1px 1pxrgba (0,0,0,.075), 0 0 8px Rgba (102, 175, 233,. 6);

As you can see from the source, you need to add the class name to the control to have the above style effect in the focus state. Form-control

<form class= "Form-horizontal" >
<div class= "Form-group" >
<div class= "col-xs-6" >
< Input type= "text" class= "INPUT-LG" placeholder= "effect not in focus State" >
</div> <div class=
"Col-xs-6" >
<input type= "text" class= "Form-control input-lg" placeholder= "effect in Focus State" >
</div>
</div>
</form>

The effect of the file, radio, CheckBox control in the focus state is also not the same as the normal input control, the following is the source

Input[type= "File"]:focus,
input[type= "Radio"]:focus,
input[type= "checkbox"]:focus {
Outline:thin dotted;
outline:5px Auto-webkit-focus-ring-color;
Outline-offset: -2px;
}

2, Disabled Status:

Add a property to the corresponding form control disabled can be, the following is the CSS source code:

. form-control[disabled],
. form-control[readonly],
fieldset[disabled]. Form-control {
cursor: not-allowed;
Background-color: #eee;
opacity:1;
} 
Input[type= "Radio"][disabled],
input[type= "checkbox"][disabled],
. radio[disabled],
. Radio-inline[disabled],
. checkbox[disabled],
. checkbox-inline[disabled],
fieldset[disabled] Input[type= "Radio"],
fieldset[disabled] input[type= "checkbox",
fieldset[disabled]. Radio,
Fieldset[disabled]. Radio-inline,
fieldset[disabled]. CheckBox,
fieldset[disabled]. checkbox-inline {
cursor:not-allowed;
}

Example:

<input type= "text" class= "Form-control" placeholder= "form disabled" disabled>

If the fieldset set the Disabled property, the entire domain is in a disabled state

Example:

<form role= "Form" >
<fieldset disabled>
<div class= "Form-group" >
<label> the input box is disabled </label>
<input type= "text" class= "Form-control" placeholder= "Prohibit entry" >
</div>
< Div class= "Form-group" >
<label> dropdown box has been disabled </label>
<select class= "Form-control" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class= "checkbox" >
<label >
<input type= checkbox > Option box is disabled
</label>
</div>
<button Type= "Submit" class= "BTN btn-primary" > Submit </button>
</fieldset>
</form>

The effect is as follows: (the mouse to move up when the disabled icon, here is a direct cut of the figure can not see this effect)

3, verify the status

Bootstrap offers the following effects:

1. has-warning: Warning Status Yellow

2. Has-error: Wrong state red

3. Has-success: Success status of Green

When using only in the Form-group container on the corresponding add state class name, three states under the effect is the same, but the color is not the same

Example:

<form>
<div class= "Form-group has-success" >
<label> Success Status </label>
<input Type= "text" class= "Form-control" placeholder= "Success Status" >
</div>
<div class= "Form-group has-error" >
<label> Error status </label>
<input type= "text" class= "Form-control" placeholder= "Error status" >
</div>
<div class= "Form-group has-warning" >
<label> Warning status </label>
< Input type= "text" class= "Form-control" placeholder= "Warning State" >
</div>
</form>

The effect is as follows:

Sometimes, in the form of verification of different States will provide a different icon, if you want to display icon in the corresponding state, just add the class name in the corresponding state. Has-feedback, pay attention to it and. Has-error,.has-success. Has-warning used together.

Bootstrap's small icons are made using @font-face. Such as:

<span class= "Glyphicon glyphicon-warning form-control-feedback" ></span>

Example:

<form>
<div class= "Form-group has-success has-feedback" >
<label> Success Status </label>
<input type= "text" class= "Form-control" placeholder= "Success Status" >
<span class= "Glyphicon Glyphicon-ok Form-control-feedback "></span>
</div>
<div class=" Form-group has-error has-feedback " >
<label> Error status </label>
<input type= "text" class= "Form-control" placeholder= "Error status" >
<span class= "Glyphicon glyphicon-remove form-control-feedback" ></span>
</div>
<div class= "Form-group has-warning has-feedback" >
<label> Warning Status </label>
<input type= " Text "class=" Form-control "placeholder=" Warning State ">
<span class=" Glyphicon glyphicon-warning-sign Form-control-feedback "></span>
</div>
</form>

The effect is as follows:

form hint Information

In general, when making form validation, you need to provide different hints, use the. Help-block in the bootstrap framework, display the prompts in a block, and display them at the bottom of the control

Below is the CSS source code:

. help-block {
display:block;
margin-top:5px;
margin-bottom:10px;
Color: #737373;
}

Example:

 <form> <div class= "Form-group has-success has-feedback" > <label> Success Status & lt;/label> <input type= "text" class= "Form-control" placeholder= "Success Status" > <span class= "Help-block" >
The information entered is correct </span> <span class= "Glyphicon glyphicon-ok form-control-feedback" ></span> </div> <div class= "Form-group has-error has-feedback" > <label> error status </label> <input type= "text" class= " Form-control "placeholder=" error status > <span class= "Help-block" > The information entered is incorrect </span> <span class= "Glyphicon Glyphicon-remove form-control-feedback "></span> </div> <div class=" Form-group has-warning
Has-feedback "> <label> 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> </form> 

The effect is as follows:

If you do not want to add your own code for BOOTSTRAP.CSS, and the design has this need, you can use the bootstrap grid system, such as:

<form role= "Form" >
<div class= "Form-group" >
<label class= "Control-label" for= "InputSuccess1" "> Success Status </label>
<div class=" Row ">
<div class=" col-xs-6 ">
<input type=" text " class= "Form-control" id= "InputSuccess1" placeholder= "Success Status" >
</div>
<span class= "Col-xs-6" Help-block "> The information you entered is correct </span>
</div>
</div> 
</form>

The above is a small set to introduce the bootstrap form components of the relevant content, I hope to help you!