Cách tạo radio button cho phép chọn bằng cách click vào nội dung radio trong html

Để tạo radio button trong HTML và cho phép chọn bằng cách click vào nội dung của radio button, bạn có thể sử dụng thẻ <label> kết hợp với input type=”radio”.

Bạn tham khảo cách thực hiện như code dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button</title>
</head>
<body>
    <form>
        <label>
            <input type="radio" name="option" value="option1">
            Option 1
        </label>
        <br>
        <label>
            <input type="radio" name="option" value="option2">
            Option 2
        </label>
        <br>
        <label>
            <input type="radio" name="option" value="option3">
            Option 3
        </label>
    </form>
</body>
</html>

Trong mã HTML trên, mỗi radio button được bọc trong một thẻ <label>. Khi bạn click vào nội dung của <label>, trình duyệt sẽ tự động chọn radio button tương ứng. Điều này giúp tăng kích thước clickable area cho radio button, làm cho việc chọn trở nên dễ dàng hơn, đặc biệt là trên các thiết bị cảm ứng.