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

Q: HTML'de checkbox nasıl yapılır?

Bir label içinde kullan: I agree . Label metni de tıklanabilir yapar.

Q: Bir checkbox'ı varsayılan olarak nasıl işaretli yaparım?

checked özelliğini ekle: . Önemli olan var olmasıdır, bu yüzden checked="false" de onu işaretler. JavaScript'te box.checked = true ya da false ata.

Q: JavaScript'te bir checkbox'ın değerini nasıl alırım?

true ya da false olan box.checked değerini oku. box.value göndereceği değerdir ve kutu işaretli olsun ya da olmasın aynı kalır. İşaretlendiğinde tepki vermek için change olayını dinle.

Q: Bir checkbox'ın rengini nasıl değiştiririm?

Ona accent-color ver: input[type=checkbox] { accent-color: #16a34a; }. Tamamen özel bir görünüm için appearance: none ayarla ve kutuyu ve onay işaretini CSS ile kendin çiz.

HTML'de checkbox nasıl yapılır

Checkbox bir <input type="checkbox"> elementidir. Metni tıklamak da onu işaretlesin diye onu metniyle birlikte bir <label> içine koy. Kutulardan birini ya da ikisini işaretle ve formun ne gönderdiğini görmek için Save'e bas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox</title>
</head>
<body>
  <form>
    <p><label><input type="checkbox" name="newsletter" value="yes"> Send me the newsletter</label></p>
    <p><label><input type="checkbox" name="updates" checked> Product updates</label></p>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Varsayılan durumda form yalnızca updates=on gönderir. İki kural bunu açıklar:

İşaretli bir kutu name=value gönderir. İkinci kutunun value değeri yoktur, bu yüzden varsayılanı, yani on gönderir.
İşaretlenmemiş bir kutu hiçbir şey göndermez. Ne newsletter=no ne de boş bir değer: ad veride hiç yoktur.

HTML'deki checked başlangıç durumunu belirler. Her boolean özellik gibi önemli olan var olmasıdır: checked="false" kutuyu yine de işaretler.

Checkbox özellikleri

Özellik	Ne yapar
`name`	İşaretliyken gönderilen anahtar
`value`	İşaretliyken gönderilen şey (varsayılan `on`)
`checked`	Sayfa yüklendiğinde işaretli
`required`	Bu kutu işaretlenene kadar form gönderilmez
`disabled`	Değiştirilemez ve gönderilmez

Bir checkbox grubu

"Bunlardan istediklerini seç" için her kutuya aynı name ve farklı bir value ver. Grubun bir adı olsun diye onları bir <legend> ile birlikte bir <fieldset> içine sar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox 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>Topics you like</legend>
      <label><input type="checkbox" name="topic" value="html" checked> HTML</label>
      <label><input type="checkbox" name="topic" value="css" checked> CSS</label>
      <label><input type="checkbox" name="topic" value="js"> JavaScript</label>
    </fieldset>
    <p><button type="submit">Save</button></p>
  </form>
</body>
</html>

Form topic=html ve topic=css gönderir: aynı ad iki kez. Çoğu sunucu framework'ü bunu bir liste olarak okuyabilir. İstisna PHP'dir: ad köşeli parantezle, yani name="topic[]" ile bitmedikçe yalnızca sonuncuyu tutar. JavaScript'te new FormData(form).getAll('topic'), ['html', 'css'] döndürür.

Kutu işaretsizken bir değer göndermek

Sunucunun açık bir "hayır" değerine ihtiyacı olduğunda, checkbox'tan önce aynı adı taşıyan gizli bir input koy. İşaretsizken yalnızca gizli değer gönderilir; işaretliyken ikisi de gönderilir ve sunucu sonuncuyu alır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unchecked value</title>
</head>
<body>
  <form>
    <input type="hidden" name="marketing" value="no">
    <label><input type="checkbox" name="marketing" value="yes"> Marketing emails</label>
    <p>
      <label><input type="checkbox" name="terms" value="accepted" required> I accept the terms</label>
    </p>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Continue'ya bas: terms kutusu işaretlenene kadar form reddeder, çünkü o required durumundadır. Sonra marketing=no ve terms=accepted gönderir; ilk kutu işaretliyse de marketing=no, marketing=yes ve terms=accepted gönderir. Rails gibi framework'ler tam olarak bu gizli input çiftini üretir. Buna güvenmeden önce sunucunun tekrarlanan bir adı nasıl okuduğunu kontrol et.

Tümünü seç ve indeterminate durumu

Bir checkbox'ın "bazıları ama hepsi değil" için üçüncü bir görünümü, bir çizgisi vardır. Yalnızca JavaScript'te vardır: box.indeterminate = true ata. Bir "tümünü seç" kutusu, kontrol ettiği kutuların bazıları işaretli olduğunda bunu kullanır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select all</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    ul { list-style: none; padding-inline-start: 24px; margin: 4px 0; }
  </style>
</head>
<body>
  <label><input type="checkbox" id="all"> Select all</label>
  <ul>
    <li><label><input type="checkbox" class="item" checked> Email</label></li>
    <li><label><input type="checkbox" class="item"> SMS</label></li>
    <li><label><input type="checkbox" class="item"> Push</label></li>
  </ul>

  <script>
    const all = document.querySelector('#all');
    const items = [...document.querySelectorAll('.item')];

    const sync = () => {
      const count = items.filter((box) => box.checked).length;
      all.checked = count === items.length;
      all.indeterminate = count > 0 && count < items.length;
    };

    all.addEventListener('change', () => {
      items.forEach((box) => { box.checked = all.checked; });
    });
    items.forEach((box) => box.addEventListener('change', sync));
    sync();
  </script>
</body>
</html>

indeterminate yalnızca görünümü (ve ekran okuyucuların duyurduğunu: "mixed" ya da "partially checked") değiştirir. Kutu altta yine ya işaretli ya da işaretsizdir ve form da bunu gönderir. Indeterminate bir kutuya tıklamak çizgiyi temizler ve onu değiştirir.

Bir checkbox'a tepki vermek için change olayını kullan, durumu için de box.checked değerini oku. Kutu işaretlendiğinde box.value değişmez.

Checkbox'lara stil vermek

En hızlı değişiklik, yerel checkbox'ı yeniden renklendiren ve tüm davranışını koruyan accent-color özelliğidir. Tamamen farklı bir görünüm için appearance: none yerel çizimi kaldırır ve input'a herhangi bir kutu gibi stil vermeni sağlar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .accent { accent-color: #16a34a; width: 20px; height: 20px; }

    .custom {
      appearance: none;
      width: 20px;
      height: 20px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 5px;
      display: grid;
      place-content: center;
    }
    .custom::before {
      content: "";
      width: 10px;
      height: 6px;
      border: 3px solid #fff;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg) translate(1px, -1px);
      visibility: hidden;
    }
    .custom:checked { background: #2563eb; border-color: #2563eb; }
    .custom:checked::before { visibility: visible; }
    .custom:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="accent" checked> accent-color</label>
  <label><input type="checkbox" class="custom" checked> appearance: none</label>
  <label><input type="checkbox" class="custom"> appearance: none, unchecked</label>
</body>
</html>

Özel kutu hâlâ gerçek bir checkbox'tır: tıklamayla ve Space ile değişir, formla gönderilir ve checkbox olarak duyurulur. Onu :checked ile çiz ve bir :focus-visible stili bırak, çünkü yerel çizim olmadan kendin eklemediğin hiçbir odak halkası yoktur.

Bir toggle switch

Switch, "bunu dahil et" yerine "şu anda açık/kapalı" anlamına gelen bir checkbox'tır. Onu appearance: none ile çiz ve ekran okuyucular işaretli bir checkbox yerine açık ya da kapalı bir switch duyursun diye role="switch" ekle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Toggle switch</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: inline-flex; align-items: center; gap: 10px; }
    .switch {
      appearance: none;
      margin: 0;
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: #9ca3af;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
    }
    .switch::before {
      content: "";
      position: absolute;
      top: 3px;
      inset-inline-start: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: inset-inline-start 0.2s;
    }
    .switch:checked { background: #16a34a; }
    .switch:checked::before { inset-inline-start: 23px; }
    .switch:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="switch" role="switch" name="dark" checked> Dark mode</label>
</body>
</html>

inset-inline-start düğmeyi satırın başından konumlandırır, böylece switch sağdan sola yazılan sayfalarda olması gerektiği gibi diğer yöne kayar. Yalnızca birinin seçilebildiği gruplanmış evet/hayır seçimleri için HTML radio buton sayfasına bak.

Sık yapılan hatalar

İşaretsiz bir kutu için false beklemek. Hiçbir şey gönderilmez. Sunucuda eksik bir adı "kapalı" olarak ele al ya da gizli input'u ekle.
checked="false". Kutuyu yine de işaretler. Özelliği kaldır.
Label'ı olmayan bir checkbox ya da yanındaki metin <label> değil. Küçük kutu tek tıklama hedefi olur ve ekran okuyucular adsız bir "checkbox" duyurur. Bkz. HTML label.
value değerini unutmak, bu durumda bir gruptaki her kutu on gönderir ve sunucu onları ayırt edemez.
İşaretli olup olmadığını görmek için box.value okumak. box.checked kullan.
"Birini seç" için checkbox'lar. Radio butonlar bunun içindir.

Sıkça Sorulan Sorular

HTML'de checkbox nasıl yapılır?

Bir label içinde <input type="checkbox"> kullan: <label><input type="checkbox" name="terms" value="yes"> I agree</label>. Label metni de tıklanabilir yapar.

Bir checkbox'ı varsayılan olarak nasıl işaretli yaparım?

checked özelliğini ekle: <input type="checkbox" name="news" checked>. Önemli olan var olmasıdır, bu yüzden checked="false" de onu işaretler. JavaScript'te box.checked = true ya da false ata.

İşaretlenmemiş bir checkbox hangi değeri gönderir?

Hiçbirini. İşaretlenmemiş bir checkbox gönderilen veriden tamamen çıkarılır. İşaretli olan kendi value değerini, value yoksa da on gönderir. Sunucunun açık bir "hayır" değerine ihtiyacı varsa, checkbox'tan önce aynı adı taşıyan gizli bir input koy.

JavaScript'te bir checkbox'ın değerini nasıl alırım?

true ya da false olan box.checked değerini oku. box.value göndereceği değerdir ve kutu işaretli olsun ya da olmasın aynı kalır. İşaretlendiğinde tepki vermek için change olayını dinle.

Bir checkbox'ın rengini nasıl değiştiririm?

Ona accent-color ver: input[type=checkbox] { accent-color: #16a34a; }. Tamamen özel bir görünüm için appearance: none ayarla ve kutuyu ve onay işaretini CSS ile kendin çiz.

İlgili kavramlar