Tạo biểu mẫu theo ý muốn trong Bootstrap

Đọc bài viết này của Mytour để hiểu cách tạo biểu mẫu theo ý muốn trong Bootstrap.

Tạo biểu mẫu theo ý muốn trong Bootstrap

1. Tạo biểu mẫu theo ý muốn trong Bootstrap

Bootstrap 4 cho phép người dùng tạo ra các form control độc đáo trên trình duyệt, tạo bố cục form (biểu mẫu) mới theo ý muốn. Bạn có thể tạo hộp checkbox linh hoạt và nút radio độc đáo tương thích với trình duyệt, các file đầu vào, menu dropdown, ... .

2. Tạo ô chọn linh hoạt trong Bootstrap

Để tạo các ô chọn tùy chỉnh trong Bootstrap, chỉ cần đặt mỗi ô chọn input và label tương ứng vào trong phần tử div và thêm các lớp như ví dụ dưới đây:

Kết quả hiển thị sẽ như sau:

3. Tạo các nút radio tùy chỉnh trong Bootstrap

Tương tự, chúng ta cũng có thể tạo các nút radio tùy chỉnh bằng cách sử dụng Bootstrap như trong ví dụ dưới đây:

Kết quả hiển thị sẽ như sau:

Bổ sung vào đó, chúng ta có thể sắp xếp ô chọn và nút radio theo chiều ngang bằng cách thêm lớp .custom-control-inline vào phần tử div như trong ví dụ dưới đây:

Kết quả hiển thị sẽ như dưới đây:

4. Vô hiệu hóa các ô chọn và nút radio tùy chỉnh

Để tắt tính năng của các ô chọn và nút radio tùy chỉnh, chúng ta chỉ cần thêm thuộc tính disabled vào phần tử input.

Ví dụ: trong ví dụ dưới đây, chúng ta sẽ thêm thuộc tính disabled vào phần tử input để vô hiệu hóa các ô chọn và nút radio tùy chỉnh:

Kết quả hiển thị sẽ như dưới đây:

5. Tạo nút chuyển đổi (nút bật tắt)

Nút chuyển đổi hoạt động tương tự như ô chọn tùy chỉnh, nhưng khác biệt ở chỗ sử dụng lớp .custom-switch thay thế cho .custom-checkbox để hiển thị thanh trượt bật tắt.

Bên cạnh đó, nút chuyển đổi trong Bootstrap cũng hỗ trợ thuộc tính disable.

Ví dụ: trong ví dụ dưới đây minh họa cách tạo một nút chuyển đổi trong Bootstrap:

Kết quả hiển thị sẽ như dưới đây:

6. Tạo menu tùy chỉnh trong Bootstrap

Để tạo menu tùy chỉnh, chỉ cần thêm lớp .custom-select vào phần tử select. Giao diện menu tùy chỉnh vẫn giữ nguyên giao diện menu ban đầu và không thể sửa đổi thẻ option do hạn chế của trình duyệt.

Ví dụ: trong ví dụ dưới đây, chúng ta sẽ tạo một menu tùy chỉnh trong Bootstrap:

Kết quả hiển thị sẽ như dưới đây:

Ngoài ra, có thể tạo các menu tùy chỉnh với các kích thước khác nhau (lớn, mặc định, nhỏ) để phù hợp với kích thước văn bản đầu vào trong Bootstrap như trong ví dụ dưới đây:

Kết quả hiển thị sẽ như dưới đây:

Thẻ select trong Bootstrap cũng hỗ trợ các thuộc tính như multiple và size.

Ví dụ:

Kết quả sẽ xuất hiện như dưới đây:

7. Tạo phạm vi đầu vào tùy chỉnh trong Bootstrap

Để tạo phạm vi đầu vào tùy chỉnh, chỉ cần thêm lớp .custom-range cho thẻ input type='range'.

Ví dụ: trong ví dụ dưới đây, chúng ta sẽ tạo phạm vi đầu vào tùy chỉnh trong Bootstrap:

Kết quả sẽ hiển thị như sau:

Mặc định, giá trị ngầm cho phạm vi đầu vào là từ 0 đến 100. Tuy nhiên, nếu cần, chúng ta có thể chỉ định giá trị mới bằng cách sử dụng các thuộc tính min và max.

Bên cạnh đó, phạm vi đầu vào mặc định là các giá trị số nguyên. Để thay đổi điều này, chúng ta chỉ cần xác định giá trị step như trong ví dụ dưới đây, giá trị step được đặt là 0.5:

Kết quả hiển thị sẽ như thế này:

Kết quả sẽ hiển thị như sau:

8. Tạo file đầu vào tùy chỉnh trong Bootstrap

Trong Bootstrap 4, chúng ta có thể tạo các ô chọn file tùy chỉnh và hiển thị chúng một cách đồng nhất trên mọi trình duyệt.

Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo một ô chọn file tùy chỉnh trong Bootstrap:

Kết quả sẽ hiển thị như sau:

Mẹo: Bootstrap ẩn ô chọn file mặc định bằng cách sử dụng thuộc tính opacity và thiết lập cho label. Phần tử giả ::after được sử dụng để tạo và định vị nút.

Cuối cùng, transparent-input được đặt trên style-label thông qua CSS positioning với các thuộc tính width và height phù hợp để kích hoạt hộp thoại chọn file.

Trên đây là hướng dẫn của Mytour về cách tạo biểu mẫu trong Bootstrap điều chỉnh. Bài học tiếp theo sẽ giới thiệu cách sử dụng Input Group trong Bootstrap.

Nếu bạn có bất kỳ thắc mắc hoặc câu hỏi nào cần được giải đáp, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết. Chúng tôi sẽ rất vui lòng hỗ trợ bạn.