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:

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.

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.