HTML Radyo Butonları: Kapsamlı Bir Kılavuz
HTML radyo butonları, kullanıcıların bir grup seçenekten yalnızca birini seçmelerine olanak tanıyan form öğeleridir. Birden fazla seçeneğin bulunduğu ancak yalnızca birinin seçilebildiği durumlarda kullanılırlar.
Radyo Butonlarının Kullanımı
Radyo butonları, aşağıdakiler gibi çeşitli durumlarda kullanılır:
- Anketler ve formlar
- Tercih ayarları
- Cinsiyet veya yaş gibi demografik bilgiler
Radyo Butonlarının Oluşturulması
HTML’de bir radyo butonu, <input> etiketi kullanılarak oluşturulur. type özniteliği “radio” olarak ayarlanır ve her radyo butonuna benzersiz bir name özniteliği verilir.
html
<input type="radio" name="secenekler" value="secenek1"> Seçenek 1
<input type="radio" name="secenekler" value="secenek2"> Seçenek 2
<input type="radio" name="secenekler" value="secenek3"> Seçenek 3
Radyo Butonlarının Stillendirilmesi
Radyo butonlarının görünümü CSS kullanılarak özelleştirilebilir. Örneğin, boyutlarını, şekillerini ve renklerini değiştirebilirsiniz.
“`css
input[type=”radio”] {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
}
input[type=”radio”]:checked {
background-color: #000;
}
“`
Radyo Butonlarının İşlenmesi
Radyo butonları, bir form gönderildiğinde işlenir. Seçilen radyo butonunun değeri, name özniteliğiyle belirtilen form alanına atanır.
“`html
“`
Radyo Butonlarının Erişilebilirliği
Radyo butonları, tüm kullanıcılar için erişilebilir olmalıdır. Bunun için aşağıdaki yönergelere uyulmalıdır:
- Etiketler: Her radyo butonuna, amacını açıklayan bir etiket ekleyin.
- Kontrast: Radyo butonları ve etiketleri arasındaki kontrastı sağlayın.
- Odak: Radyo butonlarının klavye kullanılarak odaklanabilir olduğundan emin olun.
Faydalı Kaynaklar
Sonuç
HTML radyo butonları, kullanıcıların bir grup seçenekten yalnızca birini seçmelerine olanak tanıyan güçlü form öğeleridir. Uygun şekilde kullanıldıklarında, kullanıcı deneyimini iyileştirebilir ve verilerin doğru bir şekilde toplanmasını sağlayabilirler.