Nút radio trong HTML (Hướng dẫn đầy đủ với 10 ví dụ) – nút radio trên biểu mẫu là gì

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 : nút radio trên biểu mẫu là gì

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 phải đ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 nút radio, hãy đưa & lt; đầu vào & 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ử

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

Trong ví dụ trên, cả ba nút radio đều thuộc một nhóm duy nhất với name = “contact” sẽ đưa 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ị. Thí 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ử

Xem Thêm  Ví dụ về mã liên kết nút HTML - Cách tạo siêu liên kết HTML bằng thuộc tính HREF trên thẻ - siêu liên kết trong html

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 là 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:

Gửi Email Điện thoại

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 ghim 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" đã được 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 ;: Điện thoại & 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 * /
nhãn: đầu vào di chuột + .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 = giá trị, ở đâ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ủ đề nút radio trên biểu mẫu là gì

JSP Tutorial #20 – JSP Forms Radio Buttons

alt

  • Tác giả: luv2code
  • Ngày đăng: 2017-02-09
  • Đánh giá: 4 ⭐ ( 3520 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: FULL COURSE: JSP, Servlets and JDBC (80+ videos)
    http://www.luv2code.com/jsp (SPECIAL DISCOUNT)

    —-

    This JSP tutorial series will help you quickly get up to speed with JSP.

    Download Tutorial Source Code: http://www.luv2code.com/downloads/youtube-jsp/jsp-tutorial-source-code-lite.zip

    —-

    View more videos on the playlist: JSP Tutorial: https://goo.gl/fFVMrj

    Closed-Captioning and English subtitles available for this JSP Tutorial.

    —-

    Follow luv2code for more JSP tutorial:

    Website: http://www.luv2code.com
    YouTube: http://goo.gl/EV6Kwv
    Twitter: http://goo.gl/ALMzLG
    Facebook: http://goo.gl/8pDRdA

    If you liked my JSP tutorial, then join my mailing list: Get exclusive access to new Java tutorials.

    – http://www.luv2code.com/joinlist

    Questions or problems about this JSP tutorial? Post them in the comments section below.

    Want to suggest a video for my JSP tutorial? Leave a comment below. I’m always looking for new video ideas.

    Let me know what video you’d like for me to create.

    Premium JSP Course

    Need More Details on JSP?
    – See my Premium JSP and Servlets course (80+ videos)
    – http://www.luv2code.com/jsp

    JSP Tutorial Transcript

    Hello. In this video I’m going to show you how to build HTML forms with radio buttons. I’ll cover the following topics. First off, I’ll start off with the radio button demo, then we’ll look at the actual HTML code for building radio buttons, and finally we’ll pull it all together with the full JSP page example. A lot of good things here. Let’s go ahead and get started.

    All right, so here’s the radio button demo. We’ll have the student’s first name and last name but now we want to have the student choose their favorite programming language. Here we’ll give the first name and last name and then they can go through and select their language, Java, PHP, C, or Ruby. Once they have their favorite language selected, then they can go ahead and hit submit. What we’ll do is we’ll actually generate a confirmation page with the language that they selected. Here I give the student’s favorite programming language and in this example the user chose PHP.

    Let’s go ahead and look at the HTML here for radio buttons. You’ll set up your input type of radio and you give the name, favorite language, and the value “Java” and then an actual label for the user to see. You repeat this for each one of the languages here, for C, PHP, and Ruby. The key here is that the input type equals “radio.” That will give you a radio button.

    All right, so let’s go ahead and pull it together with an example. We’ll have a student radio form where our user will enter their information and they can choose their favorite programming language. They’ll hit submit and they’ll go across to a JSP page that will actually process it and display the student’s favorite programming language.

    As you know I love to do lists here. The first thing we have to do is create our HTML form and then the second thing is create the JSP confirmation page. A lot of good things here. Let’s go ahead and start coding.

    Let’s go ahead and move into Eclipse. Just like all the previous videos, we’ll continue to use the same project, JSP Demo. Also like the previous video, we’re going to make use of the student form as our starting point and we’re going to simply copy it and rename it. I’ll just right-click on student-form.html, I’ll select “copy,” and then I’ll right-click on it and select “paste.” When I paste it, I am going to give it a new name. The new name that I’ll call it is student-radio-form.html. Once I’m happy with that, I’ll go ahead and click the okay button.

    Here’s our form, student-radio-form.html. Let’s go ahead and double-click this. Let’s expand the window here for a second. The first thing that we need to do on line seven is just update the response page. The response is going to be “student-radio-response.jsp.” We haven’t created that page yet but that’s where we’ll actually send the data when we submit the form.

    A lot of this stuff is from before. What I’d like to do is go ahead and enter the HTML here for the radio buttons. I’ll start off here with the favorite programming language. Then I’ll set up the input type. The input type equals “radio” and the name equals “favorite language.” That’s the actual form field name. Then the value equals “Java.” This is for this given radio button. I’ll also just put the label out there to the right.

    Then what I can do is just copy this X number of times for all of the other programming languages. I’ll just kind of speed the video up here real quick and just update it for C, PHP, and Ruby. But now here’s the end result. I’ve basically I have four radio buttons here and they’re for each one of the programming languages. The key here again is the input type equals “radio.”

    End of JSP Tutorial transcript.

Làm cách nào để chèn các nút radio hoặc nút tùy chọn trong Excel?

  • Tác giả: vi.extendoffice.com
  • Đánh giá: 5 ⭐ ( 7016 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Office Tab mang đến cho bạn các tab trong Office, Classic Menu mang lại các công cụ menu office 2003, Kutools cho excel mang đến cho bạn các công cụ Excel mạnh mẽ, chúng tôi mang đến cho bạn các phần bổ trợ Office chuyên nghiệp.

Bài 6: Biểu Mẫu Là Gì

  • Tác giả: viviancosmetics.vn
  • Đánh giá: 5 ⭐ ( 6271 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mục tiêu của bài Biểu mẫu nhằm giúp các em nắm được các lệnh và thao tác cơ sở để tạo biểu mẫu; biết sử dụng thuật sĩ để tạo biểu mẫu đơn giản, sử dụng biểu mẫu để hiển thị từng bản ghi, chỉnh sửa biểu mẫu ở chế độ thiết kế, Mời các em cùng theo dõi nội dung của bài học dưới đây

Thẻ radio button và checkbox trong HTML

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

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

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 3746 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”

Biểu mẫu trong HTML

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

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

  • Tác giả: presbyteryofstockton.org
  • Đánh giá: 3 ⭐ ( 3500 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.

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 hiển thị video bằng HTML - cách hiển thị video trong html