HTML’de Radyo Düğmeleri Ekleme: Kapsamlı Bir Kılavuz
Radyo düğmeleri, kullanıcıların bir grup seçenekten yalnızca birini seçmelerine olanak tanıyan HTML form öğeleridir. Birden fazla seçenek sunarlar ancak yalnızca bir seçimin yapılmasına izin verirler. Bu, kullanıcıların belirli bir soruya veya tercihe yanıt vermesini istediğiniz durumlarda kullanışlıdır.
Radyo Düğmesi Oluşturma
Bir radyo düğmesi oluşturmak için <input>
etiketini kullanırsınız. type
özniteliğini “radio” olarak ayarlamanız gerekir:
html
<input type="radio" name="secenekler" value="secenek1">
name
özniteliği, radyo düğmesi grubunun adını belirtir. Aynı ada sahip tüm radyo düğmeleri aynı gruba ait olacaktır. value
özniteliği, radyo düğmesinin değerini belirtir.
Radyo Düğmesi Etiketleri
Radyo düğmelerinin yanında, kullanıcıların seçeneği anlamalarına yardımcı olacak etiketler ekleyebilirsiniz. Etiketleri <label>
etiketiyle oluşturursunuz:
html
<label for="secenek1">Seçenek 1</label>
for
özniteliği, etiketin hangi radyo düğmesiyle ilişkilendirileceğini belirtir.
Radyo Düğmesi Grupları
Birden fazla radyo düğmesi kullanarak bir grup oluşturabilirsiniz. Aynı name
özniteliğine sahip tüm radyo düğmeleri aynı gruba ait olacaktır. Kullanıcı yalnızca gruptan bir radyo düğmesi seçebilir.
“`html
“`
Radyo Düğmesi Seçimi
Kullanıcı bir radyo düğmesi seçtiğinde, value
özniteliği form verilerine gönderilir. Seçili radyo düğmesini almak için JavaScript’i kullanabilirsiniz:
javascript
const seciliRadyoDugmesi = document.querySelector('input[name="secenekler"]:checked');
const seciliDeger = seciliRadyoDugmesi.value;
Radyo Düğmesi Stilleri
Radyo düğmelerinin görünümünü CSS kullanarak özelleştirebilirsiniz. Örneğin, radyo düğmelerinin boyutunu, şeklini ve rengini değiştirebilirsiniz.
css
input[type="radio"] {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
}
Faydalı Kaynaklar
- MDN Web Dokümantasyonu: Radyo Düğmeleri
- W3Schools: Radyo Düğmeleri
- CSS-Tricks: Radyo Düğmelerini Özelleştirme
Sonuç
Radyo düğmeleri, kullanıcıların bir grup seçenekten yalnızca birini seçmelerine olanak tanıyan kullanışlı HTML form öğeleridir. Bu kılavuzu izleyerek web formlarınıza kolayca radyo düğmeleri ekleyebilir ve özelleştirebilirsiniz.