Hướng dẫn tạo ô nhập liệu Checkbox trong HTML

Trong thiết kế web, Checkbox là một thành phần quan trọng cho phép người dùng chọn một hoặc nhiều tùy chọn cùng một lúc. Khác với Radio button (chỉ được chọn 1), Checkbox mang lại sự linh hoạt cao trong các biểu mẫu khảo sát hoặc cài đặt tài khoản.

Tóm tắt nội dung

  • Checkbox sử dụng thẻ <input type="checkbox">.

  • Người dùng có thể chọn nhiều giá trị trong một nhóm.

  • Mỗi checkbox cần có thuộc tính name và value để gửi dữ liệu về máy chủ.

Phân tích từng bước tạo Checkbox

Để tạo một nhóm checkbox đơn giản, bạn có thể thực hiện theo các bước sau:

  1. Bước 1: Sử dụng thẻ <input> với thuộc tính type="checkbox".

  2. Bước 2: Đặt thuộc tính id cho thẻ input để liên kết với nhãn (label).

  3. Bước 3: Tạo thẻ <label> với thuộc tính for khớp với id của input để người dùng có thể nhấp vào chữ để chọn.

  4. Bước 4: Nhóm các checkbox lại bằng cách đặt cùng một tên trong thuộc tính name.

Ví dụ thực tế


<form>
  <p>Bạn quan tâm đến các ngôn ngữ lập trình nào?</p>
  
  <input type="checkbox" id="html" name="language" value="html">
  <label for="html">HTML</label><br>
  
  <input type="checkbox" id="css" name="language" value="css">
  <label for="css">CSS</label><br>
  
  <input type="checkbox" id="js" name="language" value="javascript">
  <label for="js">JavaScript</label>
</form>

Bảng so sánh: Checkbox vs Radio Button

Đặc điểm Checkbox Radio Button Số lượng chọn Nhiều tùy chọn Chỉ 1 tùy chọn Loại input type="checkbox" type="radio" Mục đích Chọn sở thích, danh sách Chọn giới tính, phương thức thanh toán

Giải thích kỹ thuật cho người mới bắt đầu

Lưu ý quan trọng: Khi bạn muốn người dùng chọn nhiều giá trị, hãy đặt tên cho các checkbox giống nhau (ví dụ: name="language"). Khi gửi biểu mẫu, hệ thống sẽ nhận được một danh sách các giá trị mà người dùng đã tích chọn.

Nếu bạn muốn một checkbox được chọn sẵn khi trang web tải lên, hãy thêm thuộc tính checked vào thẻ input:

<input type="checkbox" id="html" name="language" value="html" checked>

Kết luận

Việc sử dụng checkbox là kỹ năng cơ bản nhưng thiết yếu để thu thập dữ liệu người dùng. Bằng cách nắm vững cách kết hợp giữa thẻ input và label, bạn sẽ tạo ra những biểu mẫu trực quan, dễ sử dụng và thân thiện hơn với người dùng trên mọi thiết bị.

Xem thêm ví dụ trực quan tại: HTML Form - Ô nhập liệu CHECKBOX chọn 1 hoặc nhiều trong những tùy chọn bởi kellyfire611 trên CodePen.