“This is the 29th day of my participation in the August Gwen Challenge.

About the preface

This article mainly focuses on the form elements in the Bootstrap style. If you are interested, you can also refer to the previous articles to learn the Bootstrap style together. Diggers can view it through the portal.

  • Lists and buttons
  • The navigation bar

The form elements

Individual form controls are automatically assigned some global styles. All ,

The inline form

Adding a.form-inline class to a

element makes its content left-aligned and behaves as an inline-block level control. This only works if the viewport is at least 768px wide (any smaller will cause the form to collapse).

Horizontally arranged forms

By adding a.form-horizontal class to the form and using the Bootstrap preset grid class, you can lay out the Label label and control group side by side. Doing so will change the behavior of.form-group to behave like rows in the grid system, so there is no need to add.row.

Supported controls

The standard form controls that are supported are shown in the form layout example.

Input box

Includes most form controls, text input field controls, and supports all types of HTML5 input controls: Text, password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, and color.

Type declarations must be added

Only input controls with the Type property properly set can be styled correctly.

Copy

<input type="text" class="form-control" placeholder="Text input">
Copy the code

Input control group

To add text content or button controls before or after the text input field , refer to Input Control Groups.

Text field

Form controls that support multiple lines of text. The rows attribute can be changed as needed.

Copy

<textarea class="form-control" rows="3"></textarea>
Copy the code

Multiple selection and single selection boxes

Checkboxes are used to select one or more options from a list, while single boxes (radio) are used to select only one option from multiple options.

Inline radio and multiple boxes

A series of checkbox or radio controls can be arranged on a single line by applying the.checkbox-inline or.radio-inline classes to them.

Static control

If you need to place a line of plain text and a label element on the same line on a form, add the.form-Control-static class to the

element.

Focus state

We removed the default Outline style for some form controls, and then gave the: Focus state a box-shadow attribute.

Disabled state

Setting the Disabled property to the input box prevents it from having any interaction with the user (focus, input, and so on). The disabled input box is lighter in color and the not-allowed mouse state is added.

disabledfieldset

Setting the disabled property for

disables all controls contained in

.

read-only

Setting the readonly property for the input field prevents the user from modifying the contents of the input field. Input boxes in read-only state are lighter in color (like disabled input boxes), but still retain the standard mouse state.

Check the state

Bootstrap defines styles for the validation states of form controls, such as error, warning, and SUCCESS. When used, add.has-warning,.has-error, or.has-success classes to the parent element of these controls. Any.control-label,.form-control, and.help-block elements contained within this element will accept styles for these validation states.