select tag

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:

<select>
<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>

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.

<select>
<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:

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.

21 Ocak 2008 | HTML | Comments