Tạo form (biểu mẫu) trong Bootstrap

Tham khảo bài học dưới đây của Taimienphi.vn để tìm hiểu cách tạo form trong Bootstrap hay tạo biểu mẫu. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học Bootstrap khác trên Taimienphi.vn để tìm hiểu cách tạo List Group trong Bootstrap.

Trong các bài học Bootstrap trước Taimienphi.vn đã hướng dẫn bạn cách tạo danh sách bằng Bootstrap. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ hướng dẫn bạn cách tạo form (biểu mẫu) trong Bootstrap.


Tạo form (biểu mẫu) trong Bootstrap

 

 

Mục Lục bài viết:
1. Tạo form (biểu mẫu) trong Bootstrap
2. Tạo bố cục form theo chiều dọc
3. Tạo bố cục form theo chiều ngang
4. Tạo bố cục form nội tuyến
5. Tạo form control tĩnh
6. Hộp checkbox và nút radio
6.1. Xếp các hộp checkbox và nút radio theo chiều dọc
6.2. Xếp các hộp checkbox và nút radio theo chiều ngang
7. Tạo disabled form
8. Tạo đầu vào chỉ đọc
9. Chỉ định kích thước cột của các form control Input, Textareas và Select
10. Kích thước chiều cao của form control Input và Select
11. Vị trí text xung quanh Form Control
12. Tạo biểu mẫu xác thực bằng Bootstrap
13. Form Control được hỗ trợ trong Bootstrap

 

1. Tạo form (biểu mẫu) trong Bootstrap

Các form (biểu mẫu) HTML là một phần quan trọng trên các trang web và ứng dụng. Tuy nhiên việc tạo bố cục và kiểu dáng các biểu mẫu theo cách thủ công bằng CSS thường mất nhiều thời gian và tẻ nhạt.

Bootstrap đơn giản hóa các quá trình tạo kiểu và căn chỉnh các nút điều khiển biểu mẫu như nhãn, khung đầu vào, hộp kiểm, ... thông qua tập hợp các lớp được xác định trước.

Bootstrap cung cấp 3 loại bố cục form (biểu mẫu) khác nhau, bao gồm:

- Bố cục form theo chiều dọc (bố cục form mặc định).

- Bố cục form theo chiều ngang.

- Bố cục form nội tuyến.

 

2. Tạo bố cục form theo chiều dọc

Đây là dạng bố cục form mặc định trong Bootstrap, trong đó các style được áp dụng cho các lớp form-control mà không cần bổ sung thêm lớp cơ sở nào cho phần tử form.

Các lớp form-control trong dạng bố cục này được xếp chồng lên nhau với các nhãn left-aligned ở góc trên cùng.

Ví dụ: ví dụ dưới đây minh họa cách tạo bố cục form theo chiều dọc:

tao form bieu mau trong bootstrap

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 2

Lưu ý: Tất cả các thẻ bao gồm input, textareaselect đều yêu cầu lớp .form-control để tạo kiểu chung. Chiều rộng lớp .form-control là 100%. Để thay đổi chiều rộng của lớp, chúng ta có thể sử dụng các lớp lưới được xác định trước.

 

3. Tạo bố cục form theo chiều ngang

Ngoài ra chúng ta cũng có thể tạo bố cục form theo chiều ngang, trong đó các nhãn và nút điều khiển được đặt cạnh nhau bằng cách sử dụng các lớp lưới trong Bootstrap.

Để tạo bố cục form theo chiều ngang, chúng ta thêm lớp .row trên các lớp form-group và sử dụng lớp lưới .col-*-* để chỉ định chiều rộng cho các nhãn và nút điều khiển.

Đừng quên sử dụng lớp .col-form-label trên các phần tử label để căn chỉnh các nút điều khiển trong biểu mẫu. Tham khảo ví dụ dưới đây:

tao form bieu mau trong bootstrap 3

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 4

 

4. Tạo bố cục form nội tuyến

Trong một số trường hợp nếu muốn hiển thị một loạt các nhãn, nút điều khiển trên một hàng ngang để thu gọn bố cục. Để làm được điều này, chúng ta chỉ cần thêm lớp .form-inline vào phần tử form. Tuy nhiên bố cục form nội tuyến chỉ hiển thị trong viewport có chiều rộng tối thiểu 576px.

Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo một bố cục form nội tuyến:

tao form bieu mau trong bootstrap 5

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 6

Lưu ý: Taimienphi.vn khuyến cáo bạn nên thêm nhãn cho đầu vào form (biểu mẫu) nếu không trình đọc màn hình sẽ gặp sự cố với form mà bạn tạo. Tuy nhiên trong trường hợp nếu bố cục form nội tuyến, chúng ta có thể ẩn các nhãn bằng cách sử dụng lớp .sr-only.

 

5. Tạo form control tĩnh

Trong một số trường hợp nếu chỉ muốn hiển thị giá trị văn bản thuần túy (plain text) bên cạnh các form label thay vì form control. Để làm được điều này, chúng ta chỉ cần thay thế lớp .form-control bằng lớp .form-control-plaintext và áp dụng thuộc tính readonly.

Lớp .form-control-plaintext loại bỏ các style mặc định khỏi khung biểu mẫu nhưng vẫn giữ nguyên phần lề và phần padding.

Ví dụ: trong ví dụ dưới đây minh họa cách tạo form control tĩnh:

tao form bieu mau trong bootstrap 7

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 8

 

6. Hộp checkbox và nút radio

Hộp checkbox (hộp đánh tích) và các nút radio có thể được xếp theo chiều dọc hoặc chiều ngang.

 

6.1 Xếp các hộp checkbox và nút radio theo chiều dọc

Để xếp các hộp checkbox hoặc nút radio theo chiều dọc, tức là từng dòng một, chúng ta chỉ cần bọc tất cả các control trong một form group và áp dụng lớp d-block trong thẻ label.

Ngoài ra chúng ta có thể sử dụng các lớp tiện ích căn chỉnh để thiết lập khoảng cách phù hợp. Chẳng hạn như trong ví dụ dưới đây.

Ví dụ: trong ví dụ này các hộp checkbox và nút radio được xếp theo hàng dọc:

tao form bieu mau trong bootstrap 9

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 10

 

6.2 Xếp các hộp checkbox và nút radio theo chiều ngang

Để xếp hộp checkbox và nút radio theo chiều ngang, tức là đặt các hộp này cạnh nhau, chúng ta chỉ cần đặt tất cả các form control vào một form group và sử dụng các lớp tiện ích căn lề để đảm bảo khoảng cách phù hợp.

Ngoài ra trong trường hợp này chúng ta không cần sử dụng lớp .d-block trong phần tử label.

Ví dụ: trong ví dụ dưới đây chúng ta sẽ xếp các hộp checkbox và nút radio theo chiều ngang:

tao form bieu mau trong bootstrap 11

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 12

 

7. Tạo disabled form

Để vô hiệu hóa các form control như input, textarea, select, chúng ta chỉ cần thêm các thuộc tính disabled cho các form control này và Bootstrap sẽ thực hiện phần còn lại. Tham khảo ví dụ dưới đây:

tao form bieu mau trong bootstrap 13

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 14

Trong trường hợp nếu muốn vô hiệu hóa tất cả các control trong form cùng một lúc, chúng ta chỉ cần đặt các control này trong phần tử fieldset và áp dụng thuộc tính disabled như trong ví dụ dưới đây:

tao form bieu mau trong bootstrap 15

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 16

 

8. Tạo đầu vào chỉ đọc

Ngoài ra chúng ta có thể thêm thuộc tính readonly trong các thẻ input hoặc textarea để ngăn việc sửa đổi các giá trị của các thẻ này.

Cho ví dụ, trong ví dụ dưới đây chúng ta sẽ thêm thuộc tính readonly trong các thẻ input hoặc textarea để tạo đầu vào chỉ đọc:

tao form bieu mau trong bootstrap 17

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 18

 

9. Chỉ định kích thước cột của các form control Input, Textareas và Select

Để thiết lập kích thước của form control với kích thước cột lưới của Bootstrap, chúng ta chỉ cần bọc các form control, tức là input, textarea select trong các cột lưới hoặc phần tử bất kỳ và áp dụng các lớp lưới trên đó.

Ví dụ: ví dụ dưới đây minh họa cách chỉ định kích thước cột của các fomr control Input, Textareas và Select:

tao form bieu mau trong bootstrap 19

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 20

Mẹo: ngoài ra chúng ta có thể thay thế lớp .form-row trong khi tạo bố cục biểu mẫu. Lớp .form-row là biến thể của lớp grid.row trong Bootstrap, ghi đè các khoảng trắng nằm giữa nội dung cột (gutter) để bố cục trong rõ ràng và gọn hơn.

 

10. Kích thước chiều cao của form control Input và Select

Để thay đổi chiều cao của băn bản đầu vào và các hộp kiểm sao cho phù hợp với kích thước của các nút, chúng ta sử dụng các lớp chỉ định kích thước chiều cao form control như .form-control-lg, .form-control-sm trên các hộp inputselect để chỉ định kích thước lớn hơn hoặc nhỏ hơn.

Ngoài ra đừng quên áp dụng các lớp .col-form-label-sm hoặc .col-form-label-lg trên các phần tử label hoặc legend để thay đổi kích thước nhãnh chính xác cho form control.

Ví dụ: ví dụ dưới đây minh họa cách thay đổi kích thước chiều cao của form control Input và Select:

tao form bieu mau trong bootstrap 21

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 22

 

11. Vị trí text xung quanh Form Control

Thêm văn bản (text) xung quanh các form control cũng là một cách để hướng dẫn người dùng nhập các dữ liệu đầu vào trong biểu mẫu sao cho chính xác. Để thêm văn bản cho form control, chúng ta sử dụng lớp .form-text.

Ví dụ:

tao form bieu mau trong bootstrap 23

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 24

Tương tự, chúng ta cũng có thể sử dụng phần tử small để thêm văn bản mà không cần sử dụng lớp .form-text.

Ví dụ: trong ví dụ dưới đây chúng ta sử dụng phần tử small để thêm văn bản:

tao form bieu mau trong bootstrap 25

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 26

 

12. Tạo biểu mẫu xác thực bằng Bootstrap

Bootstrap 4 cung cấp các giải pháp để xác thực các biểu mẫu web ở phía máy khách một cách nhanh chóng và dễ dàng bằng cách sử dụng API xác thực biểu mẫu của trình duyệt để thực hiện.

Các lớp xác thực biểu mẫu trong CSS bao gồm :invalid :valid pseudo-classes. Các lớp này được áp dụng cho các phần tử input, select textarea.

Ví dụ: cho ví dụ dưới đây:

tao form bieu mau trong bootstrap 27

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 28

Lưu ý: với các thông báo xác thực biểu mẫu trong Bootstrap, chúng ta phải vô hiệu hóa các tooltip phản hồi mặc định của trình duyệt bằng thêm thuộc tính novalidate cho phần tử form.

Dưới đây là mã JavaScript tùy chỉnh hiển thị thông báo lỗi và vô hiệu hóa gửi biểu mẫu trong các trường không hợp lệ.

tao form bieu mau trong bootstrap 29

Mẹo: để reset lại giao diện biểu mẫu theo chương trình, chúng ta chỉ cần xóa lớp .was-validated khỏi phần tử form. Bootstrap áp dụng lớp này tự động trên biểu mẫu sau khi người dùng click chọn nút Submit (gửi).

Để yêu cầu xác thực phía máy chủ, chỉ cần sử dụng các lớp .is-invalid .is-valid để hiển thị các mục trong khung là hợp lệ và không hợp lệ. Ngoài ra .invalid-feedback .valid-feedback cũng hỗ trợ các lớp này.

Ví dụ:

tao form bieu mau trong bootstrap 30

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 31

Ngoài ra chúng ta có thể thay thế các lớp .{valid|invalid}-feedback bằng các lớp .{valid|invalid}-tooltip để hiển thị văn bản phản hồi theo kiểu tooltip.

Cần đảm bảo đã áp dụng style position: relative hoặc lớp .position-relative trên phần tử cha để hiển thị tooltip phản hồi đúng cách. Tham khảo ví dụ dưới đây:

tao form bieu mau trong bootstrap 32

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 33

 

13. Form Control được hỗ trợ trong Bootstrap

Bootstrap hỗ trợ tất cả các form control HTML chuẩn cũng như các dạng đầu vào HTML5 bao gồm datetime, number, email, url, search, range, color, url, ... .

Ví dụ: trong ví dụ dưới đây minh họa cách sử dụng form control chuẩn với Bootstrap.

tao form bieu mau trong bootstrap 34

Kết quả trả về có dạng như dưới đây:

tao form bieu mau trong bootstrap 35

Bài học trên đây Taimienphi.vn vừa hướng dẫn bạn cách tạo form (biểu mẫu) trong Bootstrap. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

https://thuthuat.taimienphi.vn/tao-form-bieu-mau-trong-bootstrap-51113n.aspx
Trong bài học Bootstrap tiếp theo Taimienphi.vn sẽ hướng dẫn tiếp bạn cách tạo form tùy chỉnh trong Bootstrap nhé.

Tác giả: Cao Thắng     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Cách tạo giao diện Responsive cho website với Bootstrap
Tạo Fixed Layout (bố cục cố định) với Bootstrap
Tạo Fluid Layout với Bootstrap
Tạo và chỉnh sửa Button (nút) trong Bootstrap
List Group trong Bootstrap, tác dụng và cách tạo
Từ khoá liên quan:

Tạo form trong Bootstrap

, học Bootstrap, Bootstrap,

SOFT LIÊN QUAN
  • Bootstrap File Input

    Đổi miền nhập file thành giao diện chọn file

    Bootstrap File Input là tiện ích jQuery chuyển đổi miền nhập file cổ điển thành giao diện chọn file chuyên nghiệp. Thay vì chọn và tải lần lượt từng file hay sử dụng nhiều miền tải file giống nhau, các nhà phát triển đã ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá