HTML Etiketlerini Yeniden Keşfetmek: optgroup
Bu yazıyla birlikte yeni bir seriye de başlamış oldum. Bundan böyle vakit buldukça, HTML içerisinde tanımlanmış olmasına rağmen web programcıları tarafından nedense pek kullanılmayan etiketlerden bahsedeceğim. Böylece nadir olarak kullanılan bu HTML etiketlerinin aslında ne kadar faydalı ve de işlerimizi kolaylaştırma amaçlı olduklarını hep beraber görmüş olacağız.
Açılan listeler
İlk olarak ele almak istediğim konu açılan (dropdown) listeler ile ilgili. Biliyorsunuz ki açılan listeler yapmak üzere select ve option etiketleri birlikte kullanılır. Örnek olarak Türkiye'nin illerinden oluşan kısa bir liste hazırlayalım. Bu liste Marmara, Ege ve Akdeniz bölgelerinden 3 adet şehir içersin.
Böyle bir liste hazırlamak için genellikle alttaki gibi bir kodlama yapılıyor:
-
<option> Marmara -> İstanbul </option>
-
<option> Marmara -> Bursa </option>
-
<option> Marmara -> Kocaeli </option>
-
<option> Ege -> İzmir </option>
-
<option> Ege -> Aydın </option>
-
<option> Ege -> Denizli </option>
-
<option> Akdeniz -> Antalya </option>
-
<option> Akdeniz -> İçel </option>
-
<option> Akdeniz -> Adana </option>
-
</select>
Yukarıda yazdığımız bu kodun ekran görüntüsü alttaki gibi olacaktır:
Dikkat ederseniz bu listedeki bölge isimleri sürekli tekrar ediliyor. Bu görüntüyü internetteki pekçok web sitesinde görebilirsiniz. Özellikle bu listedeki seçenekler (iller) arttıkça görüntü daha da karmaşıklaşıyor ve çirkinleşiyor. Bu kötü duruma örnek olması açısından şu sayfadaki listeye bakabilirsiniz. Günümüz web trendlerinden birisi de sadelik olduğuna göre bu listeyi daha sade ve basit hale getirmemiz gerekiyor. E zaten bunu yapan bir HTML etiketi var elimizde. Peki neden kullanmıyoruz?
optgroup etiketi
HTML içerisindeki optgroup etiketi sayesinde açılan listelerde gruplama yapabilme imkânımız vardır. Bu etiket sayesinde daha sade, daha hoş ve kolayca anlaşılabilir listeler hazırlayabiliriz. Hem bu sayede listeler içerisinde tekrar eden verilerden de kurtulmuş oluruz.
optgroup etiketinin kullanılması çok basittir. Gruplamak istediğiniz liste seçeneklerini <optgroup> ve </optgroup> blokları arasına alıyoruz. Ayrıca bu gruba bir isim vermek için <optgroup> içerisinde label özniteliğini kullanıyoruz. Örnek vermek gerekirse <optgroup label="Marmara"> gibi... Bu teorik bilgilerden sonra şimdi uygulamaya geçelim ve yukarıdaki listeyi daha düzenli bir hale getirelim.
-
<optgroup label="Marmara">
-
<option> İstanbul </option>
-
<option> Bursa </option>
-
<option> Kocaeli </option>
-
</optgroup>
-
<optgroup label="Ege">
-
<option> İzmir </option>
-
<option> Aydın </option>
-
<option> Denizli </option>
-
</optgroup>
-
<optgroup label="Akdeniz">
-
<option> Antalya </option>
-
<option> İçel </option>
-
<option> Adana </option>
-
</optgroup>
-
</select>
Bu şekilde hazırladığımız listenin ekran görüntüsü alttaki gibi olacaktır:
Sonuç
Gördüğümüz gibi optgroup etiketi ile daha derli toplu listeler hazırlayabiliyoruz. Hem kullanıcıların gruplanmış bir listeden seçim yapmaları daha da kolaylaşıyor. Ek olarak CSS yardımıyla her bir grup başlığını ya da grubun tamamını biçimlendirebilme avantajını da elde etmiş oluyoruz.
Çok güzel düşünmüşsün Erhan, iyi bir yazı dizisi olacak
Bahsederken kodun alabileceği bütün özelliklerden de bahsedersen daha güzel olur. Bunun için pek gerek yok gerçi, tek bahsetmediğin “disabled” özelliği (o da zorunlu bir özellik değil) ama olsun. Hepsini anlatırsan daha nitelikli bir kaynak olur
Tekrar tebrik ederim…
yararlı bir olay teşekkürler eburhan
@Mustafa
Sadece yüzeysel olarak bahsetmek istiyorum. Çok derinlere girip de yazıyı uzatmak istemiyorum.
@grkn
eyvallah
Güzelmiş gerçekten.
Erhan Bey, sizi canı gönülden tebrik ediyorum. Çok faydalı konular anlatıyorsunuz. Bu seriyi takip edeceğim.
Teşekkürler arkadaşlar.
güzel bir bilgi sıradaki bilgi de iframe ile ilgi olursa sevinirim
sadece bir öneri
iframe de boy uzunluğunu serbes kalması için ne yapılmalı yani içerik yazısı nekadar uzun olursa gösterim boy uzunluğuda okadar otomatik genişlemesi için
iframe etiketinden bahsetmeyi düşünmüyorum. Zaten HTML’nin yeni sürümlerinde bu etiket yer almayacak.
Senin bahsettiğin sorunun çözümü için
height="100%"kodunu eklemeyi deneyebilirsini. Tabii doğru anladıysamyapamadım cahilliğime ver çok çalışmam gerek çook
Çok güzel bilgiler. Devamını bekliyorum Eburhan
@arda
Buradaki kodları kullanmak gerek sanırım
evet aradığım bu olmalı fakat böyle
http://cool.leeward.googlepages.com/Help2.html
olması ( çağırılan sayfa boyutuna gelmesi) gerekirken böyle
http://cool.leeward.googlepages.com/Help.html
oluyor galiba bu java kodu ilk gösterim sayfası kadar gösterim yapıyor çünkü tarayıcıda F11 basıldığında gösterim daha da fazla oluyor erhan
yani çağrılan sayfa boyutuna otomatik geçmesi gerek yoksa altta ya boşluk oluyor yada yazı yarım kalıyor
yardımın için teşekkürler
Gerçekten Yaratıcı bir konu aramızda hala HTML i bilip ama eksik kullanan bir çok arkadaş var
Bence bu Konunun Başlığı
webmaster’lığın İnce ayarları Olsa daha uygun olurmuşş
eline sağlık erhan bu konuyu takip edicem.
Çok güzel bir yazı dizisine başlamışsın Erhan. Anlattıkların hakikaten birçok zaman bizlerin unuttuğu kodların güzel kullanımı hakkında.
Özellikle Html 4.0.x serisinin Html 5.0′a revizyonunda bu tür etiketlerin çok daha ön planda olacağını şimdiden söyleyebiliriz.
Çalışmalarının devamını dört gözle bekliyoruz.
çok güzel bir örnek olmuş ellerine sağlık
dostum gerçekten harikasın ellerine sağlık uzun zamandır arayıp bulamadığım ya da görmüş olupta adını bilmediğim olayları burada açıklıyorsun teşekkür ederim…