Html Radyo 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. 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.

Yayımlandı

kategorisi