Nút radio HTML là một phần tử đầu vào cho phép bạn chọn 1 trong số các lựa chọn. Tìm hiểu mọi thứ về nút radio với 10 ví dụ.

Bạn đang xem : nhóm nút radio html

Nút Radio trong HTML: Hướng dẫn Hoàn chỉnh

< / p>

Trong bài viết này, bạn sẽ tìm hiểu mọi thứ về nút radio HTML. Cách sử dụng, cách nhóm, cách tạo kiểu bằng CSS, thêm các sự kiện kích hoạt trên đó bằng JavaScript, v.v.

Bạn hẳn đã điền vào một số biểu mẫu trực tuyến trước đây và sẽ tương tác với các tùy chọn trong một biểu mẫu mà bạn có nhiều lựa chọn để chọn nhưng chỉ có thể chọn một. Ví dụ về lựa chọn giới tính, lựa chọn nhóm máu, v.v.

Chúng được gọi là các nút radio. Tốt nhất, chỉ có thể chọn một nút radio cho một lựa chọn duy nhất. Ví dụ: bạn có thể chọn nam, nữ hoặc chuyển giới để lựa chọn giới tính.

Nút radio HTML

Nút radio là & lt; input & gt; phần tử của type = “radio” chỉ được sử dụng để chọn một lựa chọn trong số nhiều lựa chọn.

Nó thường được sử dụng trong một biểu mẫu nhưng có thể được sử dụng một mình.

Để tạo một nút radio, hãy đưa & lt; input & gt; phần tử một loại đài. Ví dụ & lt; input type = "radio" & gt;

Đây là một ví dụ về nút radio HTML:

Ví dụ về nút radio HTML

  & lt; input type = "radio" & gt; E-mail
& lt; input type = "radio" & gt; Điện thoại
& lt; input type = "radio" & gt; Thư  

▶ Hãy thử

Đầu ra:

Email Điện thoại Thư

Bạn có thể kiểm tra kết quả ở trên bằng cách nhấp vào nút và bạn sẽ thấy rằng không chỉ có một lựa chọn mà có thể chọn nhiều lựa chọn ở trên. Suy nghĩ tại sao? 💭🤔

Điều này là do không có nút radio nào được kết nối với nhau với mục đích chung. Tất cả chúng đều độc lập và có thể được sử dụng cho các mục đích khác nhau. Nhiều người trong số chúng được chọn cùng một lúc.

Để kết nối chúng với nhau, hãy tạo cho chúng một mục đích chung bằng cách chỉ định thuộc tính tên.

Nhóm nút radio HTML

Thực tế, các nút radio được sử dụng theo nhóm. Vì vậy, khi một nút được chọn thì nút kia đã không được chọn nếu nó đã được chọn trước đó.

Trong một nhóm các nút radio, tất cả các phần tử radio được kết nối. Mỗi lần chỉ có thể chọn một nút.

Đây là một ví dụ mà các nút radio không phải là một phần của một nhóm.

  & lt; input type = "radio" & gt; E-mail
& lt; input type = "radio" & gt; Điện thoại
& lt; input type = "radio" & gt; Thư  

Các nút radio trong ví dụ trên không thuộc bất kỳ nhóm nào.

Một nhóm radio được xác định bởi thuộc tính name. Khi 2 hoặc nhiều nút radio nằm trong một nhóm, chúng có cùng thuộc tính tên.

Khi nhiều nút radio được đặt cùng một tên thì nó sẽ trở thành một phần của một nhóm và khi bạn chọn bất kỳ nút radio nào của nhóm đó, nó sẽ tự động bỏ chọn bất kỳ nút đã chọn nào khác trong nhóm đó.

Ví dụ: HTML Radio Group

  & lt; form & gt;
  & lt; p & gt; Vui lòng chọn cách bạn muốn để liên hệ: & lt; / p & gt;
  & lt; input type = "radio" name = "contact" & gt; E-mail

  & lt; input type = "radio" name = "contact" & gt; Điện thoại

  & lt; input type = "radio" name = "contact" & gt; Thông điệp
& lt; / form & gt;  

▶ Hãy thử

Xem Thêm  Căn bậc hai trong JavaScript - căn bậc hai trong javascript

Kết quả:

Vui lòng chọn cách liên hệ ưa thích của bạn:

Email Điện thoại

​​Trong ví dụ trên, cả ba nút radio đều thuộc một nhóm duy nhất với name = “contact”, đặt họ vào một nhóm duy nhất.

Giá trị Nút Radio

Tất cả các nút radio hiển thị ở trên không có giá trị. Điều này có nghĩa là nếu bạn chọn một cái thì họ sẽ không biết bạn muốn chọn nó với giá trị nào.

Chỉ một tùy chọn được viết trước nó không có nghĩa là nó sẽ lấy nó làm đầu vào.

Để chỉ định giá trị cho nút radio, hãy cung cấp cho nó một thuộc tính giá trị. Ví dụ & lt; input type = "radio" value = "email" & gt;

Ví dụ

  & lt; form & gt;
  & lt; p & gt; Vui lòng chọn cách bạn muốn để liên hệ: & lt; / p & gt;
  & lt; input type = "radio" name = "contact" value = "email" & gt; E-mail

  & lt; input type = "radio" name = "contact" value = "phone" & gt; Điện thoại

  & lt; input type = "radio" name = "contact" value = "message" & gt; Thông điệp
& lt; / form & gt;  

▶ Hãy thử

Kết quả:

Vui lòng chọn cách liên hệ ưa thích của bạn:

Tin nhắn Điện thoại Email

Bây giờ, nếu bạn chọn bất kỳ nút radio nào thì nút đó sẽ có giá trị nút radio làm đầu vào.

 Ezoic

báo cáo quảng cáo này

Bạn đã làm rất nhiều😊 hãy thư giãn trong một phút🍸🍹

Những gì chúng tôi đã đề cập đến bây giờ:

  1. Nút radio được tạo bằng phần tử & lt; input & gt;

    type = “radio”

  2. Nút radio phải có thuộc tính

    name

    để tham gia nhóm.

  3. Nút radio phải có thuộc tính

    value

    để chỉ định giá trị cho nút radio đó.

Nút Radio được Kiểm tra

Tốt hơn nên chọn nút radio có khả năng xảy ra cao nhất theo mặc định vì nếu không có tùy chọn nào được chọn trong khi gửi biểu mẫu thì nhóm radio hoàn toàn không được bao gồm trong dữ liệu đã gửi.

Bạn có thể làm điều đó bằng cách sử dụng thuộc tính đã chọn.

thuộc tính đã kiểm tra là một thuộc tính boolean. Nó đúng hoặc sai.

Chỉ sử dụng check cũng giống như check = “true”.

Ví dụ: Nút radio HTML được chọn mặc định

  & lt; form & gt;
  & lt; p & gt; Vui lòng chọn cách bạn muốn để liên hệ: & lt; / p & gt;
  & lt; input type = "radio" name = "contact" value = "email" & gt; E-mail

  & lt; input type = "radio" name = "contact" value = "phone" đã kiểm tra & gt; Điện thoại

  & lt; input type = "radio" name = "contact" value = "message" & gt; Thông điệp
& lt; / form & gt;  

▶ Hãy thử

Kết quả:

Vui lòng chọn cách liên hệ ưa thích của bạn:

Email Điện thoại Tin nhắn

Thuộc tính Nút Radio

Dưới đây là mô tả ngắn gọn về một số thuộc tính thường được sử dụng trong các nút radio.

Loại mô tả thuộc tính Nó chỉ định loại đầu vào, nó phải được thêm vào để tạo loại nút bạn muốn, tức là tên radio Nó tạo một nhóm radio, 1 hoặc nhiều nút radio có cùng tên đi kèm với cùng một giá trị nhóm. Nó cung cấp giá trị đã chọn vào máy chủ nếu nút radio được chọn. Nó chọn một nút radio theo mặc định

Nhãn Nút Radio

Các nút radio có một khu vực có thể nhấp rất nhỏ, bạn phải trỏ vào hộp nhỏ để nhấp vào nó. Tuy nhiên, bạn có thể tăng diện tích có thể nhấp bằng cách sử dụng nhãn có nút radio.

Nhãn nút radio được tạo bằng phần tử & lt; label & gt; .

Nhãn nút radio phải có thuộc tính for nhắm mục tiêu đến nút radio.

Và nút radio phải có thuộc tính id có cùng giá trị được sử dụng cho thuộc tính.

Ví dụ: Nhãn nút radio HTML

 & lt; input type = "radio" name = "contact" value = "email" id = "email" đã kiểm tra & gt;
& lt; label for = "email" & gt ;: Email & lt; / label & gt;

& lt; input type = "radio" name = "contact" value = "phone" id = "phone" & gt;
& lt; label for = "phone" & gt ;: Phone & lt; / label & gt;

& lt; input type = "radio" name = "contact" value = "message" id = "message" & gt;
& lt; label for = "message" & gt ;: Message & lt; / label & gt;  

▶ Hãy thử

Đầu ra:

: Email: Điện thoại: Tin nhắn

Giờ đây, khu vực có thể nhấp của nút radio được tăng lên. Bạn có thể chọn bất kỳ nút radio nào bằng cách nhấp vào nhãn hoặc bằng cách nhấp vào nút radio.

Nhấp vào nút radio

Bạn có thể kích hoạt một sự kiện để biết nút radio nào được chọn. Đối với điều này, hãy chọn tất cả các nút radio và thêm sự kiện onclick vào tất cả các nút.

Khi nút được chọn, sự kiện sẽ được kích hoạt và bạn có thể cảnh báo một thông báo bằng nó.

Ví dụ

  // chọn nút radio
const button = document.querySelectorAll ("input [type = 'radio']");

// thêm sự kiện vào tất cả các nút radio
button.forEach (button = & gt; {
  button.onclick = () = & gt; {
    if (button.checked) {
      alert (button.value + "được chọn làm tùy chọn liên hệ!");
    }
  }
})  

▶ Hãy thử

Đầu ra:

Email Điện thoại Thư

Kiểu Nút Radio

Tạo nút radio tùy chỉnh của riêng bạn và tạo kiểu bằng CSS vì nút radio của trình duyệt được tạo kiểu bởi chính trình duyệt.

Đặt mã HTML cho biểu mẫu có nút radio như sau:

  & lt; form & gt;
  & lt; nhãn & gt; Email
    & lt; input type = "radio" name = "radio" value = "email" đã được kiểm tra & gt;
    & lt; span class = "custom-radio-button" & gt; & lt; / span & gt;
  & lt; / label & gt;
  & lt; nhãn & gt; Điện thoại
    & lt; input type = "radio" name = "radio" value = "phone" & gt;
    & lt; span class = "custom-radio-button" & gt; & lt; / span & gt;
  & lt; / label & gt;
  & lt; nhãn & gt; Thư
    & lt; input type = "radio" name = "radio" value = "mail" & gt;
    & lt; span class = "custom-radio-button" & gt; & lt; / span & gt;
  & lt; / label & gt;
  & lt; br & gt;
  & lt; input type = "submit" value = "Gửi" & gt;
& lt; / form & gt;  

Đây là mã CSS hoàn chỉnh để tạo nút radio theo kiểu tùy chỉnh.

Ví dụ

  nhãn {
  hiển thị: khối;
  chức vụ: thân nhân;
  padding-left: 50px;
  lề: 10px 0;
  con trỏ: con trỏ;
  font-size: 20px;
}

/ * Ẩn nút radio mặc định * /
đầu vào nhãn {
  vị trí: tuyệt đối;
  độ mờ: 0;
  con trỏ: con trỏ;
}

/ * Tạo nút radio riêng để tạo kiểu * /
.custom-radio-button {
  vị trí: tuyệt đối;
  đầu: 0;
  trái: 0;
  chiều cao: 24px;
  chiều rộng: 24px;
  màu nền: #eee;
  bán kính biên giới: 50%;
}

/ * hiệu ứng di chuột trên các nút không được chọn * /
label: hover input + .custom-radio-button {
  nền: #fdd;
}

/ * đã chọn nút * /
đầu vào nhãn: đã chọn + .custom-radio-button {
  màu nền: # bd1c10;
}

/ * Chấm trắng trên nút radio đã chọn (ẩn) * /
nhãn .custom-radio-button :: after {
  Nội dung: "";
  không trưng bày;
  vị trí: tuyệt đối;
  chiều rộng: 10px;
  chiều cao: 10px;
  bán kính biên giới: 50%;
  nền: trắng;
  top: 50%;
  trái: 50%;
  biến đổi: dịch (-50%, -50%);
}

/ * Hiển thị dấu chấm trên nút đã chọn * /
đầu vào nhãn: đã chọn + .custom-radio-button :: after {
  hiển thị: khối;
}

input [type = "submit"] {
  biên giới: không có;
  màu trắng;
  font-size: 18px;
  đệm: 5px 15px;
  nền: # bd1c10;
  bán kính biên giới: .25rem;
}  

▶ Hãy thử

Đầu ra:

Biểu diễn Dữ liệu của Nhóm Radio

Khi biểu mẫu được gửi bằng nút radio thì dữ liệu của biểu mẫu bao gồm một mục nhập ở dạng tên biểu mẫu = value, ở đây trong trường hợp trên, một tùy chọn có thể là contact = email.

Nếu không có thuộc tính giá trị nào trong nút radio thì dữ liệu liên quan đến nút radio sẽ không được báo cáo cho máy chủ.

Kết luận

Bạn đã tìm hiểu về các nút radio. Tạo một nhóm các nút radio. Các loại thuộc tính khác nhau trong đó. Kích hoạt sự kiện khi nút được chọn và học cách tạo kiểu cho các nút radio.

Bạn cũng có thể tạo kiểu cho các nút radio bằng CSS.


Xem thêm những thông tin liên quan đến chủ đề nhóm nút radio html

Create a Set of Radio Buttons Free Code Camp Org Basic HTML and HTML5

alt

  • Tác giả: F3ND1MUS
  • Ngày đăng: 2020-10-13
  • Đánh giá: 4 ⭐ ( 4860 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: FOLLOW ALONG LINK: https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons

    Check out the FreeCodeCamp.org Courses Here
    https://www.freecodecamp.org/learn/

    Check out my playlist for Basic HTML and HTML5 from Free Code Camp.Org here:
    https://www.youtube.com/playlist?list=PLhcxfEf5Q1Ze6LBhVvPWMISVpcxmamM3A

    This video is part of the Responsive Web Design Certification 300 hours Course, under the section
    called: Basic HTML and HTML5

    If you have any questions leave them in the comment section below, please follow along and learn and grow a little bit everyday by doing productive tasks everyday.

    Understanding is best achieved through practicing and reading the material for yourself, watching will only provide so much immersion, although for some it may be adequate, for most it will not. This means doing the code is very important to gaining the experience and skills.

    I am very much a beginner in programming and coding, this is my experience through this course, I may stumble, fall or even fail, but I will always dust myself off and come back when I am ready after a break, or some rest if needed, this cycle is continuous through life, and I suggest all students understand this and accept it for what it is.

    Never stop learning.

    Thank you for your time, I hope you found this video helpful.

    F3ND1MUS

    Permission to use the material on FreeCodeCamp.org is created with permission based on public information posted by Quincy Larson of FreeCodeCamp.org, for more information see here:
    https://youtuberfriendlycompanies.blogspot.com/2020/09/free-code-camporg.html

    THANK YOU QUINCY LARSON AND FREE CODE CAMP.ORG TEAM!

    For more F3ND1MUS information go here:
    https://f3nd1mus.wordpress.com/ [RESOLVED/SORT OF] FreeCodeCamp.org not Working with Internet Explorer Microsoft Edge Safari etc
    https://f3nd1mustechproblems.blogspot.com/2020/10/resolvedsort-of-freecodecamporg-not.html

HTML

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

Sự kiện cho nút radio là gì?

  • Tác giả: presbyteryofstockton.org
  • Đánh giá: 3 ⭐ ( 9680 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hầu hết các trình duyệt kích hoạt thay đổi khi nút radio được chọn, nhưng Internet Explorer trước phiên bản 9 sẽ kích hoạt thay đổi khi bỏ chọn nút radio.

HTML: Nhiều nhóm nút radio trong một biểu mẫu

  • Tác giả: vi.fmihm.org
  • Đánh giá: 4 ⭐ ( 3797 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có thể có nhiều nhóm nút radio trong một hình thức duy nhất không? Thường chọn một nút bỏ chọn trước đó, tôi chỉ cần bỏ chọn một trong nhóm.
    <>

Radio button trong HTML

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

Thẻ radio button và checkbox trong HTML

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

46 Radio Và Checkbox HTML Cho Website

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 3 ⭐ ( 6757 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết hôm nay mình sẽ giới thiệu đến bạn các ví dụ input radio html và checkbox html cho trang web nhé.

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

Xem Thêm  Cách thêm Javascript vào HTML - thêm tệp javascript vào html

By ads_php