Bootstrap - Kiểm tra và Đ Radio: Hướng dẫn cho Người mới bắt đầu

Xin chào các bạn tương lai của các nhà phát triển web! Hôm nay, chúng ta sẽ khám phá thế giới thú vị của các控件 form của Bootstrap, cụ thể là các hộp kiểm và nút radio. Những yếu tố tương tác nhỏ bé này có vẻ đơn giản, nhưng chúng vô cùng mạnh mẽ để thu thập thông tin từ người dùng. Vậy, hãy c rolled up our sleeves and get started!

Giới thiệu về các控件 form của Bootstrap

Trước khi chúng ta nhảy vào chi tiết, hãy dành một chút thời gian để欣赏 tại sao chúng ta lại học về Bootstrap. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bạn có thể tự làm mỗi viên gạch, hoặc bạn có thể sử dụng các thành phần预制. Bootstrap giống như một kho báu của các thành phần预制 cho trang web của bạn. Nó tiết kiệm thời gian và đảm bảo tính nhất quán. Bây giờ, hãy khám phá thành phần đầu tiên của chúng ta!

Hộp kiểm: Đa chọn kỳ diệu

Hộp kiểm cơ bản

Hộp kiểm giống như những hộp vuông nhỏ mà người dùng có thể nhấp để chọn nhiều tùy chọn. Chúng hoàn hảo cho khi bạn muốn người dùng chọn nhiều hơn một mục từ một danh sách. Hãy tạo hộp kiểm đầu tiên của chúng ta:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Hộp kiểm mặc định
</label>
</div>

Trong ví dụ này, chúng ta sử dụng các lớp Bootstrap để định dạng hộp kiểm. Lớp form-check tạo một wrapper, trong khi form-check-input định dạng hộp kiểm itself. Thuộc tính for trong nhãn khớp với id của input, kết nối chúng.

Trạng thái đã chọn

Đôi khi, bạn muốn một hộp kiểm được chọn sẵn. Điều này rất đơn giản, chỉ cần thêm thuộc tính checked:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Hộp kiểm đã chọn
</label>
</div>

Trạng thái không xác định

Bây giờ, đây là một sự thật thú vị: hộp kiểm có thể có trạng thái thứ ba gọi là "không xác định". Nó giống như khi teenager của bạn dọn phòng - nó không hoàn toàn sạch sẽ, nhưng cũng không hoàn toàn bừa bộn. Chúng ta không thể đặt trạng thái này trong HTML, nhưng chúng ta có thể với JavaScript:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Hộp kiểm không xác định
</label>
</div>

<script>
document.getElementById('flexCheckIndeterminate').indeterminate = true;
</script>

Hộp kiểm bị vô hiệu hóa

Đôi khi, bạn có thể muốn hiển thị một hộp kiểm nhưng không cho phép người dùng tương tác với nó. Đó là lúc thuộc tính disabled phát huy tác dụng:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Hộp kiểm bị vô hiệu hóa
</label>
</div>

Nút radio: Nhà vô địch lựa chọn duy nhất

Nút radio cơ bản

Nút radio giống như anh em họ của hộp kiểm. Chúng trông相似 nhưng hành xử khác nhau. Trong khi hộp kiểm cho phép nhiều lựa chọn, nút radio bắt buộc chỉ một lựa chọn trong một nhóm. Hãy tạo một bộ nút radio:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Nút radio mặc định
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Nút radio mặc định đã chọn
</label>
</div>

Lưu ý cách cả hai nút radio có cùng thuộc tính name? Điều này nhóm chúng lại, đảm bảo chỉ một có thể được chọn tại một thời điểm.

Nút radio bị vô hiệu hóa

Giống như hộp kiểm, chúng ta có thể vô hiệu hóa nút radio:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
Nút radio bị vô hiệu hóa
</label>
</div>

Chuyển đổi: Toggle hiện đại

Chuyển đổi là một lựa chọn thời trang thay thế cho hộp kiểm. Chúng hoàn hảo cho các cài đặt bật/tắt. Hãy tạo một chuyển đổi:

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Hộp kiểm chuyển đổi mặc định</label>
</div>

Lớp form-switch biến hộp kiểm của chúng ta thành một công tắc chuyển đổi đẹp mắt.

Tùy chọn bố cục

Mặc định (Đ stacking)

Theo mặc định, hộp kiểm và nút radio được stacking dọc:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">Hộp kiểm stacking 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">Hộp kiểm stacking 2</label>
</div>

Cạnh nhau

Muốn các tùy chọn nằm cạnh nhau? Sử dụng lớp form-check-inline:

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

Đảo ngược

Muốn nhãn trước hộp kiểm? Sử dụng form-check-reverse:

<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">Hộp kiểm đảo ngược</label>
</div>

Không có nhãn

Đôi khi, bạn có thể muốn một hộp kiểm hoặc nút radio không có nhãn:

<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

Nhớ sử dụng aria-label cho khả năng truy cập!

Nút Toggle

Nút Toggle là một cách sang trọng để sử dụng hộp kiểm và nút radio. Chúng trông như những nút thông thường nhưng hoạt động như hộp kiểm hoặc radio:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

Kiểu dáng viền

Muốn một外观 tinh tế hơn? Sử dụng các kiểu dáng viền:

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label>

Kết luận

Chúc mừng! Bạn vừa thực hiện một cuộc tham quan lớn về các hộp kiểm và nút radio của Bootstrap. Những thành phần nhỏ bé này có vẻ đơn giản, nhưng chúng là nền tảng của các form tương tác. Nhớ rằng, thực hành làm cho hoàn hảo. Hãy thử kết hợp các yếu tố này theo nhiều cách khác nhau để tạo ra các form hấp dẫn cho người dùng của bạn.

Dưới đây là bảng tham khảo nhanh các phương pháp chúng ta đã xem xét:

Phương pháp	Mô tả
Hộp kiểm cơ bản	<input class="form-check-input" type="checkbox">
Hộp kiểm đã chọn	Thêm thuộc tính checked
Hộp kiểm không xác định	Đặt với JavaScript
Hộp kiểm bị vô hiệu hóa	Thêm thuộc tính disabled
Nút radio cơ bản	<input class="form-check-input" type="radio">
Nút radio bị vô hiệu hóa	Thêm thuộc tính disabled
Chuyển đổi	Sử dụng form-switch lớp
Bố cục inline	Sử dụng form-check-inline lớp
Bố cục đảo ngược	Sử dụng form-check-reverse lớp
Không có nhãn	Bỏ qua nhãn, sử dụng aria-label
Nút Toggle	Sử dụng btn-check lớp
Kiểu dáng viền	Sử dụng btn-outline-* lớp

Tiếp tục thử nghiệm, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ khi xây dựng các form web tuyệt vời!

Credits: Image by storyset