Tìm hiểu về Radio Button trong HTML: Cách tạo tùy chọn "Chọn 1 trong nhiều"

Trong thiết kế biểu mẫu (form) trên website, khi bạn muốn người dùng chỉ được phép chọn duy nhất một phương án trong một danh sách các lựa chọn có sẵn, Radio Button là công cụ hoàn hảo nhất. Bài viết này sẽ hướng dẫn bạn cách sử dụng thẻ <input type="radio"> một cách chi tiết và dễ hiểu nhất.

Radio Button là gì?

Radio Button (nút chọn) là một thành phần giao diện cho phép người dùng chọn một mục trong một nhóm các lựa chọn. Đặc điểm quan trọng nhất của Radio Button là các nút trong cùng một nhóm sẽ có mối liên kết với nhau thông qua thuộc tính name. Khi bạn chọn một nút, các nút còn lại trong cùng nhóm đó sẽ tự động bị bỏ chọn.

Cấu trúc cơ bản của Radio Button

Để tạo một Radio Button, bạn sử dụng thẻ <input> với thuộc tính type="radio". Dưới đây là ví dụ thực tế:


<form>
  <p>Bạn thích ngôn ngữ lập trình nào nhất?</p>
  
  <input type="radio" id="html" name="language" value="HTML">
  <label for="html">HTML</label><br>
  
  <input type="radio" id="css" name="language" value="CSS">
  <label for="css">CSS</label><br>
  
  <input type="radio" id="js" name="language" value="JavaScript">
  <label for="js">JavaScript</label>
</form>

Các thuộc tính quan trọng cần lưu ý

  • type="radio": Xác định loại ô nhập liệu là nút tròn chọn một.

  • name: Đây là thuộc tính quan trọng nhất. Các radio button có cùng giá trị name sẽ tạo thành một nhóm, đảm bảo người dùng chỉ có thể chọn 1 trong các tùy chọn đó.

  • value: Giá trị sẽ được gửi đi khi biểu mẫu được gửi (submit).

  • id và for: Dùng để liên kết nhãn (label) với ô nhập liệu. Khi người dùng click vào chữ (ví dụ: "HTML"), ô tròn tương ứng sẽ được chọn.

Bảng so sánh: Radio Button và Checkbox

Nhiều người mới bắt đầu thường nhầm lẫn giữa Radio Button và Checkbox. Bảng dưới đây sẽ giúp bạn phân biệt rõ ràng:

Đặc điểm Radio Button Checkbox Mục đích Chọn duy nhất 1 đáp án Chọn nhiều đáp án cùng lúc Hình dạng Hình tròn Hình vuông Cơ chế Loại trừ lẫn nhau Độc lập

Ví dụ nâng cao: Đặt mặc định và vô hiệu hóa

Bạn có thể sử dụng thuộc tính checked để chọn sẵn một phương án, hoặc disabled để ngăn người dùng chọn một tùy chọn cụ thể.


<input type="radio" name="gender" value="male" checked> Nam
<input type="radio" name="gender" value="female"> Nữ
<input type="radio" name="gender" value="other" disabled> Khác (Đang bảo trì)

Lưu ý từ chuyên gia: Luôn luôn bao bọc radio button trong thẻ <label> để tăng trải nghiệm người dùng (UX). Điều này giúp vùng bấm chuột rộng hơn, người dùng dễ dàng thao tác trên điện thoại di động.

Tóm tắt và Kết luận

Việc sử dụng Radio Button rất đơn giản nhưng cực kỳ hiệu quả trong việc thu thập thông tin người dùng. Bạn chỉ cần nhớ:

  1. Sử dụng type="radio".

  2. Đặt cùng một thuộc tính name cho các tùy chọn trong cùng một nhóm.

  3. Luôn sử dụng thẻ <label> để tăng tính thân thiện.

Hy vọng hướng dẫn này đã giúp bạn hiểu rõ cách triển khai Radio Button. Đừng ngần ngại thử nghiệm thêm với CSS để tùy chỉnh giao diện cho đẹp mắt hơn!

Xem thêm ví dụ tại: See the Pen HTML Form - Ô nhập liệu RADIO chọn 1 trong những tùy chọn by kellyfire611 (@kellyfire611) on CodePen.