TeknoLib

Html Radio Button Ekleme

HTML Radyo Düğmeleri Ekleme: Kapsamlı Bir Kılavuz

HTML radyo düğmeleri, kullanıcıların bir dizi seçenekten yalnızca birini seçmelerine olanak tanıyan form öğeleridir. Kullanıcı arayüzlerinde yaygın olarak kullanılırlar ve anketler, tercihlerin toplanması ve çoktan seçmeli soruların oluşturulması gibi çeşitli amaçlar için uygundurlar.

Radyo Düğmelerinin Temelleri

Radyo düğmeleri, <input> etiketi kullanılarak oluşturulur ve type="radio" özelliğiyle tanımlanır. Her radyo düğmesi, benzersiz bir name özelliğine sahip olmalıdır. Bu özellik, tüm radyo düğmelerinin aynı gruba ait olduğunu belirtir ve kullanıcıların yalnızca gruptan bir düğme seçebilmesini sağlar.

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 Düğmelerinin Stillendirilmesi

Radyo düğmelerinin varsayılan stili, tarayıcıdan tarayıcıya değişebilir. Ancak, CSS kullanarak görünümünü ö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: #ff0000;
}

Radyo Düğmelerinin Seçilmesi

Bir radyo düğmesi seçildiğinde, checked özelliği true olarak ayarlanır. Bu özellik, JavaScript kullanarak radyo düğmelerinin durumunu kontrol etmek ve değiştirmek için kullanılabilir.

“`javascript
const radioButtons = document.querySelectorAll(‘input[type=”radio”]’);

radioButtons.forEach((radioButton) => {
radioButton.addEventListener(‘click’, () => {
console.log(Seçilen seçenek: ${radioButton.value});
});
});
“`

Radyo Düğmelerinin Kullanım Alanları

Radyo düğmeleri, çeşitli kullanım alanlarına sahiptir, bunlar şunları içerir:

  • Anketler: Kullanıcıların bir dizi seçenekten tercihlerini belirtmelerine olanak tanır.
  • Tercihlerin Toplanması: Kullanıcıların belirli ayarları veya seçenekleri seçmesine olanak tanır.
  • Çoktan Seçmeli Sorular: Kullanıcıların birden fazla doğru cevabı seçmesine olanak tanır.
  • Form Doğrulaması: Kullanıcıların bir seçenek seçmesini zorunlu kılarak form gönderimini doğrulayabilir.

Faydalı Kaynaklar

Sonuç

HTML radyo düğmeleri, kullanıcı arayüzlerinde seçenekleri sunmak ve kullanıcı girdisini toplamak için güçlü bir araçtır. Bu kılavuzu takip ederek, web sayfalarınıza kolayca radyo düğmeleri ekleyebilir ve özelleştirebilirsiniz.

Yayımlandı

kategorisi