Create the form in the Bootstrap


Refer to the lesson below of Taimienphi.vn to learn how to create a form in Bootstrap or create a form. Also readers can refer to some other Bootstrap lessons on Taimienphi.vn to learn how to create List Group in Bootstrap.


In the previous Bootstrap lessons Taimienphi.vn showed you how to create lists using Bootstrap. In the next lesson below, Taimienphi.vn will guide you how to create forms (forms) in Bootstrap.


Create the form in the Bootstrap

Table of Contents:
1. Create the form (form) in Bootstrap
2. Create the form layout vertically
3. Create form layout horizontally
4. Create inline form layout
5. Create static form control
6. Check box and radio button
6.1. Arrange the checkboxes and radio buttons vertically
6.2. Arrange checkboxes and radio buttons horizontally
7. Create disabled form
8. Create read-only input
9. Specify the column sizes of the Input, Textareas and Select form controls
10. Dimension height of Input control and Select form
11. Position text around the Form Control
12. Create the authentication form using Bootstrap
13. Form Control is supported in Bootstrap

1. Create the form (form) in Bootstrap

HTML forms are an important part of web pages and applications. However, manually creating the layout and styling of forms using CSS is often time-consuming and tedious.

Bootstrap simplifies the styling and alignment of form controls such as labels, input frames, checkboxes, etc. through a set of predefined layers.

Bootstrap offers 3 different types of form layouts (forms), including:

– Vertical form layout (default form layout).

– Form layout horizontally.

– Inline form layout.

2. Create the form layout vertically

This is the default form layout in Bootstrap, where styles are applied to form-control classes without adding any base classes to elements. form.

Classes form-control In this layout format are stacked with labels left-aligned in the top corner.

For example: The following example illustrates how to create a form layout vertically:

I created the form in bootstrap

The result will look like this:

I created the expression in bootstrap 2

Note: All tags included input, textarea and select require class .form-control for general styling. Layer width .form-control is 100%. To change the width of the layer, we can use predefined grid layers.

3. Create form layout horizontally

We can also create form layouts horizontally, where labels and controls are placed side by side using the mesh layers in Bootstrap.

To create the form layout horizontally, we add layers .row on the grade form-group and use mesh layer .col – * – * to specify widths for labels and control buttons.

Do not forget to use the class .col-form-label on the elements label to align the controls on the form. Refer to the example below:

I created the expression in bootstrap 3

The result will look like this:

Create a quick expression in bootstrap 4

4. Create inline form layout

In some cases, if you want to display a series of labels, the control button is in a horizontal row to collapse the layout. To do this, we just need to add the class .form-inline into the element form. However, the inline form layout is only visible in viewport with a minimum width of 576px.

For example: In the following example we will create an inline form layout:

I created the expression in bootstrap 5

The result will look like this:

I created the expression in bootstrap 6

Note: Taimienphi.vn recommends that you add labels to the form input (form) or the screen reader will have problems with the form you create. However, in the case of inline form layout, we can hide the labels using the class .sr-only.

5. Create static form control

In some cases, if you just want to display the value of plain text beside form labels instead of form controls. To do this, we just need to replace the class .form-control by grade .form-control-plaintext and apply the attribute readonly.

The .form-control-plaintext class removes the default styles from the form frame but maintains the margins and padding.

For example: The following example illustrates how to create a static form control:

I created the expression in bootstrap 7

The result will look like this:

I created the expression in bootstrap 8

6. Check box and radio button

The checkboxes (checkboxes) and radio buttons can be arranged vertically or horizontally.

6.1 Arrange checkboxes and radio buttons vertically

To put the checkboxes or radio buttons vertically, ie line by line, we just wrap all the controls in a form group and apply the class. d-block in the card label.

Also we can use alignment utility classes to set the appropriate distance. Such as in the example below.

For example: In this example, the checkboxes and radio buttons are lined up vertically:

I created the expression in bootstrap 9

The result will look like this:

I created the expression in bootstrap 10

6.2 Arrange the checkboxes and radio buttons horizontally

To put the checkboxes and radio buttons horizontally, that is, put them next to each other, we just need to put all the form controls into a form group and use the alignment utility classes to ensure proper spacing. .

Also in this case we don’t need to use class .d-block in the element label.

For example: In the following example we will put the checkboxes and radio buttons horizontally:

I created the expression in bootstrap 11

The result will look like this:

I created the expression in bootstrap 12

7. Create disabled form

To disable form controls like input, textarea, select, we just need to add the properties disabled for these form controls and Bootstrap will do the rest. Refer to the example below:

I created the expression in bootstrap 13

The result will look like this:

I created the expression in bootstrap 14

In case if you want to disable all the controls in form At the same time, we only need to place these controls in the element fieldset and apply the attribute disabled as in the example below:

I created the expression in bootstrap 15

The result will look like this:

I created the expression in bootstrap 16

8. Create read-only input

Also we can add properties readonly in the tags input or textarea to prevent modifying the values ​​of these tags.

For example, in the following example we will add the readonly attribute in the input or textarea tags to create read-only input:

I created the expression in bootstrap 17

The result will look like this:

I created the expression in bootstrap 18

9. Specify the column sizes of the Input, Textareas and Select form controls

To set the size of the form control to the grid size of Bootstrap, we only need to wrap the form controls, ie input, textarea and select in any grid columns or elements and apply grid layers on it.

For example: The following example illustrates how to specify the column sizes of the Input, Textareas and Select control columns:

I created the expression in bootstrap 19

The result will look like this:

I created the expression in bootstrap 20

Tips: Also we can replace the class .form-row while creating the form layout. Class .form-row is a variant of class grid.row In Bootstrap, override the spaces between column contents (gutter) to make the layout clearer and more compact.

10. Dimension height of Input control and Select form

To change the height of the input text and checkboxes to match the size of the buttons, we use classes that specify the height of the form control like .form-control-lg, .form-control-sm on the boxes input and select to specify larger or smaller sizes.

Also don’t forget to apply the layers .col-form-label-sm or .col-form-label-lg on the elements label or legend to change the exact size of the form control.

For example: The following example illustrates how to resize the height of the form control Input and Select:

I created the expression in bootstrap 21

The result will look like this:

I created the expression in bootstrap 22

11. Position text around the Form Control

Adding text around the form controls is also a way to guide users to input the form input correctly. To add text to the form control, we use the class .form-text.

For example:

I created the expression in bootstrap 23

The result will look like this:

I created the expression in bootstrap 24

Similarly, we can also use element small to add text without using layers .form-text.

For example: In the example below we use the small element to add text:

I created the expression in bootstrap 25

The result will look like this:

I created the expression in bootstrap 26

12. Create the authentication form using Bootstrap

Bootstrap 4 provides solutions to quickly and easily authenticate client-side web forms using the browser’s form authentication API to do so.

Forms authentication classes in CSS include : invalid and: valid pseudo-classes. These classes are applied to the elements input, select and textarea.

For example: For the example below:

I created the expression in bootstrap 27

The result will look like this:

I created the expression in bootstrap 28

Note: With the form validation messages in Bootstrap, we must disable the browser default tooltip by adding properties. novalidate for the element form.

Below is a custom JavaScript code that displays error messages and disables form submissions in invalid fields.

I created the expression in bootstrap 29

Tips: to reset the programmed form interface, we just need to delete the class .was-validated from the element form. Bootstrap applies this layer automatically on the form after the user clicks the Submit button.

To require server-side authentication, just use the classes .is-invalid and .is-valid to display items in the frame is valid and invalid. Besides .invalid-feedback and .valid-feedback Also supports these classes.

For example:

I created the expression in bootstrap 30

The result will look like this:

I created the expression in bootstrap 31

Also we can replace the class . {valid | invalid} -feedback by the classes . {valid | invalid} -tooltip to display the response text in a tooltip style.

Make sure to apply the style position: relative or class .position-relative on the parent element to show the responsive tooltip. Refer to the example below:

I created the expression in bootstrap 32

The result will look like this:

I created the expression in bootstrap 33

13. Form Control is supported in Bootstrap

Bootstrap supports all standard HTML control forms as well as HTML5 input forms including datetime, number, email, url, search, range, color, url, …

For example: The example below illustrates how to use the standard form control with Bootstrap.

I created the expression in bootstrap 34

The result will look like this:

I created the expression in bootstrap 35

The above lesson Taimienphi.vn has shown you how to create a form (form) in Bootstrap. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.

https://thuthuat.taimienphi.vn/tao-form-bieu-mau-in-bootstrap-51113n.aspx
In the next Bootstrap lesson, Taimienphi.vn will guide you on how Create custom forms in Bootstrap Please.

.

Add a Comment

Your email address will not be published. Required fields are marked *