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.
Yorum takibi
Geri izleme
Yazıyı Paylaş
18 Haziran 2007, 16:29
Programlama, İnternet & Web
Bugün 2 kez, toplam 2,318 kez okundu.
css, html, optgroup, option, select, web
18 Haziran 2007, 18:36
Ç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…
18 Haziran 2007, 18:59
yararlı bir olay teşekkürler eburhan
18 Haziran 2007, 19:04
@Mustafa
Sadece yüzeysel olarak bahsetmek istiyorum. Çok derinlere girip de yazıyı uzatmak istemiyorum.
@grkn
eyvallah
18 Haziran 2007, 19:39
Güzelmiş gerçekten.
18 Haziran 2007, 19:39
Erhan Bey, sizi canı gönülden tebrik ediyorum. Çok faydalı konular anlatıyorsunuz. Bu seriyi takip edeceğim.
18 Haziran 2007, 21:03
Teşekkürler arkadaşlar.
18 Haziran 2007, 21:35
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
18 Haziran 2007, 21:58
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ıysam18 Haziran 2007, 22:12
yapamadım cahilliğime ver çok çalışmam gerek çook
18 Haziran 2007, 23:05
[…] Eburhan’dan yine mükemmel bir yazı hatta bu konu ile ilgili yazı dizisi olacakmış Eburhan az kullanılan ama aslında çok kullanışlı olan HTML etiketlerini (tag) güzel bir biçimde izah etmiş. […]
19 Haziran 2007, 17:44
Çok güzel bilgiler. Devamını bekliyorum Eburhan
19 Haziran 2007, 18:14
@arda
Buradaki kodları kullanmak gerek sanırım
20 Haziran 2007, 11:09
[…] eburhan’dan “HTML Etiketlerini Yeniden Keşfetmek: optgroup” güzel bir makale. Link […]
20 Haziran 2007, 19:36
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
20 Haziran 2007, 23:52
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.
21 Haziran 2007, 13:36
Ç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.
11 Ağustos 2007, 07:52
çok güzel bir örnek olmuş ellerine sağlık
23 Şubat 2008, 13:01
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…