Bootstrap form component tutorial _ javascript skills

Common elements of a form include text input box, drop-down selection box, single choice, check box, text field, and button. Next, we will introduce the Bootstrap form component tutorial through this article. If you are interested, let's take a look at the following common elements of the form: text input box, drop-down box, single choice, check box, text field, button, etc. The following are different bootstrap versions:

LESS: forms. less

SASS: _ forms. scss

Bootstrap only customizes fieldset, legend, and label labels in 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 these elements, there are also input, select, textarea and other elements. In the bootstrap framework, you can customize a class name. form-control to achieve the effect.

1. The width is 100%;

2. Set a light gray (# ccc) border.

3. rounded corner with 4px

4. Set the shadow effect and the shadow and border effects change when the element gets the focus.

5. Set the palceholder color to #999.

Inline form

If you want to add a label before input, it will display the line feed of input. If you need to add such a label and do not want the input to wrap, you need to put the label in the container. in form-group, for example:

Email Address

The effect is as follows:

To implement the form join effect, you only need to add the class name. form-inline to the form element. Implementation principle:

Set the form control to an inline block element (display: inline-block) to display the Form Control in one row.

Example:

The effect is as follows:

Have you found that the label is clearly in the Code and is not placed in the container. form-group? The input does not wrap the line. What's more strange is that the label content is not displayed! In fact, the label adds 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 the label is added and the. sr-only class name is added to hide the label, do you have to do this ??? However, this is precisely an advantage of the bootstrap framework. If the label is not set for the input control, the screen reader will not be able to identify it correctly, and it also takes some consideration for people with disabilities.

Horizontal form

The following two conditions must be met to implement the horizontal form effect in bootstrap:

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

2. Grid System with bootstrap framework (details: Bootstrap grid system)

Using the class name. form-horizontal in the form element has the following functions:

1. Set the padding and margin values of Form Controls.

2. Change the representation of. from-group, similar to the row of the grid system.

Css source code:

.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:

The effect is as follows:

Single Row input box

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 = "?"] For example, the text type corresponds to input [type = "text"]

To make the control style good in various form styles, you need to add class name. form-control

Select

Set the value of the multiple attribute to multiple for multiple rows.

Text Field textarea

The text field is the same as the original usage method. You can set rows to define its height and cols to define its width. If the class name is added to the textarea element. form-control, you do not need to set the cols attribute, because in the bootstrap framework. the Base Space of the form-control style is 100% or auto.

Check box checkbox and single-digit radio

Using checkbox and radio in combination with label labels may cause some minor problems (such as alignment problems)

1. Both checkbox and radio are packaged with labels.

2. Put the checkbox together with the label in a container named. checkbox

3. radio and label are placed in a container named. radio. bootstrap mainly uses the. checkbox and. radio styles to process the check box, single-choice 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 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 on the label.

2. If radio needs to be horizontally arranged, you only need to add the class name. radion-inline on the label.

The following 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 ;}
MaleFemaleNeutral

Form control status

1. Focus status:

The focus status is implemented through the pseudo-class: focus. The focus status in the bootstrap Form Control deletes the default outline style and adds the shadow effect again. below is

Css source code:

.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);}

From the source code, we can see that to make the control have the above style effect in the focus state, you need to add class name. form-control to the control.

The effect of the file, radio, and checkbox controls in the focus state is not the same as that of the common input controls. The following is the source code.

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 the attribute disabled to the corresponding form control. 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:

If the disabled attribute is set for fieldset, the entire domain is disabled.

Example:

The effect is as follows: (the disabled icon is displayed when you move the mouse up. Here, the screenshot is taken directly and cannot see this effect)

3. Verification status

Bootstrap provides the following effects:

1. has-warning: the warning status is yellow.

2.. has-error: error Status red

3.. has-success: the success status is green.

You only need to add the status class name on the form-group container. The effect is the same in the three states, but the color is different.

Example:

The effect is as follows:

Sometimes, different icons are provided for different States during form verification. to display the icon in the corresponding state, you only need to add the class name in the corresponding state. has-feedback, pay attention to it and. has-error ,. has-success ,. has-warning is used together.

Every small bootstrap icon is created using @ font-face. For example:

Example:

The effect is as follows:

Form prompt information

Generally, different prompts are required for form verification. In the bootstrap framework, use. help-block to display the prompts in blocks and at the bottom of the control.

The following is the css source code:

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

Example:

The effect is as follows:

If you do not want to add your own code for bootstrap.css, and the design has such a need, you can use the bootstrap grid system, for example:

The above section describes the relevant content of the Bootstrap form component. I hope it will help you!