Trong chương này, chúng ta sẽ nghiên cứu cách tạo biểu mẫu dễ dàng bằng Bootstrap. Bootstrap giúp dễ dàng với đánh dấu HTML đơn giản và các lớp mở rộng cho các kiểu biểu mẫu khác nhau. Trong chương này, chúng ta sẽ nghiên cứu cách tạo biểu mẫu một cách dễ dàng bằng Bootstrap
Bố cục biểu mẫu
Bootstrap cung cấp cho bạn các loại bố cục biểu mẫu sau -
- Dạng dọc [mặc định]
- hình thức nội tuyến
- dạng ngang
Dạng đứng hoặc dạng cơ bản
Cấu trúc biểu mẫu cơ bản đi kèm với Bootstrap; . Để tạo một biểu mẫu cơ bản, hãy làm như sau -
Thêm một biểu mẫu vai trò cho phụ huynh
thành phầnGói nhãn và điều khiển trong một
với lớp. nhóm hình thức. Điều này là cần thiết cho khoảng cách tối ưu
Thêm một lớp. kiểm soát biểu mẫu cho tất cả văn bản,
Hộp kiểm và nút radio
Các hộp kiểm và nút radio rất tuyệt khi bạn muốn người dùng chọn từ danh sách các tùy chọn đặt trước
Khi tạo biểu mẫu, hãy sử dụng hộp kiểm nếu bạn muốn người dùng chọn bất kỳ số lượng tùy chọn nào từ danh sách. Sử dụng radio nếu bạn muốn giới hạn người dùng chỉ trong một lựa chọn
Sử dụng. hộp kiểm-nội tuyến hoặc. lớp radio-inline thành một loạt hộp kiểm hoặc radio cho các điều khiển xuất hiện trên cùng một dòng
Ví dụ sau minh họa cả hai loại [mặc định và nội tuyến] –
Example of Default Checkbox and radio button
Option 1
Option 2
Option 1
Option 2 - selecting it will deselect option 1
Example of Inline Checkbox and radio buttonOption 1 Option 2 Option 3 Option 1 Option 2
chọn
Một lựa chọn được sử dụng khi bạn muốn cho phép người dùng chọn từ nhiều tùy chọn, nhưng theo mặc định, nó chỉ cho phép một tùy chọn
Sử dụng cho các tùy chọn danh sách mà người dùng quen thuộc, chẳng hạn như trạng thái hoặc số. Sử dụng multiple = "multiple" để cho phép người dùng chọn nhiều tùy chọn. Ví dụ sau minh họa cả hai loại [chọn và nhiều] – Chọn danh sách
Danh sách nhiều lựa chọnKiểm soát tĩnh
sử dụng lớp. biểu mẫu-kiểm soát-tĩnh trên một
, khi bạn cần đặt văn bản thuần túy bên cạnh nhãn biểu mẫu trong biểu mẫu nằm ngang
Email
email@example.com
Password
Trạng thái kiểm soát biểu mẫu
Ngoài các. tập trung [tôi. e. , người dùng nhấp vào trạng thái đầu vào hoặc tab vào nó], Bootstrap cung cấp kiểu dáng cho các đầu vào và lớp bị vô hiệu hóa để xác thực biểu mẫu
Tiêu điểm đầu vào
Khi một đầu vào nhận được. tiêu điểm, đường viền của đầu vào bị xóa và bóng hộp được áp dụng
đầu vào bị vô hiệu hóa
Nếu bạn cần vô hiệu hóa một đầu vào, chỉ cần thêm thuộc tính bị vô hiệu hóa sẽ không chỉ vô hiệu hóa nó;
Bộ trường bị vô hiệu hóa
Thêm thuộc tính bị vô hiệu hóa vào một
để vô hiệu hóa tất cả các điều khiển trong rạp cùng một lúcTrạng thái xác thực
Bootstrap bao gồm các kiểu xác nhận lỗi, cảnh báo và thông báo thành công. Để sử dụng, chỉ cần thêm lớp thích hợp [. có cảnh báo,. có lỗi, hoặc. has-success] vào phần tử cha
Ví dụ sau minh họa tất cả các trạng thái điều khiển biểu mẫu -
Focused
Disabled
Disabled input [Fieldset disabled]
Disabled select menu [Fieldset disabled]
Input with success
Input with warning
Input with error
Kích thước kiểm soát biểu mẫu
Bạn có thể đặt chiều cao và chiều rộng của biểu mẫu bằng cách sử dụng các lớp như. đầu vào-lg và. col-lg-* tương ứng. Ví dụ sau minh họa điều này -
văn bản trợ giúp
Các điều khiển biểu mẫu Bootstrap có thể có văn bản trợ giúp ở cấp độ khối chạy cùng với các đầu vào. Để thêm một khối nội dung có chiều rộng đầy đủ, hãy sử dụng. khối trợ giúp sau. Ví dụ sau minh họa điều này -
Làm cách nào để tạo biểu mẫu nội tuyến trong Bootstrap 5?
Hiển thị biểu mẫu Bootstrap nội tuyến . Tuy nhiên, bạn có thể làm cho nhãn biểu mẫu và đầu vào xuất hiện trong dòng, theo chiều ngang bằng cách áp dụng lớp biểu mẫu trong dòng . [Lưu ý rằng nó sẽ chỉ xuất hiện trong dòng trong các cổng xem có chiều rộng ít nhất là 576px. ]Làm cách nào để tạo biểu mẫu đăng ký trong HTML bằng Bootstrap?
Biểu mẫu tùy chỉnh trong Bootstrap là gì?
Trong bootstrap 4, biểu mẫu được sử dụng để thu thập thông tin cụ thể từ khách truy cập vào trang web của bạn. Biểu mẫu tùy chỉnh là những biểu mẫu có thêm điều khiển tùy chỉnh , tôi. e. , nút radio tùy chỉnh, hộp kiểm tùy chỉnh, v.v.Làm cách nào để tạo biểu mẫu hai cột trong Bootstrap?
Bạn có thể thêm cột và hàng bằng cách thêm . In the example above, the email and password fields are separated into two columns within a row. This is why they are displayed side by side on a webpage.