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 : ví dụ về nút radio

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  GROUP BY (Transact-SQL) - Máy chủ SQL - nhóm cú pháp sql bởi

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ủ đề ví dụ về nút radio

Kinh-Tài Radio 23-06-2022

alt

  • Tác giả: Chàng-Ngốc-Già (TS. Võ Đình Trí)
  • Ngày đăng: 2022-06-22
  • Đánh giá: 4 ⭐ ( 7719 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tin Trong Nước:
    Thông tư 06/2022/TT-BKHĐT hỗ trợ doanh nghiệp vừa và nhỏ
    Vẫn chưa bỏ/giảm thuế tiêu thụ đặc biệt với xăng
    Cần thêm quỹ đầu tư chuyên nghiệp
    Cổ đông lớn mua lại cổ phiếu

    Tin Quốc Tế:
    Nhật lo sợ suy thoái từ Mỹ ảnh hưởng
    Lo ngại suy thoái tiếp tục tăng
    Lợi nhuận quý 2 có thể khó khăn
    Fed đi hàng 2: chống lạm phát và không khơi mào suy thoái

Angular2 – Liên kết nút radio

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 2928 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] sử dụng [value] = “1” thay vì value = “1”

Thêm hộp danh sách, danh sách thả xuống hoặc nút radio vào ứng dụng canvas – Power Apps

  • Tác giả: docs.microsoft.com
  • Đánh giá: 5 ⭐ ( 3354 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong Power Apps, hãy tạo hoặc đặt cấu hình các tùy chọn nhiều lựa chọn trong ứng dụng canvas

Các kiểu input trong HTML

  • Tác giả: tedu.com.vn
  • Đánh giá: 5 ⭐ ( 9990 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

Java: Cách sử dụng Button, Check Box và Radio

  • Tác giả: v1study.com
  • Đánh giá: 3 ⭐ ( 2405 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng Button, Check Box và Radio

Danh sách nút radio liên kết dữ liệu với Angular 2

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 2068 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giả sử bạn có một danh sách hoặc bảng các phần tử đơn giản, mỗi hàng có một nút radio. Người dùng có thể chọn một trong các hàng và nhiệm vụ của bạn là xác định mục nhập hàng đã chọn. Về cơ…

[Selenium C#] Bài 8: Cách xử lý Radio Button, Checkbox, Dropdown

  • Tác giả: anhtester.com
  • Đánh giá: 3 ⭐ ( 4907 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách xử lý Radio button, Checkbox, Dropdown, Tag Input trong các dạng form điền thông tin trong Selenium C#.

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  Hàm Text và các ứng dụng tuyệt vời của hàm Text trong Excel - haàm text

By ads_php