Sayfa içeriği
Radyo düğmesinin kavramı
Radyo Düğmesi, tıklandığında içinde seçildiğini belirten büyük bir nokta gösteren dairesel bir düğmedir.
Kullanıcının önünde birkaç seçeneği görüntülemek ve bunlardan yalnızca birini seçmesini sağlamak için genellikle radyo düğmelerini kullanılan bir düğmedir.
Radyo düğmesi eklemek
Bir Radyo düğmesi eklemek için <input type="radio"> olarak <input /> etiketini kullanabilirsin.
Bu etikete aşağıdaki özellikleri ekleyebilirsin:
- id: <label> etiketi ile linklemek istersek <label> ekliyoruz.
- name: gönder butonuna tıklandığında içine yerleştirilen değerin gönderilmesi için ekliyoruz
- value: Gönder butonuna tıklandığında gönderilecek değeri verir.
- disabled: soluk görünmesini ve değeri değişmez sağlamak için kullanılıyor.
- checked: sayfa açıldığında varsayılan olarak kontrol edilmesini sağlamak için checked ekliyoruz.
Teknik bilgi
Sayfaya eklenen her radyo düğmesi grubuna aynı ad verilmelidir, "yani, ona birleşik bir Name vermek", çünkü tarayıcı aynı ada sahip radyo düğmelerini bulduğunda, bunların bir gruba ait olduğunu hemen anlar ve bu nedenle kullanıcı, hepsini değil, yalnızca birini seçebilmelidir.
Düğmenin yanında göstereceğin metni, her zaman düğmeye iliştirilmiş <label> etiketi ile yerleştir, çünkü tarayıcı, kullanıcının onunla ilişkili metne tıkladığında aynı düğmeyi tıkladığını düşünecektir.
Aşağıdaki örnekte üç radyo düğmesi gösterdim.
- <input type="radio" id="tr" name="languages" value="turkish">
- <label for="tr">Türkçe</label><br>
- <input type="radio" id="en" name="languages" value="english">
- <label for="en">English</label><br>
- <input type="radio" id="jp" name="languages" value="japanese">
- <label for="jp">日本</label>
Aşağıdaki örnekte, ilk gösterilen varsayılan olarak seçili olarak üç radyo düğmesi görüntülüyoruz.
- <input type="radio" id="tr" name="languages" value="turkish" checked>
- <label for="tr">Türkçe</label><br>
- <input type="radio" id="en" name="languages" value="english">
- <label for="en">English</label><br>
- <input type="radio" id="jp" name="languages" value="japanese">
- <label for="jp">日本</label>
Aşağıdaki örnekte, ilki varsayılan olarak seçili olarak gösterilen ve üçüncüsü kullanıcının değerini değiştirememesi için inaktif, üç radyo düğmesi ekledim.
- <input type="radio" id="tr" name="languages" value="turkish" checked>
- <label for="tr">Türkçe</label><br>
- <input type="radio" id="en" name="languages" value="english">
- <label for="en">English</label><br>
- <input type="radio" id="jp" name="languages" value="japanese" disabled>
- <label for="jp">日本</label>
Aşağıdaki örnekte, her gruptaki ilk düğme varsayılan olarak seçili olarak gösterilen iki radyo düğmesi grubu ekledim.
Birinci gruba cinsiyet, ikinci gruba ise dil adını verdim.
- <!-- Cinsiyet adındaki her radyo düğmesi ilk gruba aittir -->
- <input type="radio" id="male" name="cinsiyet" value="male" checked>
- <label for="male">Erkek</label><br>
- <input type="radio" id="female" name="cinsiyet" value="female">
- <label for="female">Kadın</label><br>
- <!-- dil adındaki her radyo düğmesi ikinci gruba aittir -->
- <input type="radio" id="tr" name="dil" value="turkish" checked>
- <label for="tr">Türkçe</label><br>
- <input type="radio" id="ar" name="dil" value="Arabic">
- <label for="ar">Arapça</label>