HTML <INPUT type=radio> etiketi, birbirleri ile ilişkili fakat sadece birinin seçilebileceği radyo düğmesi (radio button / option button) oluşturulmasını sağlar.
Kullanıcıyı tek bir seçim ile sınırlandırmak için <INPUT type=radio> etiketi ile oluşturulacak birbirleri ile alakalı bütün radyo düğmelerinin name özelliklerinin aynı olması gerekir.
HTML Sözdizimi ve Özellikler
<INPUT type=radio |
id= | Eşsiz kimliğini belirtir. |
class= | Sınıf adını belirtir. |
style= | CSS kuralları tanımlar. |
title= | Kısa bilgi belirtir. |
lang= | İçerdiği metnin lisanını belirtir. |
dir= | İçerdiği metnin yönünü belirtir. |
name= | Kontrolün ismini belirtir. |
disabled= | Girişe kapalı (pasif) olduğunu belirtir. |
checked= | Kontrolün seçili olduğunu belirtir. |
readonly= | Kontrolün sadece okunabilir olduğunu belirtir. |
tabindex= | Sekme (tab) sırasını belirtir. |
accesskey= | Klavye ile erişim sağlanacak harfi belirtir. |
value= | İlk değerini belirtir. (Sayfada gösterilmez.) |
/> |
HTML & JavaScript Olayları
<INPUT type=radio |
onclick= | Elemente klavye veya fare ile tıklandığında tetiklenir. |
ondblclick= | Elemente fare ile çift tıklandığında tetiklenir. |
onmousedown= | Element üzerinde fare tuşuna basıldığında tetiklenir. |
onmouseup= | Basılı olan fare tuşu bırakıldığında tetiklenir. |
onmouseover= | Elementin kapladığı alana girildiğinde tetiklenir. |
onmousemove= | Element üzerinde fare işaretçisi hareket ettirildiğinde tetiklenir. |
onmouseout= | Elementin kapladığı alandan çıkıldığında tetiklenir. |
onkeypress= | Element üzerindeyken klavyeden bir tuşa basıldığında tetiklenir. |
onkeydown= | Element üzerindeyken klavyeden bir tuşa ilk basıldığında tetiklenir. |
onkeyup= | Basılı olan klavye tuşu bırakıldığında tetiklenir. |
onfocus= | Elemente odaklanıldığında tetiklenir. |
onblur= | Element odaklanmasını yitirdiğinde tetiklenir. |
onchange= | Giriş kontrolü içeriği değiştiğinde tetiklenir. |
/> |
Örnek
Aşağıdaki örnek, HTML INPUT type=radio etiketi kullanılarak 3 farklı yemek menüsünden seçilen menünün bir JavaScript fonksiyonu ile kontrol edilmesini göstermektedir.
<script type="text/javascript">
function yemekKontrol() {
var yemekler = document.getElementsByName("yemekler");
if(yemekler[0].checked)
alert("Seçiminiz : Kuru Fasulye + Pilav + Cacık");
else if(yemekler[1].checked)
alert("Seçiminiz : Tas Kebabı + Pilav + Hoşaf");
else if(yemekler[2].checked)
alert("Seçiminiz : İzmir Köfte + Salata + Tatlı");
else
alert("Acıkmadınız mı?");
}
</script>
<p>Lütfen menüyü seçiniz :</p>
<input type="radio" id="yemek1" name="yemekler" value="1" />
<label for="yemek1">Kuru Fasulye + Pilav + Cacık</label>
<br />
<input type="radio" id="yemek2" name="yemekler" value="2" />
<label for="yemek2">Tas Kebabı + Pilav + Hoşaf</label>
<br />
<input type="radio" id="yemek3" name="yemekler" value="3" />
<label for="yemek3">İzmir Köfte + Salata + Tatlı</label>
<br />
<button type="button" onclick="yemekKontrol()">Menü Seç</button>
Test Edin