HTML Checkbox ve Radio Button Kullanımı

Checkbox ile radio arasındaki fark

Checkbox hangi veriyi gönderir?

Bir onay kutusunun value değeri kullanıcıya gösterilmez; yalnızca sunucuya giden veride kullanılır. Kutu işaretliyse form name=value çiftini gönderir. MDN'in örneğinde name="subscribe" ve value="newsletter" taşıyan işaretli bir kutu subscribe=newsletter olarak gider. value yazmazsanız varsayılan değer on dizesidir ve veri subscribe=on olur.

<form action="/bulten" method="post">
  <input type="checkbox" id="bulten" name="abone" value="bulten" />
  <label for="bulten">Haftalık bültene abone olmak istiyorum</label>
  <button type="submit">Kaydet</button>
</form>

Asıl şaşırtıcı kural şudur: kutu işaretli değilse ne adı ne değeri gönderilir. MDN, işaretsiz durumu yalnızca HTML ile ifade etmenin bir yolu olmadığını açıkça söyler; value="isaretsiz" gibi bir değer bunu sağlamaz. Sunucunuz "alan gelmediyse işaretlenmemiştir" diye düşünmelidir. İşaretsiz durumda da bir değer gönderilmesi gerekiyorsa MDN'in önerisi, JavaScript ile forma o durumu belirten bir type="hidden" alan eklemektir.

checked özniteliği varsayılanı belirler, anlık durumu değil

checked bir Boolean özniteliktir ve sayfa yüklendiğinde kutunun işaretli gelmesini sağlar. MDN önemli bir ayrıntıyı vurgular: bu içerik özniteliği kutunun o anki durumunu göstermez. Kullanıcı kutuyu işaretleyip kaldırdığında HTML'deki checked özniteliği değişmez; yalnızca DOM'daki HTMLInputElement nesnesinin checked özelliği güncellenir. Betikte anlık durumu okumak için her zaman bu özelliği kullanın.

MDN bir tarayıcı farkını da not eder: Firefox, diğer tarayıcılardan farklı olarak bir input'un dinamik işaret durumunu sayfa yeniden yüklendiğinde varsayılan olarak korur. Bu davranış autocomplete özniteliğiyle denetlenir; autocomplete="off" özelliği kapatır. Ayrıntılar autocomplete yazısında.

Aynı adı taşıyan birden çok onay kutusu

İlgi alanı gibi birden çok seçim yapılabilen listelerde bütün kutulara aynı name verilir ve her birine farklı bir value yazılır. İki kutu işaretlenip form gönderildiğinde veri ilgi=kod&ilgi=muzik biçiminde gider. MDN'in uyarısına göre sunucu bu veriyi ilişkisel bir dizi gibi okursa yalnızca son değeri alabilir; aynı adın bütün değerlerini toplayacak şekilde ayrıştırmanız gerekir.

<fieldset>
  <legend>İlgi alanlarınız</legend>
  <div>
    <input type="checkbox" id="ilgi-kod" name="ilgi" value="kod" checked />
    <label for="ilgi-kod">Kodlama</label>
  </div>
  <div>
    <input type="checkbox" id="ilgi-muzik" name="ilgi" value="muzik" />
    <label for="ilgi-muzik">Müzik</label>
  </div>
  <div>
    <input type="checkbox" id="ilgi-spor" name="ilgi" value="spor" />
    <label for="ilgi-spor">Spor</label>
  </div>
</fieldset>

Checkbox grubu mu, select multiple mı?

Birden çok seçim için diğer seçenek <select multiple> öğesidir. MDN'in multiple sayfasına göre seçilen seçenekler de aynı kuralla, ad=deger1&ad=deger2 biçiminde gönderilir; yani sunucu tarafındaki ayrıştırma aynıdır. Fark kullanımdadır. Çoğu tarayıcı çoklu seçim listesini kaydırılabilir bir kutu olarak gösterir; fareyle birden çok seçenek seçmek için işletim sistemine göre Ctrl, Command veya Shift tuşunu basılı tutmak gerekir. MDN, klavyeyle bitişik olmayan seçenekleri seçmenin tarayıcılar arasında iyi desteklenmediğini de belirtir ve kullanıcılara birden fazla seçim yapabileceklerini mutlaka söylemenizi önerir. Az sayıda seçenekte onay kutuları her seçeneği görünür ve tek tıkla seçilebilir kıldığı için genellikle daha anlaşılırdır. Seçim listeleri için select, option ve datalist yazısına bakın.

Radyo grubu nasıl kurulur?

Radyo grubu, düğmelere aynı name değerini vermekle oluşur. Grup kurulduktan sonra bir düğmeyi seçmek, aynı gruptaki seçili düğmeyi otomatik olarak kaldırır. Sayfada her biri kendi benzersiz adını taşıdığı sürece istediğiniz kadar grup olabilir. Her düğmenin gruptaki seçeneği tanımlayan benzersiz bir value değeri, etiketiyle eşleşmek için de benzersiz bir id değeri olmalıdır.

<fieldset>
  <legend>Size nasıl ulaşalım?</legend>
  <div>
    <input type="radio" id="ul-eposta" name="iletisim" value="eposta" checked />
    <label for="ul-eposta">E-posta</label>

    <input type="radio" id="ul-telefon" name="iletisim" value="telefon" />
    <label for="ul-telefon">Telefon</label>

    <input type="radio" id="ul-posta" name="iletisim" value="posta" />
    <label for="ul-posta">Posta</label>
  </div>
</fieldset>

Kullanıcı "Telefon" seçeneğini seçip formu gönderirse veride iletisim=telefon yer alır ve grup için hiçbir zaman birden fazla değer gitmez. Radyo grubunun veri kuralları şöyledir:

• value unutulursa seçilen düğme ne olursa olsun veri iletisim=on olur. MDN bu sonucu açıkça "işe yaramaz" diye niteler; her düğmeye value yazın.
• Hiçbir düğme seçili değilse grup gönderilen veride hiç yer almaz, çünkü bildirilecek bir değer yoktur.
• Varsayılan seçim için bir düğmeye checked yazılır. MDN, gruptan hiç seçim yapılmadan gönderime izin vermenin nadiren istendiğini, bu yüzden genellikle birinin varsayılan olarak seçili gelmesinin akıllıca olduğunu söyler.
• Birden fazla düğmede checked varsa sonraki öncekini geçersiz kılar ve en son checked taşıyan düğme seçili gelir, çünkü grupta aynı anda tek seçim olabilir.

Gruplarda required davranışı

required iki türde farklı çalışır. Radyo grubunda tek bir düğmede bile required varsa gruptan bir düğmenin seçilmesi zorunlu olur; seçilen düğmenin özniteliği taşıyan düğme olması gerekmez. Hiçbiri seçilmemişse valueMissing doğru olur ve tarayıcı kullanıcıdan bir seçenek seçmesini ister. MDN, kodun bakımını kolaylaştırmak için required özniteliğini ya gruptaki bütün düğmelere ya da hiçbirine yazmanızı önerir.

Onay kutularında ise required yalnızca o kutu için geçerlidir. Aynı adı taşıyan bir grupta yalnızca required yazılmış kutular zorunludur. Bu yüzden "en az bir ilgi alanı seçin" gibi bir kuralı HTML ile tek başına ifade edemezsiniz: bütün kutulara required yazarsanız hepsi zorunlu olur. Böyle bir kural için betik ve sunucu tarafı kontrol gerekir. "Koşulları okudum ve kabul ediyorum" gibi tek bir zorunlu kutu ise required ile kolayca yapılır. Hata türleri için form doğrulama yazısına bakın.

MDN, onay kutularının bütün input'lara sunulan doğrulamayı desteklediğini ama ValidityState alanlarının çoğunun burada her zaman yanlış kalacağını belirtir. Pratikte anlamlı olan tek hata, required taşıyan ama işaretlenmemiş kutudaki valueMissing durumudur.

<form action="/siparis" method="post">
  <fieldset>
    <legend>Teslimat seçeneği (zorunlu)</legend>
    <label><input type="radio" name="teslimat" value="kargo" required /> Kargo</label>
    <label><input type="radio" name="teslimat" value="magaza" required /> Mağazadan teslim</label>
  </fieldset>

  <input type="checkbox" id="kosul" name="kosul" value="kabul" required />
  <label for="kosul">Satış koşullarını okudum ve kabul ediyorum</label>

  <button type="submit">Siparişi tamamla</button>
</form>

Etiket, fieldset ve tıklama alanı

Onay kutuları ve radyo düğmeleri çok küçüktür. MDN, bir <label> ile ilişkilendirilen alanın etikete tıklandığında da işaretlendiğini ve bunun özellikle akıllı telefon gibi küçük ekranlarda seçimi kolaylaştırdığını vurgular. Etiketi iki yolla bağlarsınız: for değerini input'un id değerine eşitleyerek ya da input'u <label> içine koyarak. Etiketin yanına düz metin yazmak yeterli değildir; o durumda alanla metin arasında bir ilişki kurulmaz. Etkileşimli öğeler için MDN en az 44x44 CSS pikseli büyüklüğünde bir dokunma alanı önerir.

Birbiriyle ilgili seçenekleri <fieldset> içine alıp grubu <legend> ile adlandırmak, seçeneklerin hangi soruya ait olduğunu açıkça belirtir. MDN'in checkbox ve radio örneklerinin hepsi bu yapıyı kullanır. Radyo gruplarında bu özellikle önemlidir, çünkü "E-posta" veya "Telefon" gibi tek tek etiketler sorunun kendisini anlatmaz. Ayrıntılar label, fieldset ve legend yazısında.

indeterminate: yalnızca JavaScript ile ayarlanan üçüncü durum

Bir onay kutusu "belirsiz" (indeterminate) durumda da gösterilebilir. Bu durum bir HTML özniteliğiyle ayarlanamaz; MDN'e göre yalnızca HTMLInputElement nesnesinin indeterminate özelliğine JavaScript ile true atanarak verilir. Çoğu tarayıcı bu durumda kutunun içinde onay işareti yerine yatay bir çizgi gösterir.

const ana = document.querySelector("#tum-malzemeler");
ana.indeterminate = true;   // yalnızca görünüm değişir

Bu tamamen görsel bir değişikliktir. Kutunun değerinin forma eklenip eklenmeyeceğine indeterminate değil, checked durumu karar verir. MDN'in verdiği tipik kullanım, alt seçenekleri olan bir "ana" kutudur: alt kutuların hepsi işaretliyse ana kutu işaretli, hiçbiri işaretli değilse işaretsiz, bir kısmı işaretliyse belirsiz gösterilir. Bunu güncel tutan döngü kısa bir betiktir; JavaScript temelleri için JavaScript öğrenme rehberine bakabilirsiniz.

switch özniteliği: açma kapama anahtarı

switch, yalnızca checkbox türüne uygulanan bir Boolean özniteliktir. Kutunun normal bir onay kutusu yerine açma kapama anahtarı olarak gösterilmesini ister. Görünümü değiştirir ama davranışı aynı kalır: veri yine işaretliyse gönderilir. MDN'e göre bu öznitelik tarayıcının yardımcı teknolojilere role="switch" yazmanıza gerek kalmadan anahtar anlamını iletmesini sağlar ve anahtar olarak gösterilen kutularda :indeterminate sözde sınıfı hiçbir zaman eşleşmez.

<fieldset>
  <legend>Ayarlar</legend>
  <div>
    <label for="koyu">Koyu tema</label>
    <input type="checkbox" id="koyu" name="koyu" switch checked />
  </div>
  <div>
    <label for="bildirim">Bildirimler</label>
    <input type="checkbox" id="bildirim" name="bildirim" switch />
  </div>
</fieldset>

Görünüm hakkında kısa bir not

Onay kutuları ve radyo düğmeleri varsayılan olarak işletim sisteminin yerel görünümüyle çizilir. MDN'in radyo sayfasındaki örnek, bu yerel görünümün CSS'teki appearance: none ile kaldırılıp yeniden tasarlanabileceğini gösterir ve bu özelliğin tarayıcılar arasında farklı uygulandığı için dikkatle test edilmesini önerir. Seçili durum :checked sözde sınıfıyla hedeflenir. Görünüm ayrıntıları bu yazının kapsamı dışında kalıyor.

Uygulamalı mini örnek: üyelik tercihleri

Aşağıdaki formda plan seçimi radyo grubuyla, ek hizmetler onay kutularıyla alınır. "Diğer" seçeneğinin yanında görünür etiketi olmayan bir metin alanı vardır; MDN'in örneğinde olduğu gibi ona erişilebilir adı aria-label ile verdik. Etiketler örtük biçimde, input'u <label> içine koyarak bağlanmıştır.

<form action="/tercihler" method="post">
  <fieldset>
    <legend>Plan</legend>
    <label><input type="radio" name="plan" value="baslangic" checked /> Başlangıç</label>
    <label><input type="radio" name="plan" value="pro" /> Pro</label>
    <label><input type="radio" name="plan" value="kurumsal" /> Kurumsal</label>
  </fieldset>

  <fieldset>
    <legend>Ek hizmetler (isteğe bağlı)</legend>
    <label><input type="checkbox" name="ek" value="yedek" /> Günlük yedek</label>
    <label><input type="checkbox" name="ek" value="ssl" /> SSL sertifikası</label>
    <label><input type="checkbox" name="ek" value="diger" /> Diğer</label>
    <input type="text" name="ek_diger" aria-label="Diğer ek hizmet" />
  </fieldset>

  <button type="submit">Devam</button>
</form>

Kullanıcı Pro planı, yedek ve SSL seçeneklerini seçerse veri plan=pro&ek=yedek&ek=ssl içerir; işaretlenmeyen "Diğer" kutusu veride yer almaz. Erişilebilir ad konusunun ayrıntıları aria-label ve aria-labelledby yazısında.

Sık yapılan hatalar

• Radyo düğmelerine farklı name vermek. Bu durumda her düğme ayrı bir grup olur ve kullanıcı hepsini seçebilir.
• value yazmamak. Hem checkbox hem radio için gönderilen değer on olur ve hangi seçeneğin seçildiği kaybolur.
• İşaretsiz kutunun bir değer göndereceğini sanmak. İşaretsiz kutu veride hiç yer almaz; sunucu bunu "yok" olarak yorumlamalıdır.
• Aynı adlı onay kutularının yalnızca son değerini okumak. Sunucuda aynı adın bütün değerlerini toplayın.
• "En az bir seçim" kuralını required ile kurmaya çalışmak. Checkbox gruplarında required her kutuyu ayrı ayrı zorunlu yapar.
• Anlık durumu checked özniteliğinden okumak. Öznitelik yalnızca varsayılanı gösterir; DOM özelliğini kullanın.
• indeterminate durumunu gönderilen veri sanmak. Bu durum yalnızca görseldir.
• Etiketsiz, düz metinli seçenekler. Etiket yoksa metne tıklamak kutuyu işaretlemez ve ekran okuyucu seçeneği adlandıramaz.

Sık Sorulan Sorular

İşaretlenmemiş checkbox neden sunucuya gelmiyor?

Çünkü HTML işaretsiz kutunun adını da değerini de göndermez. Sunucuda alanın yokluğunu "işaretsiz" olarak yorumlayın ya da gerekiyorsa betikle gizli bir alan ekleyin.

Seçili bir radyo düğmesinin seçimini nasıl kaldırırım?

MDN'e göre bir radyo düğmesinin seçimi, aynı gruptan başka bir düğme seçildiğinde kalkar. "Hiçbiri" gibi bir seçenek gerekiyorsa gruba ayrı bir düğme olarak ekleyin.

Radyo grubunda her düğmeye required yazmak gerekir mi?

Gerekmez; tek bir düğmedeki required bütün grubu zorunlu yapar. Yine de MDN, okunabilirlik için hepsine ya da hiçbirine yazmayı önerir.

indeterminate durumunu HTML ile verebilir miyim?

Hayır. MDN'e göre bu durumun HTML özniteliği yoktur; yalnızca JavaScript ile indeterminate özelliğine değer atanarak ayarlanır.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · label ve fieldset · HTML form doğrulama · input türleri · select ve option · erişilebilir ad