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
yếu tốGó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 -
Loại đầu vào trong Bootstrap là gì?
Bootstrap hỗ trợ tất cả các loại đầu vào HTML5. văn bản, mật khẩu, ngày giờ, ngày giờ địa phương, ngày, tháng, giờ, tuần, số, email, url, tìm kiếm, điện thoại và màu sắc . Ghi chú. Đầu vào sẽ KHÔNG được tạo kiểu đầy đủ nếu loại của chúng không được khai báo đúng.Văn bản nhóm đầu vào trong Bootstrap là gì?
Dễ dàng mở rộng các điều khiển biểu mẫu bằng cách thêm văn bản, nút hoặc nhóm nút ở hai bên của đầu vào văn bản, lựa chọn tùy chỉnh và đầu vào tệp tùy chỉnh .Biểu mẫu Bootstrap là gì?
Bootstrap Dạng ngang . Trên màn hình nhỏ [767px trở xuống], nó sẽ chuyển sang dạng dọc [nhãn được đặt trên mỗi đầu vào]. A horizontal form means that the labels are aligned next to the input field [horizontal] on large and medium screens. On small screens [767px and below], it will transform to a vertical form [labels are placed on top of each input].Làm cách nào để căn giữa trường nhập liệu trong Bootstrap?
Để sử dụng Bootstrap justify-content-center .Làm cách nào để thêm biểu tượng vào đầu vào Bootstrap?
Chọn "Biểu tượng" từ trình đơn thả xuống Thêm hoặc Thêm trong tab "Chỉnh sửa trường" . Chọn một biểu tượng từ cửa sổ bộ chọn biểu tượng. Tạo kiểu cho màu của biểu tượng và màu nền trong tab "Cài đặt".Làm cách nào để tạo biểu mẫu Bootstrap?
To create a form where all of the elements are inline, left aligned and labels are alongside, add the class . form-inline to the tag. By default inputs, selects, and textareas have 100% width in Bootstrap. You need to set a width on the form controls when using inline form.