0Pricing
HTML Academy · Ders

Onay Kutusu ve Radyo Düğmesi Grupları

Kullanıcıların bir gruptan tek bir seçenek veya birden çok seçenek belirlemesini sağlayın

Onay Kutusu ve Radyo Düğmesi Grupları, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Onay Kutuları

Onay kutuları, kullanıcıların sıfır, bir veya birden çok seçenek belirlemesine olanak tanır:

<label>
  <input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>

<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>

Onay Kutusu Gönderimi

Onay kutuları yalnızca işaretlendiklerinde gönderilir:

<form>
  <input type="checkbox" name="hobby" value="reading"> Reading<br>
  <input type="checkbox" name="hobby" value="coding"> Coding<br>
  <input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
     hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->

fieldset ile Onay Kutusu Grupları

İlişkili onay kutularını fieldset + legend ile gruplayın:

<fieldset>
  <legend>Select your interests</legend>

  <label><input type="checkbox" name="interest" value="html"> HTML</label>
  <label><input type="checkbox" name="interest" value="css"> CSS</label>
  <label><input type="checkbox" name="interest" value="js"> JavaScript</label>
  <label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>

Radyo Düğmeleri

Radyo düğmeleri, kullanıcıların bir gruptan tam olarak bir seçenek belirlemesine olanak tanır:

<fieldset>
  <legend>Preferred plan</legend>

  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
  <label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->

checked Özniteliği

checked özniteliğiyle bir radyo düğmesini veya onay kutusunu önceden işaretleyin:

<fieldset>
  <legend>Skill level</legend>
  <label><input type="radio" name="level" value="beginner" checked> Beginner</label>
  <label><input type="radio" name="level" value="intermediate"> Intermediate</label>
  <label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>

Onay Kutularını ve Radyo Düğmelerini Biçimlendirme

Etiket yöntemini kullanarak özel biçimlendirilmiş onay kutuları oluşturma:

<label class="custom-check">
  <input type="checkbox" name="agree">
  <span class="checkmark"></span>
  I agree
</label>

/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid #ddd; border-radius: 3px;
  display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }

indeterminate Durumu

Onay kutuları belirsiz bir duruma sahip olabilir (ne işaretli ne de işaretsiz):

<input type="checkbox" id="select-all">

<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>

Radyo Düğmesinde Varsayılan Seçim Olmadan

Bazen bir radyo düğmesini önceden seçmemek daha iyidir:

  • Önceden seçim, seçeneğin önerildiği izlenimini verir
  • Açık bir varsayılan seçeneğin bulunmadığı zorunlu seçimlerde (cinsiyet, plan) hiçbirini seçili bırakmayın
  • Kullanıcıların açıkça seçim yapmasını sağlamak için required ekleyin
<fieldset>
  <legend>Gender</legend>
  <label><input type="radio" name="gender" value="m" required> Male</label>
  <label><input type="radio" name="gender" value="f" required> Female</label>
  <label><input type="radio" name="gender" value="nb" required> Non-binary</label>
  <label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>

Onay Kutusu: checked ile value Karşılaştırması

Onay kutusu gönderimi hakkında iki önemli nokta:

<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->

<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked);    // true or false
console.log(cb.value);      // 'yes' (always, even when unchecked)

Radyo Gruplarında Klavye ile Gezinme

Radyo gruplarında klavye davranışı:

  • Tab, odağı gruba ve seçili veya ilk radyo düğmesine taşır
  • Ok tuşları (↑/↓ veya ←/→) seçenekler arasında dolaşır
  • Tab, gruptan sonraki odaklanabilir öğeye taşır

Tümünü Seçme Kalıbı

Tüm onay kutularını seçme/seçimini kaldırma kalıbı:

<label>
  <input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
  <label><input type="checkbox" class="item" value="1"> Item 1</label>
  <label><input type="checkbox" class="item" value="2"> Item 2</label>
  <label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
  document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>

Hızlı Kontrol

Radyo düğmelerinin aynı gruba ait olmasını sağlayan name özniteliği kuralı nedir?

Özet: Onay Kutuları ve Radyo Düğmeleri

Onay kutuları ve radyo düğmelerinin temel özellikleri:

  • Onay kutusu — birden fazla seçim yapılabilir; yalnızca işaretlendiğinde gönderilir
  • Radyo düğmesi — tam olarak bir seçim yapılır; name ile gruplanır
  • Her ikisi de önceden seçim için checked özniteliğini kullanır
  • <fieldset> + <legend> içine yerleştirin
  • Ok tuşları bir radyo grubu içinde gezinmeyi sağlar

Sıkça Sorulan Sorular

“Onay Kutusu ve Radyo Düğmesi Grupları” dersi ücretsiz mi?

Evet — “Onay Kutusu ve Radyo Düğmesi Grupları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Onay Kutusu ve Radyo Düğmesi Grupları” dersinde ne öğreneceğim?

Kullanıcıların bir gruptan tek bir seçenek veya birden çok seçenek belirlemesini sağlayın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Onay Kutusu ve Radyo Düğmesi Grupları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Select ve option Açılır Menüler
  2. Çok Satırlı Girdi için Textarea
  3. Onay Kutusu ve Radyo Düğmesi Grupları
  4. Otomatik Tamamlama için Datalist
← HTML Academy Sayfasına Dön