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. Web formlarında, anketlerde ve diğer kullanıcı arayüzlerinde yaygın olarak kullanılırlar. Bu kılavuz, HTML’de radyo düğmelerini nasıl ekleyeceğinizi, özelleştireceğinizi ve kullanacağınızı adım adım açıklayacaktır.
Radyo Düğmelerinin Temelleri
Radyo düğmeleri, <input> etiketi kullanılarak oluşturulur ve type="radio" özelliği ile tanımlanır. Her bir radyo düğmesi, bir name özelliğine sahip olmalıdır ve bu özellik, aynı gruptaki diğer radyo düğmeleriyle eşleşmelidir.
html
<input type="radio" name="renk" value="kırmızı"> Kırmızı
<input type="radio" name="renk" value="yeşil"> Yeşil
<input type="radio" name="renk" value="mavi"> Mavi
Yukarıdaki örnekte, “renk” adlı bir grupta üç radyo düğmesi oluşturulmuştur. Kullanıcı yalnızca bir düğmeyi seçebilir ve seçilen düğmenin değeri (“kırmızı”, “yeşil” veya “mavi”) form gönderildiğinde sunucuya gönderilir.
Radyo Düğmelerini Özelleştirme
Radyo düğmelerinin görünümünü ve davranışını özelleştirmek için çeşitli özellikler kullanılabilir:
- value: Radyo düğmesinin değerini belirler.
- checked: Radyo düğmesinin varsayılan olarak seçili olup olmadığını belirler.
- disabled: Radyo düğmesinin devre dışı bırakılıp bırakılmadığını belirler.
- readonly: Radyo düğmesinin değiştirilemez olup olmadığını belirler.
- required: Radyo düğmesinin form gönderilmeden önce seçilmesi gerekip gerekmediğini belirler.
html
<input type="radio" name="renk" value="kırmızı" checked> Kırmızı
<input type="radio" name="renk" value="yeşil" disabled> Yeşil
<input type="radio" name="renk" value="mavi" required> Mavi
Yukarıdaki örnekte, “kırmızı” radyo düğmesi varsayılan olarak seçilidir, “yeşil” radyo düğmesi devre dışı bırakılmıştır ve “mavi” radyo düğmesi form gönderilmeden önce seçilmelidir.
Radyo Düğmelerini Kullanma
Radyo düğmeleri, JavaScript veya jQuery gibi istemci tarafı kodları kullanılarak dinamik olarak oluşturulabilir ve değiştirilebilir. Ayrıca, form gönderildiğinde sunucu tarafı kodları tarafından işlenebilirler.
“`javascript
// Yeni bir radyo düğmesi oluşturma
var yeniRadyoDugmesi = document.createElement(“input”);
yeniRadyoDugmesi.type = “radio”;
yeniRadyoDugmesi.name = “renk”;
yeniRadyoDugmesi.value = “turuncu”;
// Radyo düğmesini forma ekleme
var form = document.getElementById(“form”);
form.appendChild(yeniRadyoDugmesi);
“`
php
// Form gönderildiğinde radyo düğmelerinin değerlerini alma
if (isset($_POST['renk'])) {
$secilenRenk = $_POST['renk'];
}
Faydalı Kaynaklar
Sonuç
HTML’de radyo düğmeleri eklemek, kullanıcıların bir grup seçenekten yalnızca birini seçmelerine olanak tanıyan güçlü bir yoldur. Bu kılavuzdaki adımları izleyerek, web formlarınıza ve diğer kullanıcı arayüzlerinize kolayca radyo düğmeleri ekleyebilir ve özelleştirebilirsiniz.