Mặc dù phiên bản mới nhất của HTML là HTML5, đã loại bỏ đi một số thẻ không cần thiết. Nhưng bên cạnh đó một số thẻ tag vẫn tồn tại mặc dù công nghệ đã update. Và bài viết hôm nay Quách Quỳnh muốn nhắc tới đó chính là thẻ Radio button trong HTML. Qua đó bạn sẽ biết được Radio button sử dụng như thế nào.
Khi làm việc với input bạn sẽ viết như sau:
<input type="text" name="getName">
Trong đó type chính là kiểu dữ liệu đầu vào. Type gồm có các kiểu như: text, file, password, email, submit, radio, checkbox, color vv…
Tìm hiểu về Radio button
Hãy thực hiện ví dụ sau:
<!DOCTYPE html> <html> <body> <form> <input type="radio" id="html" name="hoc-html" value="HTML"> <label for="html">Học HTML</label><br> <input type="radio" id="css" name="hoc-css" value="CSS"> <label for="css">Học CSS</label><br> <input type="radio" id="javascript" name="hoc-js" value="JavaScript"> <label for="javascript">Học JavaScript</label> </form> </body> </html>
Như cách viết ở trên chúng ta sẽ thấy để tạo ra radio button thì cần dùng tới kiểu type="radio".
Bên cạnh đó trong trường input thì cũng cần có id, name những cái này sẽ hữu ích sau này sử dụng JavaScript và PHP. Vì thế khi viết bạn cần có thói quen thêm id và name vào.
Để thêm một button submit thì bạn chỉ cần thay đổi type="submit".
<input type="submit" id="btn-submit" name="btn-submit" value="Xác nhận">
Trình duyệt hỗ trợ:
Kết luận: Radio button có xuất hiện trong các Form liên hệ. Nhờ vào nó người dùng sẽ lựa chọn thông tin dễ dàng. Đây là kiến thức HTML cơ bản nhưng nó khá quan trọng. Vì thế bạn nên đọc rồi thực hành gõ code lại theo cách hiểu của mình.
