How to use Bootstrap to create a form and bootstrap to create a form

How to use Bootstrap to create a form and bootstrap to create a form

Bootstrap form

In this chapter, we will learn how to use Bootstrap to create a form. Bootstrap uses some simple HTML tags and extended classes to create forms of different styles.

Vertical or basic form

The basic form structure is self-built by Bootstrap. Some Form Controls automatically receive some global styles. The steps for creating a basic form are listed below:

-Add role = "form" to the parent <form> element ".

-Place tags and controls in a class. form-group

. This is required to obtain the optimal spacing.

-Add class. form-control to all text elements <input>, <textarea>, and <select>.

<Form role = "form"> <div class = "form-group"> <label for = "name"> name </label> <input type = "text" class = "form-control" id = "name" placeholder = "enter a name"> </div> <div class = "form-group"> <label for = "inputfile"> file input </label> <input type = "file" id = "inputfile"> <p class = "help-block"> here is an instance of block-level help text. </P> </div> <div class = "checkbox"> <label> <input type = "checkbox"> check </label> </div> <button type = "submit" class = "btn-default"> submit </button> </form>

Effect

Inline form

To create a form, all its elements are inline and aligned to the left. labels are side by side. Add class. form-inline to the <form> label.

<Form class = "form-inline" role = "form"> <div class = "form-group"> <label class = "sr-only" for = "name"> name </label> <input type = "text" class = "form-control" id = "name" placeholder = "enter a name"> </div> <div class = "form-group"> <label class = "sr-only" for = "inputfile"> file input </label> <input type = "file" id = "inputfile"> </div> <div class = "checkbox"> <label> <input type = "checkbox"> check </label> </div> <button type = "submit" class = "btn-default"> submit </button> </form>

 

-By default, the input, select, and textarea values in Bootstrap are 100% in width. When using inline forms, you need to set a width on the Form Control.

-Using class. sr-only, you can hide the labels of inline forms.

Horizontal form

The horizontal form and other forms not only have different numbers of tags, but also have different forms. To create a horizontal layout form, follow these steps:

-Add class. form-horizontal to the parent <form> element.
-Place tags and controls in a <div> with class. form-group.
-Add class. control-label to the label.

<Form class = "form-horizontal" role = "form"> <div class = "form-group"> <label for = "firstname" class = "col-sm-2 control-label"> name </label> <div class = "col-sm-10"> <input type = "text" class = "form-control" id = "firstname" placeholder = "enter a name"> </div> <div class = "form-group"> <label for = "lastname" class = "col-sm-2 control-label"> surname </label> <div class = "col-sm-10"> <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter the last name"> </div> </div> <div class = "form-group"> <div class = "col-sm-offset-2 col-sm-10"> <div class = "checkbox"> <label> <input type = "checkbox"> remember me </label> </div> <div class = "form-group"> <div class = "col-sm-offset-2 col-sm-10"> <button type = "submit" class = "btn-default"> logon </button> </div> </form>

Effect

Supported Form Controls

Bootstrap supports the most common form controls, including input, textarea, checkbox, radio, and select.

Input box)

The most common form text field is input in the input box. You can enter most necessary form data. Bootstrap provides support for all native HTML5 input types, including: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. An appropriate type declaration is required so that the input can obtain the complete style.

<Form role = "form"> <div class = "form-group"> <label for = "name"> label </label> <input type = "text" class = "form-control" placeholder = "text input"> </div> </form>

Effect

Text Box (Textarea)

When you need to input multiple rows, you can use the text box textarea. When necessary, you can change the rows attribute (fewer rows = smaller boxes, more rows = larger boxes ).

<Form role = "form"> <div class = "form-group"> <label for = "name"> text box </label> <textarea class = "form-control" rows = "3"> </textarea> </div> </form>

Check box and single-dataset (Radio)

Check boxes and radio buttons are used to allow users to select from a series of pre-set options.

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

-Use. checkbox-inline or. radio-inline class for a series of check boxes and a single sequence to control whether they are displayed on the same line.

The following example demonstrates the two types (default and inline ):

<Label for = "name"> default check box and single-choice button instance </label> <div class = "checkbox"> <label> <input type = "checkbox" value = ""> Option 1 </label> </div> <div class = "checkbox"> <label> <input type = "checkbox" value = ""> Option 2 </ label> </div> <div class = "radio"> <label> <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1 </label> </div> <div class = "radio"> <label> <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2"> Option 2-selecting it will deselect Option 1 </label> </div> <label for = "name"> inline check box and radio button instance </label> <div> <label class = "checkbox-inline"> <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1 </label> <label class = "checkbox-inline"> <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2 </label> <label class =" checkbox-inline "> <input type =" checkbox "id =" inlineCheckbox3 "value =" option3 "> Option 3 </label> <label class =" checkbox-inline "> <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1 </label> <label class = "checkbox-inline"> <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2 </label> </div>

Effect

Select)

If you want users to select from multiple options, but you can select only one option by default, use the selection box.

Use the <select> display list option, which is usually a list of choices that users are familiar with, such as States or numbers.

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

The following example demonstrates the two types (select and multiple ):

<Form role = "form"> <div class = "form-group"> <label for = "name"> select list </label> <select class = "form-control "> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </ option> </select> <label for = "name"> multi-choice selection list </label> <select multiple class = "form-control"> <option> 1 </ option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> </select> </ div> </form>

Effect

Static controls

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

<Form class = "form-horizontal" role = "form"> <div class = "form-group"> <label class = "col-sm-2 control-label"> Email </label> <div class = "col-sm-10"> <p class = "form-control-static"> email@example.com </p> </div> <div class = "form -group "> <label for =" inputPassword "class =" col-sm-2 control-label "> password </label> <div class =" col-sm-10 "> <input type =" password" class = "form-control" id = "inputPassword" placeholder = "enter the password"> </div> </form>

Effect

Form control status

In addition to the focus status (that is, the user clicks input or uses the tab key to focus on input), Bootstrap also defines a style for the disabled input box and provides a class for form verification.

Input box focus

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

Disabled input box

If you want to disable input from an input box, simply add the disabled attribute, which not only disables the input box, it also changes the style of the input box and the style of the mouse pointer when the mouse pointer is hovering over the element.

Disabled field set fieldset

Add the disabled attribute to <fieldset> to disable all controls in <fieldset>.

Verification status

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

The following example demonstrates the status of all controls:

<Form class = "form-horizontal" role = "form"> <div class = "form-group"> <label class = "col-sm-2 control-label"> focus </label> <div class = "col-sm-10"> <input class = "form-control" id = "focusedInput" type = "text" value = "this input box gets focus... "> </div> <div class =" form-group "> <label for =" inputPassword "class =" col-sm-2 control-label "> disable </label> <div class = "col-sm-10"> <input class = "form-control" id = "disabledInput" type = "text" placeholder = "this input box disables input... "disabled> </div> <fieldset disabled> <div class =" form-group "> <label for =" disabledTextInput "class =" col-sm-2 control-label"> disable input (Fieldset disabled) </label> <div class = "col-sm-10"> <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "do not input"> </ div> </div> <div class = "form-group"> <label for = "disabledSelect" class = "col-sm-2 control-label"> disable Select menu (Fieldset disabled) </label> <div class = "col-sm-10"> <select id = "disabledSelect" class = "form-control"> <option> deselected </option> </select> </div> </fieldset> <div class = "form-group has-success"> <label class = "col-sm-2 control-label" for = "inputSuccess"> input successful </label> <div class = "col-sm-10"> <input type = "text" class = "form-control" id = "inputSuccess"> </div> </div> <div class = "form-group has-warning"> <label class = "col-sm-2 control-label" for = "inputWarning"> input warning </label> <div class = "col-sm-10"> <input type = "text" class = "form-control" id = "inputWarning"> </div> <div class = "form -group has-error "> <label class =" col-sm-2 control-label "for =" inputError "> input error </label> <div class =" col-sm-10 "> <input type = "text" class = "form-control" id = "inputError"> </div> </form>

Effect

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:

<Form role = "form"> <div class = "form-group"> <input class = "form-control input-lg" type = "text" placeholder = ". input-lg "> </div> <div class =" form-group "> <input class =" form-control "type =" text "placeholder =" Default input "> </div> <div class = "form-group"> <input class = "form-control input-sm" type = "text" placeholder = ". input-sm "> </div> <div class =" form-group "> </div> <div class =" form-group "> <select class =" form- control input-lg "> <option value =" ">. input-lg </option> </select> </div> <div class = "form-group"> <select class = "form-control"> <option value =" "> default selection </option> </select> </div> <div class =" form-group "> <select class =" form-control input-sm "> <option value = "">. input-sm </option> </select> </div> <div class = "row"> <div class = "col-lg-2"> <input type = "text" class = "form-control" placeholder = ". col-lg-2 "> </div> <div class =" col-lg-3 "> <input type =" text "class =" form-control "placeholder = ". col-lg-3 "> </div> <div class =" col-lg-4 "> <input type =" text "class =" form-control "placeholder = ". col-lg-4 "> </div> </form>

Effect

Form help text

The Bootstrap form control can have a block-level help text on the input box. To add a content block that occupies the entire width, use. help-block after <input>. The following example demonstrates this:

<Form role = "form"> <span> help text instance </span> <input class = "form-control" type = "text" placeholder = ""> <span class = "help-block"> A Long help text block, more than one row, which needs to be extended to the next row. There are a total of two lines of help text in this instance. </Span> </form>

The above section describes how to use Bootstrap to create a form. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!