Dokumentacja HTML z przykładami: Radio button

Q: Jak zrobić przyciski radio w HTML?

Napisz jeden na każdą opcję, nadaj wszystkim ten sam name i różne value, a każdy umieść w : Medium . Wspólna nazwa tworzy z nich jedną grupę, w której można wybrać tylko jeden przycisk.

Q: Dlaczego mogę zaznaczyć więcej niż jeden przycisk radio?

Przyciski nie mają tego samego name. Przyciski radio tworzą grupę tylko przez identyczny name (w tym samym formularzu), a w każdej grupie można wybrać tylko jeden przycisk.

Q: Jak odczytać wartość zaznaczonego przycisku radio w JavaScript?

Użyj form.elements.size.value, gdzie size to nazwa grupy; zwraca wartość zaznaczonego przycisku albo pusty napis, jeśli nic nie jest zaznaczone. Bez formularza: document.querySelector('input[name="size"]:checked')?.value.

Q: Jak ustawić domyślnie zaznaczony przycisk radio?

Dodaj checked do jednego przycisku w grupie: . Jeśli ma go kilka, wygrywa ostatni.

Jak zrobić przyciski radio w HTML

Przyciski radio pozwalają czytelnikowi wybrać dokładnie jedną opcję z grupy. Każda opcja to <input type="radio">, a grupę tworzy nadanie im tego samego name. Wybierz rozmiar i naciśnij Order:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Size</legend>
      <label><input type="radio" name="size" value="s"> Small</label>
      <label><input type="radio" name="size" value="m" checked> Medium</label>
      <label><input type="radio" name="size" value="l"> Large</label>
    </fieldset>
    <p><button type="submit">Order</button></p>
  </form>
</body>
</html>

Formularz wysyła jedną parę, size=m: name grupy i value zaznaczonego przycisku. Elementy:

Ten sam name na każdym przycisku grupy. Zaznaczenie jednego odznacza pozostałe.
Różne value na każdym. To właśnie dostaje serwer. Radio bez value wysyła on, co nic serwerowi nie mówi.
checked na opcji domyślnej.
<label> wokół każdego, żeby tekst był klikalny, oraz <fieldset> z <legend>, żeby czytniki ekranu ogłaszały pytanie ("Size") razem z każdą opcją.

Nazwa tworzy grupę

Przyciski radio z różnymi nazwami to osobne grupy i każda ma własny wybór. Ten przykład ma dwie grupy oraz zepsuty zestaw, w którym każdy przycisk przez pomyłkę dostał własną nazwę:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio groups</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 16px; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    .broken { border-color: #dc2626; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <fieldset>
    <legend>Crust</legend>
    <label><input type="radio" name="crust" value="thin" checked> Thin</label>
    <label><input type="radio" name="crust" value="thick"> Thick</label>
  </fieldset>
  <fieldset>
    <legend>Sauce</legend>
    <label><input type="radio" name="sauce" value="tomato" checked> Tomato</label>
    <label><input type="radio" name="sauce" value="pesto"> Pesto</label>
  </fieldset>
  <fieldset class="broken">
    <legend>Broken: different names</legend>
    <label><input type="radio" name="a" value="1"> One</label>
    <label><input type="radio" name="b" value="2"> Two</label>
    <label><input type="radio" name="c" value="3"> Three</label>
  </fieldset>
</body>
</html>

Kliknij wszystkie trzy w zepsutej grupie: wszystkie zostają zaznaczone i żadnego nie da się odznaczyć, co łączy najgorsze cechy obu rozwiązań. Przyciski radio grupują się według name w obrębie tego samego formularza, więc dwa formularze mogą mieć każdy własną grupę name="size".

Wymagane grupy i brak wartości domyślnej

required na dowolnym przycisku grupy oznacza, że przed wysłaniem formularza jeden z nich musi być zaznaczony. Pominięcie checked zmusza czytelnika do świadomego wyboru, co jest słuszne, gdy nie ma sensownej wartości domyślnej:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Required radio group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>How did you hear about us?</legend>
      <label><input type="radio" name="source" value="search" required> Search engine</label>
      <label><input type="radio" name="source" value="friend"> A friend</label>
      <label><input type="radio" name="source" value="video"> A video</label>
      <label><input type="radio" name="source" value="other"> Other</label>
    </fieldset>
    <p><button type="submit">Continue</button></p>
  </form>
</body>
</html>

Naciśnij Continue bez wyboru, a przeglądarka zatrzyma wysyłanie z komunikatem. Gdy tylko dowolna opcja zostanie wybrana, cała grupa jest poprawna. Niezaznaczona grupa, która nie jest wymagana, nie wysyła niczego, podobnie jak niezaznaczony checkbox.

Kliknięcie może zaznaczyć przycisk radio, ale nigdy go odznaczyć. Jeśli po dokonaniu wyboru musi być możliwy "brak odpowiedzi", dodaj dla niego osobną opcję.

Odczyt wybranej wartości w JavaScript

form.elements.name zwraca całą grupę, a jej .value to wartość zaznaczonego przycisku (pusty napis, gdy nic nie jest zaznaczone). Zdarzenie change zachodzi na przycisku, który został zaznaczony:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selected value</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { margin-inline-end: 12px; }
    #price { font-size: 1.4em; font-weight: bold; color: #2563eb; }
  </style>
</head>
<body>
  <form id="billing">
    <label><input type="radio" name="period" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="period" value="yearly"> Yearly</label>
  </form>
  <p>Price: <span id="price"></span></p>

  <script>
    const form = document.querySelector('#billing');
    const prices = { monthly: '12 per month', yearly: '96 per year' };
    const show = () => {
      document.querySelector('#price').textContent = prices[form.elements.period.value];
    };
    form.addEventListener('change', show);
    show();
  </script>
</body>
</html>

Nasłuchiwanie jest na formularzu, więc wyłapuje zmianę w każdym z jego pól. Poza formularzem znajdziesz zaznaczony przycisk przez document.querySelector('input[name="period"]:checked').

Obsługa klawiatury

Grupa radio to jeden przystanek w kolejności Tab. Tab wchodzi do grupy i trafia na zaznaczony przycisk (albo na pierwszy, gdy nic nie jest zaznaczone), a strzałki przenoszą zaznaczenie między opcjami. Kolejny Tab opuszcza grupę. Dostajesz to za darmo z prawdziwymi polami radio o wspólnym name i to kolejny powód, żeby nie odtwarzać przycisków radio z elementów <div>.

Stylowanie przycisków radio

accent-color zmienia kolor natywnego przycisku radio. appearance: none pozwala narysować własne kółko. A ponieważ ukryty przycisk radio nadal można zaznaczyć przez jego etykietę, grupa może wyglądać jak zestaw kart i zachować całe zachowanie radio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .accent { accent-color: #16a34a; }

    .dot {
      appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 50%;
      vertical-align: middle;
    }
    .dot:checked { border: 6px solid #2563eb; }
    .dot:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

    .cards { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 16px 0 0; }
    .card { display: block; padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer; }
    .card input { position: absolute; opacity: 0; }
    .card:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
    .card:has(input:focus-visible) { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="radio" class="accent" name="c1" checked> accent-color</label>
  <label><input type="radio" class="accent" name="c1"> accent-color</label>
  <p>
    <label><input type="radio" class="dot" name="c2" checked> Custom</label>
    <label><input type="radio" class="dot" name="c2"> Custom</label>
  </p>
  <fieldset class="cards">
    <legend>Plan</legend>
    <label class="card"><input type="radio" name="plan" value="free" checked> Free</label>
    <label class="card"><input type="radio" name="plan" value="pro"> Pro</label>
    <label class="card"><input type="radio" name="plan" value="team"> Team</label>
  </fieldset>
</body>
</html>

Własne kółko po zaznaczeniu to po prostu gruba ramka. Karty ukrywają pole przez opacity: 0, a nie display: none, więc nadal może dostać fokus, a strzałki dalej działają, zaś :has(input:checked) stylizuje wybraną kartę. :has() działa w obecnych wersjach Chrome, Firefoksa i Safari.

Radio, checkbox czy select?

Użyj	Kiedy
Przycisków radio	Jeden wybór z kilku opcji (około 2 do 6), które powinny być widoczne naraz
Checkboxów	Dowolna liczba wyborów, łącznie z żadnym
`<select>`	Jeden wybór z długiej listy, na przykład krajów (zobacz select w HTML)

Częste błędy

Różne name w jednej grupie. Każdy przycisk można zaznaczyć i żadnego nie da się wyczyścić.
Brak value. Serwer dostaje on niezależnie od wyboru.
Ukrywanie pola przez display: none we własnym projekcie. Nie da się już ustawić na nim fokusu ani obsłużyć go klawiaturą.
Brak <fieldset> i <legend>. Czytniki ekranu ogłaszają "Small, radio button" bez pytania, do którego to należy.
Pojedynczy przycisk radio jako pole "Zgadzam się". Nie da się go nigdy odznaczyć; użyj checkboxa.
checked na kilku przyciskach jednej grupy. Zaznaczony zostaje tylko ostatni.

Najczęściej zadawane pytania

Jak zrobić przyciski radio w HTML?

Napisz jeden <input type="radio"> na każdą opcję, nadaj wszystkim ten sam name i różne value, a każdy umieść w <label>: <label><input type="radio" name="size" value="m"> Medium</label>. Wspólna nazwa tworzy z nich jedną grupę, w której można wybrać tylko jeden przycisk.

Dlaczego mogę zaznaczyć więcej niż jeden przycisk radio?

Przyciski nie mają tego samego name. Przyciski radio tworzą grupę tylko przez identyczny name (w tym samym formularzu), a w każdej grupie można wybrać tylko jeden przycisk.

Jak odczytać wartość zaznaczonego przycisku radio w JavaScript?

Użyj form.elements.size.value, gdzie size to nazwa grupy; zwraca wartość zaznaczonego przycisku albo pusty napis, jeśli nic nie jest zaznaczone. Bez formularza: document.querySelector('input[name="size"]:checked')?.value.

Jak ustawić domyślnie zaznaczony przycisk radio?

Dodaj checked do jednego przycisku w grupie: <input type="radio" name="plan" value="free" checked>. Jeśli ma go kilka, wygrywa ostatni.

Czy da się odznaczyć przycisk radio?

Nie przez kliknięcie; kliknięcie tylko zaznacza. Dodaj opcję "Brak", zresetuj formularz albo ustaw button.checked = false w JavaScript. Jeśli wybór ma być opcjonalny i dać się cofnąć, lepiej może pasować checkbox albo select.

Powiązane zagadnienia