Bu makale, pratik bir örnek yardımıyla bir HTML radyo düğmesi oluşturmanıza yardımcı olacaktır.
HTML'de Radyo Düğmesi Nasıl Eklenir?
HTML'de bir radyo düğmesi eklemek için aşağıda verilen sözdizimini izleyin:
< giriş tip = 'radyo' isim = '' değer = '' >
Belirtilen sözdiziminin açıklaması aşağıdadır:
- “ tip ”: Bu özellik, metin, radyo, onay kutusu ve daha fazlası gibi ne tür bir giriş oluşturmak istediğinizi belirtir. Bir radyo düğmesi oluşturmak için öznitelik değeri “radyo” olarak ayarlanmalıdır.
- “ isim ”: Giriş elemanının adını tanımlar. Bu öznitelik, radyo düğmeleri listesi için aynı olmalıdır.
- “ değer ”: Bu, radyo düğmesi işaretli olarak işaretlendiğinde sunucuya gönderilecek değeri belirtir.
Örnek: HTML'de Radyo Düğmesi Ekleme
Bu örnek, giriş radyo düğmesini kullanarak HTML'de bir radyo düğmesi ekleme prosedürünü tartışacaktır. İçinde
1. Adım: HTML Dosyası Oluşturma
İlk olarak, HTML dosyasına bir
Oluşturulan
- İlk olarak, “ ” etiketi sayfaya bir başlık vermek için.
- Sonra bir ' Bir paragraf veya metin satırı için ” etiketi.
- Bundan sonra, giriş etiketi “ özniteliğiyle eklenir. tip “Değer sahibi olmak” radyo ”, isim seç olarak ayarlanır ve “ değer ' olarak ' kırmızı ”. Aynı ada sahip her radyo düğmesine farklı değerler verilir. Aynı ad, aynı grubu veya listeyi temsil eder.
- Varsayılan olarak işaretli olarak işaretlenen bir düğme eklemek istiyorsanız, ' özniteliğini atayın. kontrol ” o düğmeye.
- Son olarak, “
Altyazı eklemek için her radyo düğmesindeki ” öğesi kullanılır. Ayrıca daha iyi erişilebilirlik sağlar.
Aşağıdaki kod, yukarıdaki senaryonun yorumudur:
< h1 > HTML Radyo Düğmesi h1 >< p > En sevdiğin renk hangisi? p >
< giriş tip = 'radyo' isim = 'renk seç' değer = 'kırmızı' kontrol >
< etiket için = 'radyo1' > Kırmızı etiket >
< br >
< giriş tip = 'radyo' isim = 'renk seç' değer = 'mavi' >
< etiket için = 'radyo1' > Mavi etiket >
< br >
< giriş tip = 'radyo' isim = 'renk seç' değer = 'Yeşil' >
< etiket için = 'radyo1' > Yeşil etiket >
< br >
< giriş tip = 'radyo' isim = 'renk seç' değer = 'mor' >
< etiket için = 'radyo1' > Mor etiket >
< br >
< giriş tip = 'radyo' isim = 'renk seç' değer = 'diğerleri' >
< etiket için = 'radyo1' > Diğerleri etiket >
Radyo düğmelerinin başarıyla oluşturulduğu görülebilir:
Aşağıda belirtilen CSS kodunu izleyerek, yukarıda oluşturulan radyo düğmesine stiller de uygulayabilirsiniz.
2. Adım: Stili HTML'ye Uygulamak
“ div ”, HTML dosyasında oluşturduğumuz div etiketini gösterir:
- İlk önce ' arka plan rengi ” özellik “ olarak ayarlandı #8197f0 ”.
- “ sınır ” özellik “ olarak ayarlandı 5px noktalı #13023a ”, burada 5px kenarlığın genişliğini, noktalı çizgi türünü ve sonraki kenarlığın rengini gösterir.
- “ dolgu malzemesi ”, “ olarak ayarlanır 20 piksel 100 piksel ” burada 20px üstten ve alttan dolguyu belirtir ve 100px soldan ve sağdan dolguyu belirtir.
- Yazı tipi stili için “ font ailesi 'özellik değeri' olarak el yazısı ”.
CSS
div {arka plan rengi: #8197f0;
kenarlık: 5px noktalı #13023a;
dolgu: 20 piksel 100 piksel;
yazı tipi boyutu: 20px;
yazı tipi ailesi: el yazısı;
}
Div öğesinin başarıyla biçimlendirildiği görülebilir:
Bu kadar! HTML radyo butonunu detaylı bir şekilde anlattık.
Çözüm
Radyo düğmesi, her zaman iki veya daha fazla seçenekten oluşan gruplar halinde görünen bir giriştir. Bu gruptan, kullanıcı yalnızca bir seçenek seçebilir. HTML'de, “ kullanılarak bir radyo düğmesi oluşturulabilir.