Biểu mẫu HTML (HTML Form) 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 thành phần của biểu mẫu theo cách thủ công từng cái một bằng CSS thường rất may Bootstrap đơn giản hóa đáng kể quá trình tạo kiểu và căn chỉnh các thành phần của biểu mẫu như nhãn, đầu vào, 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 định nghĩa trước Bootstrap cung cấp ba loại bố cục toàn cục cho các mẫu khác nhau - Vertical icon (local icon default)
- ngang mẫu biểu
- Biểu mẫu trên cùng một hàng
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 các biểu mẫu khác nhau. Chúng ta hãy bắt đầu Create vertical vertical iconĐể tạo bố cục cục bộ biểu tượng dọc (bố cục biểu mẫu dọc), chỉ cần sử dụng các lớp tiện ích lề (lề) được định nghĩa trước cho nhóm 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 Đây là một ví dụ trong đó các biểu mẫu điều khiển đượ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
Kết quả của ví dụ trên sẽ giống như sau Bạn sẽ tìm hiểu về hộp kiểm tra tùy chọn và các điều khiển biểu mẫu tùy chỉnh khác trong chương trình tiếp theo Lưu ý. Tất cả các điều khiển biểu ngữ văn bản, chẳng hạn như
Email
Password
Remember me
Sign in
4 và
Email
Password
Remember me
Sign in
5Kết quả của ví dụ trên sẽ giống như sau Tuy nhiên, nếu bạn muốn vô hiệu hóa tất cả các điều khiển trong cùng một lúc, hãy đặ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
6 trên phần tử đó, như thể hiện trong ví dụ sau.
Email
Password
Remember me
Sign in
Kết quả của ví dụ trên sẽ giống như sau Bạn cũng có thể thêm thuộc tính boolean
Email
Password
Remember me
Sign in
7 vào một phần đầu vào điện tử hoặc vùng văn bản để ngăn chặ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 nó vẫn giữ nguyên con trỏ văn bản tiêu chuẩn. Vui lòng xem ví dụ sau để xem nó hoạt động như thế nào
Kết quả của ví dụ trên sẽ giống như sau Chiều cao của điều khiển biểu mẫuBạn có thể dễ dàng thay đổi chiều cao của đầu vào văn bản và chọn các hộp để phù hợp với kích thước của nút Sử dụng các lớp định mức cao của biểu mẫu điều khiển, chẳng hạn như
Email
Password
Remember me
Sign in
8 và
Email
Password
Remember me
Sign in
9 trên các phần tử đầu vào để tạo kích thước lớn hơn hoặc nhỏ hơn. This is a ví dụ
Email
Email
Email
Kết quả của ví dụ trên sẽ giống như sau mẹo. An ninh á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
4 hoặc
Email
Password
Remember me
Sign in
4 để thay đổi kích thước nhãn một cách chính xác theo các biểu mẫu điều khiển Tương tự như vậy, bạn có thể tạo các biến có 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 phần tử
Email
Password
Remember me
Sign in
6
Email
Password
Remember me
Sign in
7
Email
Password
Remember me
Sign in
8Kết quả của ví dụ trên sẽ giống như sau Xác thực biểu mẫu BootstrapBootstrap 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 để thực hiện 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 CSS giả mạo
Email
Password
Remember me
Sign in
9 và
0. Nó áp dụng cho các phần tử
Email
Password
Remember me
Sign in
4,
2 |