HTML Dersleri: Checkbox Ekleme
Giriş
Checkbox’lar, kullanıcıların birden fazla seçenek arasından seçim yapmalarına olanak tanıyan HTML form öğeleridir. Web sayfalarında kullanıcı tercihlerini toplamak, anketler oluşturmak ve çoklu seçim soruları sunmak için yaygın olarak kullanılırlar. Bu makale, HTML’de checkbox’ların nasıl ekleneceğini ve özelleştirileceğini ayrıntılı olarak açıklayacaktır.
Checkbox Temelleri
Bir checkbox, aşağıdaki HTML koduyla oluşturulur:
html
<input type="checkbox" name="checkbox_name" value="checkbox_value">
- type=”checkbox”: Bu, öğenin bir checkbox olduğunu belirtir.
- name=”checkbox_name”: Bu, checkbox’a benzersiz bir ad verir.
- value=”checkbox_value”: Bu, checkbox’un seçildiğinde gönderilecek değeri belirtir.
Checkbox’ları Özelleştirme
Checkbox’lar, aşağıdaki öznitelikler kullanılarak özelleştirilebilir:
- id: Checkbox’a benzersiz bir kimlik verir.
- checked: Checkbox’u varsayılan olarak seçili olarak ayarlar.
- disabled: Checkbox’u devre dışı bırakır.
- readonly: Checkbox’un kullanıcı tarafından değiştirilmesini engeller.
- required: Checkbox’un gönderilmeden önce seçilmesini gerektirir.
Checkbox Etiketleri
Checkbox’lar genellikle etiketlerle ilişkilendirilir, böylece kullanıcılar neyi seçtiklerini anlayabilir. Etiketler, aşağıdaki HTML koduyla oluşturulur:
html
<label for="checkbox_name">Checkbox Etiketi</label>
- for=”checkbox_name”: Bu, etiketin hangi checkbox ile ilişkilendirileceğini belirtir.
Checkbox Grupları
Birden fazla checkbox, bir grup halinde gruplandırılabilir. Bu, kullanıcıların birden fazla seçeneği aynı anda seçmelerine olanak tanır. Checkbox grupları, aşağıdaki HTML koduyla oluşturulur:
“`html
“`
Checkbox Durumunu Alma
Checkbox’ların durumu, JavaScript kullanılarak alınabilir. Aşağıdaki kod, seçili checkbox’ların değerlerini bir diziye alır:
“`javascript
const checkboxValues = [];
const checkboxes = document.querySelectorAll(‘input[type=”checkbox”]’);
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxValues.push(checkboxes[i].value);
}
}
“`
Faydalı Kaynaklar
Sonuç
Checkbox’lar, kullanıcı tercihlerini toplamak ve çoklu seçim soruları sunmak için HTML formlarında çok yönlü öğelerdir. Bu makale, HTML’de checkbox’ların nasıl ekleneceğini ve özelleştirileceğini ayrıntılı olarak açıklamıştır. Checkbox’ları etkin bir şekilde kullanarak, kullanıcı dostu ve işlevsel web sayfaları oluşturabilirsiniz.