Các biểu mẫu HTML là một phần không thể thiếu của các trang web và ứng dụng, nhưng việc tạo bố cục biểu mẫu hoặc tạo kiểu cho các điều khiển biểu mẫu theo cách thủ công từng cái một bằng CSS thường rất nhàm chán và tẻ nhạt. Bootstrap đơn giản hóa rất nhiều quá trình tạo kiểu và căn chỉnh các điều khiển biểu mẫu như nhãn, trường nhập, hộp chọn, vùng văn bản, nút, v.v. thông qua tập hợp các lớp được xác định trước
Bootstrap cung cấp ba loại bố cục biểu mẫu khác nhau
- Biểu mẫu dọc [bố cục biểu mẫu mặc định]
- Dạng ngang
- Biểu mẫu nội tuyến
Phần sau đây sẽ cung cấp cho bạn tổng quan chi tiết về tất cả các bố cục biểu mẫu này cũng như từng thành phần Bootstrap liên quan đến biểu mẫu khác nhau. chúng ta hãy bắt đầu
Tạo bố cục biểu mẫu dọc
Để tạo bố cục biểu mẫu dọc, chỉ cần sử dụng các lớp tiện ích lề được xác định trước để nhóm các nhãn, điều khiển biểu mẫu, văn bản biểu mẫu tùy chọn và thông báo xác thực biểu mẫu
Đây là một ví dụ trong đó các điều khiển biểu mẫu được xếp chồng lên nhau theo chiều dọc với các nhãn ở trên cùng
Email
Password
Remember me
Sign in
— Đầu ra của ví dụ trên sẽ giống như thế này
Bạn sẽ tìm hiểu về các hộp kiểm tùy chỉnh và các điều khiển biểu mẫu tùy chỉnh khác trong chương tiếp theo
Ghi chú. Tất cả các điều khiển dạng văn bản, chẳng hạn như
Email
Password
Remember me
Sign in
6 và
Email
Password
Remember me
Sign in
7— Đầu ra của ví dụ trên sẽ giống như thế này
Tuy nhiên, nếu bạn muốn tắt tất cả các điều khiển trong một
cùng một lúc, đặt chúng bên trong một phần tử và áp dụng thuộc tính
Email
Password
Remember me
Sign in
8 cho nó, như trong ví dụ sau
Email
Password
Remember me
Sign in
— Đầu ra của ví dụ trên sẽ giống như thế này
Tạo đầu vào chỉ đọc
Bạn cũng có thể thêm thuộc tính boolean
Email
Password
Remember me
Sign in
9 trên đầu vào hoặc vùng văn bản để ngăn việc sửa đổi giá trị của nó. Đầu vào chỉ đọc xuất hiện trong nền sáng hơn [giống như đầu vào bị vô hiệu hóa], nhưng vẫn giữ nguyên con trỏ văn bản tiêu chuẩn. Kiểm tra ví dụ sau để xem nó hoạt động như thế nào
— Đầu ra của ví dụ trên sẽ giống như thế này
Kích thước chiều cao của các điều khiển biểu mẫu
Bạn có thể dễ dàng thay đổi chiều cao của kiểu nhập văn bản và chọn hộp để khớp với kích thước nút
Sử dụng các lớp định cỡ chiều cao kiểm soát biểu mẫu, chẳng hạn như
0 và
1 trên đầu vào văn bản để tạo kích thước lớn hơn hoặc nhỏ hơn. Đây là một ví dụ
Email
Email
Email
— Đầu ra của ví dụ trên sẽ giống như thế này
Mẹo. Đảm bảo áp dụng lớp
Email
Password
Remember me
Sign in
0 hoặc
Email
Password
Remember me
Sign in
1 trên các phần tử
Email
Password
Remember me
Sign in
2 hoặc
Email
Password
Remember me
Sign in
2 để thay đổi kích thước nhãn một cách chính xác theo các điều khiển biểu mẫuTương tự, bạn có thể tạo các biến thể lớn hơn và nhỏ hơn của các hộp chọn bằng cách sử dụng các lớp
Email
Password
Remember me
Sign in
4 và
Email
Password
Remember me
Sign in
5 trên
Email
Password
Remember me
Sign in
6
Email
Password
Remember me
Sign in
7— Đầu ra của ví dụ trên sẽ giống như thế này
Xác thực biểu mẫu Bootstrap
Bootstrap cung cấp một cách dễ dàng và nhanh chóng để xác thực các biểu mẫu web ở phía máy khách. Nó sử dụng API xác thực biểu mẫu gốc của trình duyệt để xác thực biểu mẫu. Các kiểu xác thực biểu mẫu được áp dụng thông qua các lớp giả CSS
Email
Password
Remember me
Sign in
8 và
Email
Password
Remember me
Sign in
9. Nó áp dụng cho
Email
Password
Remember me
Sign in
2,
1