Bootstrap supported form control instances detailed _javascript tips

The form controls supported by Bootstrap are as follows:

Bootstrap supports the most common form controls, mainly input, textarea, checkbox, Radio, and select.

Enter box (input)

The most common form text fields are input box inputs. Users can enter most of the necessary form data in them. Bootstrap provides support for all native HTML5 input types, including: text, Password, datetime, datetime-local, date, month, time, week, number, email, URLs, search, tel, and color. The appropriate type declaration is required in order for input to get the full style.

<! DOCTYPE html>
 
 

The results are as follows:

text Box (Textarea)

When you need to make multiple lines of input, you can use the text box textarea. You can change the Rows property if necessary.

<! DOCTYPE html>
 
 

The results are as follows:

check box (checkbox) and Radio Box (Radio)

check boxes and radio buttons allow users to select from a set of preset options.

When creating a form, use a checkbox if you want users to select several options from the list. If you restrict users to only one option, use radio.

Use the. Checkbox-inline or. Radio-inline class for a series of check boxes and radio boxes to control that they appear on the same line.

The following examples demonstrate both types (default and inline):

<! DOCTYPE html>  

The results are as follows:

check boxes and radio buttons

Use the selection box when you want users to choose from multiple options, but only one option is selected by default.

Use the <select> Show list option, usually a list of choices that are familiar to users, such as states or numbers.

Use multiple= "multiple" to allow users to select multiple options.

The following examples demonstrate both types (select and multiple):

<! DOCTYPE html>  

The results are as follows:

static controls

When you want to place plain text behind a form label in a horizontal form, use class. Form-control-static on <p>.

<! DOCTYPE html>  

The results are as follows:

Form control state

In addition to: focus state (that is, the user clicks Input or uses the TAB key to concentrate on the input), Bootstrap also defines the style for the disabled input box, and provides class for the form validation.

Input Box focus

When the input box input receives: Focus, the outline of the input box is removed and the Box-shadow is applied.

Disabled input Box input

If you want to disable one input box input, simply add the disabled property, which not only disables the input box, but also changes the style of the input box and the style of the mouse pointer when the mouse pointer hovers over the element.

Disabled field Set FieldSet

Add the Disabled property to <fieldset> to disable all controls within <fieldset>.

Validation status

Bootstrap contains validation styles for errors, warnings, and success messages. You only need to simply add the appropriate class (. has-warning,. Has-error, or. has-success) to the parent element to use the validation status.

<! DOCTYPE html>  

The results are as follows:

Form Control Size

You can use class. Input-lg and. col-lg-* to set the height and width of the form. The following example demonstrates this:

<! DOCTYPE html>  

The results are as follows:

Yun-Habitat Community Small series to recommend related topics:

Bootstrap component Operation tips

Bootstrap Related Knowledge Summary

These are the form controls that are supported by Bootstrap. Everyone see understand, there are any questions welcome to my message, small series will promptly reply to everyone, but also thank you very much for the cloud-Habitat community website support