Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragrafları
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • HTML Onay Kutuları
  • HTML Radyo Düğmeleri
  • HTML Açılır Listeler
  • HTML Seçim Aralıkları
  • HTML Formun Ortak Öğelerini Toplamak
  • Sayfanın dilini belirtmek
  • HTML Dil Kodları
  • HTML Ülke Kodları
  • HTML Farklı Dillerde Sayfalar
  • Diğer dersler
  • Database - Veritabanları
  • HTML5 Nedir?
  • ens

K-kudo

HTML öğren

HTML araçları

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Yardım
  • Araştırma

HTML Radyo Düğmeleri

önceki ders sonraki ders
Sayfa içeriği
  • › Radyo düğmesinin kavramı
  • › Radyo düğmesi eklemek

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>
kod dene 

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>
kod dene 

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>
kod dene 

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>
kod dene 
önceki ders sonraki ders

Kullanım Koşulları ve Gizlilik Politikası © 2021-2023 HTML öğren.