Çalıştırılabilir HTML Dokümanları: Radio buton

Q: HTML'de radio buton nasıl yapılır?

Her seçenek için bir yaz, hepsine aynı name ve farklı bir value ver ve her birini bir içine koy: Medium . Ortak ad onları yalnızca birinin seçilebildiği tek bir grup yapar.

Q: Neden birden fazla radio buton seçebiliyorum?

Butonlar aynı name değerini paylaşmıyor. Radio butonlar yalnızca (aynı formda) birebir aynı name ile grup oluşturur ve her grupta yalnızca bir buton seçilebilir.

Q: JavaScript'te seçilen radio butonun değerini nasıl alırım?

size grubun adı olmak üzere form.elements.size.value kullan; seçilen butonun değerini, hiçbiri seçili değilse boş bir string döndürür. Form olmadan: document.querySelector('input[name="size"]:checked')?.value.

Q: Varsayılan bir radio buton nasıl ayarlanır?

Gruptaki bir butona checked ekle: . Birkaç tanesinde varsa sonuncusu kazanır.

HTML'de radio buton nasıl yapılır

Radio butonlar okurun bir gruptan tam olarak bir seçenek seçmesini sağlar. Her seçenek bir <input type="radio"> elementidir ve onları bir grup yapan şey aynı name değerini almalarıdır. Bir beden seç ve Order'a bas:

<!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>

Form tek bir çift gönderir, size=m: grubun name değeri ve seçilen butonun value değeri. Parçalar:

Gruptaki her butonda aynı name değeri. Birini seçmek diğerlerinin seçimini kaldırır.
Her birinde farklı bir value değeri. Sunucunun aldığı budur. value olmayan bir radio on gönderir, bu da sunucuya hiçbir şey söylemez.
Varsayılan seçenekte checked.
Metin tıklanabilir olsun diye her birinin çevresinde bir <label>, ekran okuyucular soruyu ("Size") her seçenekle birlikte duyursun diye de bir <legend> ile <fieldset>.

Grubu name oluşturur

Farklı adlara sahip radio'lar ayrı gruplardır ve her grubun kendi seçimi vardır. Bu örnekte iki grup ve her radio'nun yanlışlıkla kendi adını aldığı bozuk bir set var:

<!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>

Bozuk gruptaki üçüne de tıkla: hepsi seçili kalır ve hiçbiri yeniden kapatılamaz; iki dünyanın en kötüsü. Radio'lar aynı form içinde name ile gruplanır, bu yüzden iki formun her birinin kendi name="size" grubu olabilir.

Zorunlu gruplar ve varsayılan olmaması

Gruptaki herhangi bir radio üzerindeki required, form gönderilmeden önce birinin seçilmesi gerektiği anlamına gelir. checked kullanmamak okuru aktif olarak seçim yapmaya zorlar; mantıklı bir varsayılan olmadığında doğrusu budur:

<!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>

Seçim yapmadan Continue'ya bas, tarayıcı gönderimi bir mesajla durdurur. Herhangi bir seçenek seçildiğinde bütün grup geçerli olur. Zorunlu olmayan ve seçim yapılmamış bir grup, işaretlenmemiş bir checkbox gibi hiçbir şey göndermez.

Bir tıklama bir radio'yu seçebilir ama seçimini asla kaldıramaz. Bir seçim yapıldıktan sonra "cevap yok" mümkün olmalıysa, bunun için açık bir seçenek ekle.

Seçilen değeri JavaScript'te okumak

form.elements.name bütün grubu döndürür ve .value değeri seçili radio'nun değeridir (hiçbiri seçili değilse boş bir string). change olayı seçili hâle gelen radio üzerinde tetiklenir:

<!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>

Dinleyici formun üzerinde olduğu için herhangi bir alanındaki değişikliği yakalar. Form dışında seçili radio'yu document.querySelector('input[name="period"]:checked') ile bul.

Klavye davranışı

Bir radio grubu Tab sırasında tek bir duraktır. Tab gruba girer ve seçili radio'ya (hiçbiri seçili değilse ilkine) düşer, ok tuşları da seçimi seçenekler arasında taşır. Tab'a yeniden basmak gruptan çıkar. Bu, aynı name değerini paylaşan gerçek radio input'larında hiçbir ek iş olmadan gelir; radio'ları <div> elementlerinden yeniden kurmamak için bir neden daha.

Radio butonlara stil vermek

accent-color yerel radio'yu yeniden renklendirir. appearance: none kendi daireni çizmeni sağlar. Gizli bir radio label'ı üzerinden yine de seçilebildiği için, bir grup tüm radio davranışını korurken bir kart seti gibi görünebilir:

<!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>

Özel daire, işaretliyken yalnızca kalın bir kenarlıktır. Kartlar input'u display: none yerine opacity: 0 ile gizler, böylece input odaklanabilir kalır ve ok tuşları çalışmaya devam eder; :has(input:checked) da seçili karta stil verir. :has() güncel Chrome, Firefox ve Safari'de çalışır.

Radio, checkbox mu yoksa select mi?

Kullan	Ne zaman
Radio butonlar	Hepsi görünür olması gereken birkaç seçenekten (yaklaşık 2 ile 6 arası) tek seçim
Checkbox'lar	Hiç seçim dahil istenen sayıda seçim
Bir `<select>`	Ülkeler gibi uzun bir listeden tek seçim (bkz. HTML açılır liste)

Sık yapılan hatalar

Tek bir grupta farklı name değerleri. Her radio seçilebilir ve hiçbiri temizlenemez.
value olmaması. Sunucu ne seçilirse seçilsin on alır.
Özel bir tasarımda input'u display: none ile gizlemek. Artık odaklanamaz ya da klavyeyle kullanılamaz.
<fieldset> ve <legend> olmaması. Ekran okuyucular yanında hiçbir soru olmadan "Small, radio button" duyurur.
"Kabul ediyorum" kutusu için tek bir radio buton. İşareti asla kaldırılamaz; bir checkbox kullan.
Bir grubun birkaç radio'sunda checked. Yalnızca sonuncusu seçili kalır.

Sıkça Sorulan Sorular

HTML'de radio buton nasıl yapılır?

Her seçenek için bir <input type="radio"> yaz, hepsine aynı name ve farklı bir value ver ve her birini bir <label> içine koy: <label><input type="radio" name="size" value="m"> Medium</label>. Ortak ad onları yalnızca birinin seçilebildiği tek bir grup yapar.

Neden birden fazla radio buton seçebiliyorum?

Butonlar aynı name değerini paylaşmıyor. Radio butonlar yalnızca (aynı formda) birebir aynı name ile grup oluşturur ve her grupta yalnızca bir buton seçilebilir.

JavaScript'te seçilen radio butonun değerini nasıl alırım?

size grubun adı olmak üzere form.elements.size.value kullan; seçilen butonun değerini, hiçbiri seçili değilse boş bir string döndürür. Form olmadan: document.querySelector('input[name="size"]:checked')?.value.

Varsayılan bir radio buton nasıl ayarlanır?

Gruptaki bir butona checked ekle: <input type="radio" name="plan" value="free" checked>. Birkaç tanesinde varsa sonuncusu kazanır.

Bir radio butonun seçimi kaldırılabilir mi?

Ona tıklayarak kaldırılamaz; tıklama yalnızca seçer. Bir "Hiçbiri" seçeneği sun, formu sıfırla ya da JavaScript'te button.checked = false ata. Seçim isteğe bağlı ve kaldırılabilir olmalıysa bir checkbox ya da select daha uygun olabilir.

İlgili kavramlar