Tìm hiểu cách tạo các nút radio trong HTML cho các biểu mẫu phù hợp của bạn – điều đó cực kỳ dễ dàng!

Bạn đang xem : radio loại đầu vào html

Mặc dù có vẻ như các công nghệ web mới được giới thiệu hàng năm để thu hút khách truy cập, có một số đã đứng trước thử thách của thời gian và sẽ không biến mất. Trong bài đăng này, chúng ta sẽ thảo luận về một yếu tố như vậy, nút radio HTML khiêm tốn.

Từ biểu mẫu liên hệ cho đến các bài kiểm tra trắc nghiệm, bạn có thể đã từng nhìn thấy các nút radio trước đây (ngay cả khi bạn không biết chính xác chúng được gọi là gì). Các yếu tố hình tròn này là điều cần biết nếu bạn muốn thu thập thông tin người dùng từ giao diện người dùng của trang web.

Thuận tiện, HTML có kiểu nhập tích hợp cho các nút radio và việc triển khai chúng trên một trang khá đơn giản. Tại đây, chúng tôi sẽ xem xét các nút radio là gì, khi nào sử dụng chúng và cách viết mã biểu mẫu bằng các nút radio trong HTML.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Nút radio HTML là gì?

Trong HTML, nút radio là một phần tử trang tương tác để chọn một tùy chọn từ nhiều tùy chọn. Nút radio xuất hiện dưới dạng một vòng tròn trống khi không được chọn. Khi được nhấp bằng chuột hoặc được chọn bằng bàn phím, vòng tròn sẽ điền vào để biểu thị lựa chọn, Một nút radio được ghép nối với nhãn (thường là văn bản hoặc đôi khi là hình ảnh) – đây là những gì người dùng đang chọn khi họ chọn một nút radio cụ thể .

Các nút radio hầu như luôn xuất hiện trong các nhóm gồm hai hoặc nhiều hơn để biểu thị các tùy chọn có liên quan, loại trừ lẫn nhau. Trong nhóm tùy chọn này, người dùng chỉ có thể chọn một tùy chọn tại một thời điểm. Điều này có nghĩa là việc chọn một nút radio sẽ bỏ chọn một nút đã chọn khác trong nhóm. Ngoài ra, người dùng không thể bỏ chọn một nút radio bằng cách nhấp vào nút đó. Cách duy nhất để bỏ chọn một nút radio là chọn một tùy chọn khác trong nhóm.

Radio Buttons so với Checkboxes

Các nút radio tương tự như một phần tử tương tác phổ biến khác, hộp kiểm. Sự khác biệt giữa hai điều này là nhỏ nhưng quan trọng cần lưu ý: Trong khi các nút radio cho phép người dùng chọn chính xác một tùy chọn cho mỗi nhóm, hộp kiểm cho phép người dùng chọn (hoặc “chọn”) một, nhiều hoặc không có tùy chọn cho mỗi nhóm. Người dùng cũng có thể bỏ chọn hộp kiểm bằng cách nhấp vào hộp kiểm đó – các nút radio không cho phép điều này.

Xem Thêm  Cách căn giữa văn bản theo chiều dọc với CSS - văn bản dọc trung tâm css

Tôi thừa nhận đây không phải là chủ đề ly kỳ nhất. Tuy nhiên, việc trộn lẫn hai thứ này có thể gây ra sự nhầm lẫn nghiêm trọng từ du khách. Vì vậy, hãy đảm bảo sử dụng các nút radio cho menu “Chọn một” và lưu các hộp kiểm cho menu “Chọn tất cả phù hợp” hoặc các câu hỏi một lần của bạn (tức là “Chọn hộp này nếu…”).

Giờ chúng ta đã hiểu mục đích của các nút radio HTML, hãy cùng tìm hiểu cách tạo chúng.

Cách tạo nút radio trong HTML

Để tạo nút radio trong HTML, hãy sử dụng phần tử & lt; input & gt; với loại radio . Điều này tạo ra một nút radio duy nhất mà người dùng có thể tương tác với:

Xem cây bút Single Radio Button của Christina Perricone ( @hubspot ) trên CodePen .

Tất nhiên, chúng tôi sẽ cần thêm một chút mã nữa để làm cho điều này hữu ích. Cụ thể, chúng tôi sẽ muốn có nhiều nút và nhãn cho mỗi nút. Dưới đây là giao diện của một nhóm nút radio đơn giản, chỉ sử dụng HTML:

Xem cây bút Radio Button Group của Christina Perricone ( @hubspot ) trên CodePen .

Ở đây, chúng tôi có ba phần tử & lt; input & gt; thuộc loại radio , cùng với một số thuộc tính mới. Ngoài ra còn có một phần tử & lt; label & gt; mới cho mỗi & lt; đầu vào & gt; . Hãy xem lại từng điều chúng tôi đã thêm vào mã.

Đầu tiên, thuộc tính id là giá trị nhận dạng duy nhất cho thẻ & lt; input & gt; . Nó có thể được sử dụng làm CSS selector cho phần tử nút radio và nó cũng hợp nhất nút với & lt; nhãn & gt; .

Như đã đề cập, các nút radio được chia thành từng nhóm. Sử dụng thuộc tính name bắt buộc để nhóm một tập hợp các nút radio có liên quan lại với nhau. Trong ví dụ trên, tất cả & lt; input & gt; s đều có chung giá trị cho name, vì vậy họ được coi là một phần của cùng một nhóm. Điều này cho phép người dùng chỉ chọn một tùy chọn trong một nhóm tại một thời điểm – hãy thử ở trên.

Tiếp theo, thuộc tính value biểu thị một giá trị duy nhất cho nút radio. Người dùng không nhìn thấy nó, nhưng nó được gửi để đại diện cho tùy chọn đã chọn. Ví dụ: nếu biểu mẫu ở trên được gửi với mục “17 tuổi trở xuống” được chọn, hệ thống xử lý biểu mẫu sẽ nhận giá trị age = child . Nếu người dùng không chọn bất kỳ nút radio nào, sẽ không có giá trị nào được gửi. Nếu thuộc tính value bị thiếu cho tùy chọn đã chọn, biểu mẫu sẽ gửi giá trị mặc định on .

Xem Thêm  API web là gì? - apis web là gì

Lưu ý rằng thẻ & lt; input & gt; chỉ tạo phần tử nút radio chứ không phải nhãn. Để gắn nhãn cho nút radio, hãy thêm phần tử & lt; label & gt; sau phần tử & lt; input & gt; và chèn thuộc tính for có cùng giá trị làm id của phần tử & lt; input & gt; được liên kết. Sau đó, viết văn bản nhãn của bạn vào thẻ & lt; label & gt; .

Mặc dù việc sử dụng & lt; label & gt; là không hoàn toàn cần thiết nhưng đây được coi là phương pháp hay nhất vì hai lý do. Đầu tiên, phần tử phong phú về ngữ nghĩa & lt; label & gt; tạo nên trang web của bạn dễ tiếp cận hơn cho những người sử dụng trình đọc màn hình. Nó cho họ biết nhãn nào được ghép nối với nút radio nào. Thứ hai, thuộc tính for cho phép người dùng chọn một nút radio bằng cách nhấp vào chính nhãn đó ngoài nút, giúp biểu mẫu của bạn dễ sử dụng hơn.

Cuối cùng, & lt; br & gt; (ngắt dòng) các thẻ đặt mỗi tùy chọn trên một dòng mới. Hãy thử xóa các thẻ này trong ví dụ trên để đặt tất cả các tùy chọn trên cùng một dòng.

Thuộc tính đã kiểm tra

Đầu vào của nút radio có một thuộc tính bổ sung, thuộc tính đã kiểm tra . Nếu được bao gồm trong thẻ & lt; input & gt; , nút sẽ là được chọn theo mặc định.

Xem Bút ký Biểu mẫu nút radio có lựa chọn mặc định của Christina Perricone ( @hubspot ) trên CodePen .

Cách đặt các nút radio HTML trong một biểu mẫu

Các nút radio có ích lợi gì nếu người dùng không thể gửi phản hồi của họ? Đó là lý do tại sao các nút radio thường nằm bên trong các biểu mẫu HTML. Phần tử & lt; form & gt; chứa các phần tử con thu thập thông tin đầu vào của người dùng, chẳng hạn như & lt; input type = ”radio” & gt; .

Để tạo biểu mẫu cơ bản với các nút radio, hãy gói (các) nhóm nút radio của bạn trong thẻ & lt; biểu mẫu & gt; và bao gồm nút & lt; & gt; thuộc loại gửi ở dưới cùng. Khi người dùng nhấp vào “Gửi”, câu trả lời của họ sẽ được gửi đến trình xử lý biểu mẫu. Xem bên dưới để biết ví dụ về biểu mẫu đơn giản.

Xem Bút ký Biểu mẫu nút radio của Christina Perricone ( @hubspot ) trên CodePen .

Radio Buttons: Yếu tố đơn giản cho biểu mẫu của bạn

Các nút radio có ở khắp mọi nơi trên web. Trên thực tế, chúng phổ biến đến mức HTML có kiểu đầu vào riêng cho chúng, cho phép bất kỳ ai có kiến ​​thức về HTML đều có thể chèn chúng vào một trang. Miễn là mã được viết đúng cách, trình duyệt sẽ xử lý tất cả các chức năng cơ bản cho bạn.

Xem Thêm  Trung tâm căn chỉnh HTML - văn bản trung tâm mã html

Xin nhắc lại lần cuối, hãy đảm bảo rằng bạn đang sử dụng các nút radio trong các trường hợp phù hợp. Hãy nhớ sử dụng các nút radio khi bạn muốn người dùng chỉ chọn một tùy chọn từ một nhóm và các hộp kiểm nếu bạn muốn cho phép người dùng chọn nhiều tùy chọn và bỏ chọn các lựa chọn của họ.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề radio loại đầu vào html

Radio button in html | How to create radio button in HTML

alt

  • Tác giả: Techno Brainz
  • Ngày đăng: 2020-04-19
  • Đánh giá: 4 ⭐ ( 4584 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: How to make input type radio button in html in hindi ? You will learn radio button in html5 with all attributes. It’s a part of HTML forms input types. Create radio button to make a form in html website.

    type=”radio” :- creates a radio button
    checked :- sets to the checked state
    value :- default value of the input field
    name :- uniquely identify the field in scripts

    ➤Instagram : https://www.instagram.com/techno_brainz/
    ➤Facebook : https://www.facebook.com/technobrainzofficial

    My Gears ⚙️
    ——————————————————————–
    Laptop- https://amzn.to/3bTML0n
    Tripod – https://amzn.to/2LAp2rz
    Mic – https://amzn.to/3bP2MEJ
    Green screen – https://amzn.to/3bP2WMl
    Light Setup – https://amzn.to/2XQDwG1
    Mobile – https://amzn.to/2Kpkbsq
    ——————————————————————–

    radiobuttoninhtml
    HTML5
    technobrainz

Radio button trong HTML

  • Tác giả: quachquynh.com
  • Đánh giá: 5 ⭐ ( 5997 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Nhập cái này – đầu vào đó, HTML5 loại đầu vào mới

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 6868 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng ta đã quen với các kiểu đầu vào như “gửi”, “radio” hoặc “ẩn” nhưng ngày nay có nhiều thành phần phổ biến đến mức hầu như mọi khung công tác web ngoài đó, bất kể đó là trong Java, Ruby,…

Thẻ input trong HTML

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 5 ⭐ ( 5839 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ input trong HTML – Lập Trình Từ Đầu 2 HTML Forms

Các kiểu input trong HTML

  • Tác giả: tedu.com.vn
  • Đánh giá: 4 ⭐ ( 1892 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về các kiểu input trong HTML

Các loại đầu vào HTML

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 5 ⭐ ( 6535 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

Thẻ radio button và checkbox trong HTML

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 7380 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php