Html Kodda Radio Button Ekleme

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

Seçenek 1

Seçenek 2
“`

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.