Menu
CoddyTech

Nút radio

Thuộc phần Kiến thức cơ bản trong hành trình HTML của Coddy. Bài học 41 trên 60.

Trong HTML, nút radio dùng để tạo một nhóm tùy chọn loại trừ lẫn nhau, trong đó người dùng chỉ có thể chọn một tùy chọn trong nhóm. Nút radio được tạo bằng thẻ <input> với thuộc tính type có giá trị là "radio".

Đây là cú pháp cơ bản để tạo nút radio trong HTML:

<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label>
  • <input>: Thẻ xác định trường nhập liệu.
  • type="radio": Thuộc tính chỉ định kiểu đầu vào là nút radio.
  • id: Thuộc tính gán mã định danh duy nhất cho nút radio.
  • name: Thuộc tính (attribute) dùng để nhóm các nút radio. Tất cả nút radio có cùng name thuộc cùng một nhóm và mỗi lần chỉ có thể chọn một tùy chọn trong nhóm.
  • value: Thuộc tính chỉ định giá trị gắn với nút radio. Giá trị này được gửi đến máy chủ khi biểu mẫu được gửi.
  • <label>: Thẻ này tạo nhãn có thể nhấp vào cho nút radio. Thuộc tính for của nhãn cần khớp với thuộc tính id của nút radio.

Sau đây là ví dụ về cách tạo một nhóm nút radio:

<form>
	<input type="radio" id="option1" name="mygroup" value="option1">
	<label for="option1">Option 1</label>
	<br>
	
	<input type="radio" id="option2" name="mygroup" value="option2">
	<label for="option2">Option 2</label>
	<br>
	
	<input type="radio" id="option3" name="mygroup" value="option3">
	<label for="option3">Option 3</label>
	<br>
</form>

Trong ví dụ này, ta có một biểu mẫu gồm ba nút radio, tất cả thuộc cùng một nhóm vì chúng dùng chung thuộc tính name ("mygroup"). Mỗi nút radio có id và value riêng cùng một nhãn tương ứng. Khi người dùng chọn một trong các tùy chọn này rồi gửi biểu mẫu, giá trị của nút radio được chọn sẽ được gửi đến máy chủ.

challenge icon

Thử thách

Dễ

Tạo một tài liệu HTML có biểu mẫu với một nhóm nút radio. Biểu mẫu cần có các phần tử sau:

  1. Một nhóm gồm ba nút radio có tên "color".
  2. Nút radio đầu tiên cần có id "red", giá trị "red" và nhãn có nội dung "Red".
  3. Nút radio thứ hai cần có id "green", giá trị "green" và nhãn có nội dung "Green".
  4. Nút radio thứ ba cần có id "blue", giá trị "blue" và nhãn có nội dung "Blue".
  5. Thêm thẻ <br> sau mỗi nhãn để xuống dòng.

Tự làm thử

<!DOCTYPE html>
<html>
    <body>
        <!-- Viết code ở đây -->
    </body>
</html>
quiz iconTự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Kiến thức cơ bản

Tự luyện tập: Playground Web