Tạo form (biểu mẫu) tùy chỉnh trong Bootstrap

Trong bài học Bootstrap trước Taimienphi.vn đã hướng dẫn bạn cách tạo form (biểu mẫu) trong Bootstrap. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ hướng dẫn tiếp bạn cách tạo form (biểu mẫu) tùy chỉnh trong Bootstrap.

Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu cách tạo form (biểu mẫu) tùy chỉnh trong Bootstrap.

tao form bieu mau tuy chinh trong bootstrap hoc bootstrap

Tạo form (biểu mẫu) tùy chỉnh trong Bootstrap

 

Mục Lục bài viết:
1. Tạo form (biểu mẫu) tùy chỉnh trong Bootstrap
2. Tạo hộp checkbox tùy chỉnh trong Bootstrap
3. Tạo các nút radio tùy chỉnh trong Bootstrap
4. Vô hiệu hóa các hộp checkbox và nút radio tùy chỉnh
5. Tạo nút chuyển đổi (nút bật tắt)
6. Tạo menu tùy chỉnh trong Bootstrap
7. Tạo phạm vi đầu vào tùy chỉnh trong Bootstrap
8. Tạo file đầu vào tùy chỉnh trong Bootstrap

 

1. Tạo form (biểu mẫu) tùy chỉnh trong Bootstrap

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

 

2. Tạo hộp checkbox tùy chỉnh trong Bootstrap

Để tạo các hộp checkbox tùy chỉnh trong Bootstrap, chúng ta chỉ cần bọc từng checkbox input label tương ứng trong phần tử div và áp dụng các lớp như trong ví dụ dưới đây:

tao form bieu mau tuy chinh trong bootstrap

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 2

 

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:

tao form bieu mau tuy chinh trong bootstrap 3

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 4

Ngoài ra chúng ta cũng có thể đặt vị trí các hộp checkbox và nút radio theo hàng ngang bằng cách thêm lớp .custom-control-inline trong phần tử div như trong ví dụ dưới đây:

tao form bieu mau tuy chinh trong bootstrap 5

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 6

 

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

Để vô hiệu hóa các hộp checkbox 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 hộp checkbox và nút radio tùy chỉnh:

tao form bieu mau tuy chinh trong bootstrap 7

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 8

 

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

Nút chuyển đổi tượng tự như hộp checkbox tùy chỉnh, chỉ khác nó sử dụng lớp .custom-switch thay thế lớp .custom-checkbox để hiển thị thanh trượt bật tắt.

Ngoài ra các 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:

tao form bieu mau tuy chinh trong bootstrap 9

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 10

 

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

Để tạo menu tùy chỉnh, chúng ta chỉ cần thêm lớp .custom-select trên phần tử select. Tuy nhiên giao diện menu tùy chỉnh vẫn giữ nguyên giao diện menu ban đầu, chúng ta không thể sửa đổi thẻ option do giới hạn 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:

tao form bieu mau tuy chinh trong bootstrap 11

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 12

Ngoài ra chúng ta cũng 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ỏ) sao cho 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:

tao form bieu mau tuy chinh trong bootstrap 13

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 14

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

Ví dụ:

tao form bieu mau tuy chinh trong bootstrap 15

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 16

 

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 áp dụng 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:

tao form bieu mau tuy chinh trong bootstrap 17

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 18

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

Ngoài ra phạm vi đầu vào là các giá trị số nguyên theo mặc định. Để thay đổi các giá trị này, chúng ta chỉ cần chỉ định giá trị step.

Ví dụ: trong ví dụ dưới đây giá trị step được chỉ định là 0.5:

tao form bieu mau tuy chinh trong bootstrap 19

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 20

 

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 file đầu vào tùy chỉnh và hiển thị một cách nhất quán trên các trình duyệt.

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

tao form bieu mau tuy chinh trong bootstrap 21

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 22

Mẹo: Bootstrap ẩn file input mặc định thông qua opacity và style label. Phần tử giả ::after được sử dụng để tạo và xác định vị trí của nút.

Cuối cùng transparent-input được đặt ở trên style-label bằng cách sử dụng CSS positioning với các thuộc tính widthheight phù hợp để kích hoạt hộp thoại chọn file.

Bài học trên đây Taimienphi.vn vừa hướng dẫn bạn cách tạo form trong Bootstrap điều chỉnh. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách sử dụng Input Group trong Bootstrap.

https://thuthuat.taimienphi.vn/tao-form-bieu-mau-tuy-chinh-trong-bootstrap-51114n.aspx
Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

Tác giả: Hoàng Bách     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

List Group trong Bootstrap, tác dụng và cách tạo
Lựa chọn hình thức trả lời trong Google Forms
Tạo thư, email mẫu Gmail bằng Canned Responses
Cách chuyển Form dữ liệu từ Word sang Excel
Chèn Template trong Google sheets
Từ khoá liên quan:

Tạo form (biểu mẫu) tùy chỉnh trong Bootstrap

, Bootstrap, học Bootstrap,

SOFT LIÊN QUAN
  • Google Form

    Ứng dụng tạo biểu mẫu của Google

    Google Form giúp bạn tạo ra những biểu mẫu, bảng đăng ký, khảo sát với giao diện đẹp, hỗ trợ thu thập và tổ chức thông tin với nhiều quy mô khác nhau. Với ứng dụng trực tuyến này, người dùng có thể tạo ra các bản khảo sá ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá