HTML select, option, optgroup ve datalist: Açılır Liste Rehberi

Temel select yapısı

Bir select, diğer form denetimleri gibi bir <label> ile ilişkilendirilmeli ve gönderilecek verinin adını taşıyan bir name almalıdır. Her <option> öğesinin value değeri, o seçenek seçildiğinde sunucuya giden değerdir. value yazılmazsa seçeneğin metni değer olarak kullanılır.

<label for="sehir">Şehir seçin</label>
<select id="sehir" name="sehir">
  <option value="ist">İstanbul</option>
  <option value="ank" selected>Ankara</option>
  <option value="izm">İzmir</option>
</select>
<!-- Gönderilen çift: sehir=ank -->

Sayfa ilk açıldığında hangi seçeneğin seçili olacağını selected belirler. Hiçbir seçenekte selected yoksa ilk seçenek seçili gelir. Çoklu seçim olmayan bir select içinde yalnızca bir seçenek selected taşıyabilir. JavaScript tarafında select öğesinin value özelliği seçili seçeneğin değerini verir.

Teknik özete göre select, ifade içeriği kabul eden her öğenin içine konabilir; içinde <option>, <optgroup> ve <hr> öğeleri ile <div>, <script>, <template> ve <noscript> bulunabilir. Başlangıç ve bitiş etiketleri zorunludur.

select öznitelikleri

select öğesi global özniteliklerin yanında şu öznitelikleri alır. Çoğu diğer form denetimleriyle aynı şekilde çalışır:

• name: gönderilecek verinin adı; yazılmazsa seçim gönderilmez.
• required: en az bir seçenek seçilmeden form gönderilemez (aşağıdaki yer tutucu kuralına bakın).
• multiple ve size: çoklu seçim ve görünen satır sayısı.
• disabled: select etkileşime kapanır ve gönderilmez. Yazılmasa bile devre dışı bir <fieldset> içindeyse bu durumu üst öğeden alır.
• form: select öğesini içinde bulunmadığı bir forma bağlar ya da bulunduğu formun yerine başka bir formu seçer.
• autofocus: sayfa yüklenince odağı select öğesine verir; belgede yalnızca bir form öğesinde bulunmalıdır.
• autocomplete: tarayıcının otomatik doldurma özelliği için ipucu verir; ülke veya il seçimi gibi alanlarda işe yarar (autocomplete yazısı).

readonly bu listede yoktur: MDN readonly sayfası bu özniteliğin select ve button öğelerinde geçerli olmadığını açıkça belirtir. Bir seçimi kilitlemek istiyorsanız disabled kullanmanız ve değerin gönderilmeyeceğini hesaba katmanız gerekir; değerin yine de sunucuya gitmesi gerekiyorsa aynı adla bir gizli alan ekleyebilirsiniz. Kullanıcı seçimi değiştirdiğinde select öğesi change ve input olaylarını tetikler.

option öznitelikleri

• value: gönderilecek değer; yoksa metin içeriği kullanılır.
• selected: başlangıçta seçili olduğunu belirten mantıksal öznitelik.
• disabled: seçenek seçilemez; çoğu tarayıcı onu soluk gösterir. Seçenekte yazılmamış olsa bile devre dışı bir <optgroup> içindeyse seçilemez.
• label: seçeneğin anlamını gösteren metin; yazılmazsa metin içeriği kullanılır.

Geleneksel select içindeki option yalnızca metin alır; é gibi karakter referansları kullanılabilir (HTML entity yazısı). Bitiş etiketi, ardından başka bir option veya optgroup geliyorsa ya da üst öğenin içeriği bitiyorsa yazılmayabilir; okunabilirlik için yine de yazmanızı öneririz. option öğesinin örtük rolü option olur ve üzerine role yazılamaz.

Yer tutucu seçenek ve required

required eklendiğinde kullanıcı en az bir seçenek seçmeden form gönderilemez. MDN burada "yer tutucu etiket seçeneği" (placeholder label option) kavramını tanımlar: select öğesinin doğrudan alt öğesi olan (bir optgroup içinde olmayan), listedeki ilk ve değeri boş dize olan seçenek. Bu seçenek gerçek bir seçenek sayılmaz; yalnızca seçili olduğunda select boş kabul edilir ve required hatası verir.

<label for="konu">Konu</label>
<select id="konu" name="konu" required>
  <option value="">Bir konu seçin</option>
  <option value="fatura">Fatura</option>
  <option value="teknik">Teknik destek</option>
</select>

Kuralın iki ince noktası var. Birincisi, yer tutucu dışındaki her seçenek, değeri boş olsa bile geçerli sayılır. İkincisi, bu kavram yalnızca size 1 olduğunda ve multiple yokken geçerlidir; liste kutusu biçiminde gösterilen bir select içinde aynı seçenek sıradan bir seçenek olur. Select ayrıca hiç seçeneği yoksa, çoklu seçimde kullanıcı bütün seçimleri kaldırırsa veya değeri betikle boş dizeye atanırsa da seçimsiz sayılır. Doğrulamanın bütün kuralları form doğrulama yazısında anlatılıyor.

optgroup ile gruplama ve hr ayırıcılar

<optgroup>, seçenekleri başlıklı gruplara ayırır. label özniteliği bu öğe kullanıldığında zorunludur ve tarayıcının grubu adlandırmak için gösterdiği metindir; MDN Text labels and names rehberi de yardımcı teknolojilerin grubu tanıtabilmesi için bu özniteliği ister. disabled eklenirse gruptaki hiçbir seçenek seçilemez, ama select kendisi etkileşime açık kalır. optgroup iç içe yazılamaz ve yalnızca select içinde bulunabilir.

<label for="paket">Hosting paketi</label>
<select id="paket" name="paket">
  <optgroup label="Paylaşımlı">
    <option value="baslangic">Başlangıç</option>
    <option value="pro">Pro</option>
  </optgroup>
  <hr />
  <optgroup label="Sunucu" disabled>
    <option value="vds">VDS</option>
    <option value="dedicated">Dedicated</option>
  </optgroup>
</select>

Seçenekler arasına görsel ayırıcı olarak <hr> konabilir. MDN, bu ayırıcıların erişilebilirlik ağacına yansımadığını, dolayısıyla tamamen süs olarak düşünülmesi gerektiğini belirtir; anlamlı gruplama için optgroup kullanın.

multiple ve size: çoklu seçim ve liste kutusu

multiple mantıksal özniteliği sıfır ya da daha fazla seçenek seçilmesine izin verir. Seçili değerler aynı adla tekrar tekrar gönderilir: ilgi=css&ilgi=js gibi. size ise kapalı durumda kaç seçeneğin görüneceğini belirler. Varsayılanı 1 olur, multiple varsa 4 olur. Değer 1'den büyükse ya da multiple varsa tarayıcı kaydırılabilir bir liste kutusu çizer; aksi hâlde açılır liste gösterir. JavaScript tarafında size özelliği geriye dönük uyumluluk için varsayılan olarak 0 döndürür.

<label for="ilgi">İlgi alanlarınız (birden fazla seçebilirsiniz)</label>
<select id="ilgi" name="ilgi" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="php">PHP</option>
</select>
<!-- CSS ve JavaScript seçilirse: ilgi=css&ilgi=js -->

Masaüstünde fare kullanıcıları Ctrl (macOS'ta Command) ya da Shift tuşunu basılı tutarak birden fazla seçenek seçer. Klavyede ardışık seçim için Shift ile ok tuşları, ardışık olmayan seçim için Ctrl ile ok tuşları ve seçmek için Boşluk kullanılır; MDN bu klavye davranışlarının standart olmadığını ve tarayıcıya göre değiştiğini belirtir. Bu yüzden MDN, çoklu seçim kullandığınızda kullanıcıya birden fazla seçenek seçebileceğini her zaman söylemenizi ister; etiket metnindeki parantez bunun için.

multiple ile size="1" birlikte yazılırsa destekleyen tarayıcılar çoklu seçime izin veren bir açılır liste gösterir. MDN bazı tarayıcıların bu durumda listeyi açmadığını ve kullanılabilirliğin zarar gördüğünü not eder. Rol açısından da fark vardır: multiple olmayan ve size değeri 1'den büyük olmayan select örtük olarak combobox, diğerleri listbox rolündedir.

Seçenekleri sarmalayan öğeler

Select, seçenek listesini yalnızca doğrudan alt öğelerden değil bütün <option> torunlarından oluşturur. Bu yüzden seçenekleri <div> ile sarmalasanız da seçilebilir kalırlar ve gönderime girerler. MDN bu sarmalayıcıların özelleştirilebilir select biçimlemesi için yararlı olduğunu, ama grup, etiket veya ayırıcı oluşturmadığını vurgular. Ayrıca eski ayrıştırma davranışına sahip tarayıcılar izin verilmeyen öğeleri ayrıştırma sırasında siler ve yalnızca option, optgroup ve hr yapısını tutar; sarmalayıcıya dayanan biçim veya betik bu tarayıcılarda çalışmaz.

datalist: öneri listesi

<datalist> bir denetim değil, bir öneri listesidir. Bir id alır ve bir <input> öğesinin list özniteliği bu id değerini gösterir. Her option öğesinin value değeri bir öneridir; label ya da metin içeriği bazı tarayıcılarda değerin yerine, bazılarında yanında gösterilir. Kullanıcı bir öneri seçtiğinde alana her zaman value yazılır.

<label for="dil">Programlama diliniz</label>
<input type="text" id="dil" name="dil" list="diller" />
<datalist id="diller">
  <option value="JavaScript"></option>
  <option value="Python"></option>
  <option value="PHP"></option>
</datalist>

MDN'e göre metin, arama, URL, telefon, e-posta ve sayı türlerinde öneriler açılır bir menüde gösterilir; tarih ve saat türleri ve renk seçici de önerileri kendi arayüzlerinde sunabilir. range türünde ise öneriler kaydırıcı üzerinde işaret çizgileri olarak görünür (number ve range yazısı). Datalist öğesinin örtük rolü listbox olur.

MDN datalist için üç erişilebilirlik sorununa dikkat çeker: önerilerin yazı boyutu sayfa yakınlaştırılsa da büyümez, öneri listesi CSS ile neredeyse hiç hedeflenemediği için yüksek kontrast modunda uyarlanamaz ve bazı ekran okuyucu ile tarayıcı ikilileri öneri penceresinin içeriğini okumaz. Kritik bir seçim için yalnızca datalist önerilerine güvenmeyin.

select mi datalist mi?

Kısacası değerlerin kesin bir kümeden gelmesi gerekiyorsa select, kullanıcıya kolaylık sağlarken serbest girişe de izin vermek istiyorsanız datalist kullanın. MDN'in deyişiyle datalist, select öğesinin yerine geçmez.

selectedcontent ve özelleştirilebilir select

Select öğesini CSS ile biçimlemek uzun süre zordu. MDN artık select öğesinin bütün parçalarının biçimlenebildiği "özelleştirilebilir select" yapısını belgeliyor; bu yapı yeni olduğu için tarayıcı desteği için MDN uyumluluk tablosuna bakın. Yapının HTML tarafındaki parçası şöyledir: select öğesinin ilk alt öğesi bir <button> olur, bu düğmenin tek alt öğesi de <selectedcontent> öğesidir. Seçenekler bu ikilinin ardından gelir. Bu yapıda option öğeleri yalnızca metin değil, simge veya görsel gibi herhangi bir içerik alabilir.

<label for="ulke">Ülke</label>
<select id="ulke" name="ulke">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="tr"><img src="/bayrak/tr.svg" alt="" width="16" height="12" /> Türkiye</option>
  <option value="de"><img src="/bayrak/de.svg" alt="" width="16" height="12" /> Almanya</option>
</select>

<selectedcontent>, seçili option öğesinin içeriğinin cloneNode() ile alınmış bir kopyasını gösterir ve seçim değiştiğinde bu kopya yenilenir. MDN'in uyarısı önemlidir: tarayıcı kopyayı yalnızca seçim değiştiğinde günceller. Seçili seçeneğin içeriğini sonradan betikle değiştirirseniz kopya eskisi gibi kalır ve onu elle güncellemeniz gerekir; seçenekleri ilk çizimden sonra güncelleyen ön yüz çatılarında bu durum beklenmedik sonuçlar doğurabilir.

Select içindeki düğme varsayılan olarak inert durumdadır; bu yüzden selectedcontent içeriğiyle etkileşime girilemez ve odaklanılamaz. Düğme ya da selectedcontent yazılmazsa tarayıcı seçili seçeneği göstermek için örtük bir düğme oluşturur, ancak bu düğme CSS ile hedeflenemez. Biçimlemenin nasıl etkinleştirildiği ve ayrıntıları MDN'in Customizable select rehberinde anlatılıyor; bu yazının kapsamı HTML yapısıyla sınırlı. Yeni özelliklerin genel görünümü için HTML Living Standard yazısına bakabilirsiniz.

Sık yapılan hatalar

• Yer tutucu seçeneğe değer vermek: value="0" yazılan "Seçin" seçeneği gerçek seçenek sayılır ve required hiç hata vermez. Değer boş dize olmalıdır.
• Yer tutucuyu optgroup içine koymak: kurala göre select öğesinin doğrudan alt öğesi olmalıdır.
• optgroup için label yazmamak: öznitelik zorunludur ve grubun adını yardımcı teknolojilere taşır.
• Çoklu seçimi kullanıcıya söylememek: MDN etikette veya yakınında belirtilmesini ister.
• Sunucuda yalnızca son değeri okumak: multiple ile aynı ad birden fazla kez gelir; sunucu tarafında dizi olarak okunmalıdır.
• datalist ile değerin listede olacağını varsaymak: kullanıcı her şeyi yazabilir; sunucuda denetleyin.
• Seçenek ayırıcısına anlam yüklemek: hr ekran okuyuculara ulaşmaz.

Sık Sorulan Sorular

option üzerinde value yazmak zorunlu mu?

Değildir; yazılmazsa metin içeriği gönderilir. Yine de MDN her seçeneğe bir value vermenizi önerir, böylece görünen metni değiştirdiğinizde sunucuya giden değer etkilenmez.

Select için placeholder özniteliği var mı?

Yoktur. Aynı işi değeri boş olan ilk option görür; MDN bu seçeneği anlamca placeholder ile eşdeğer sayar.

Select içinde arama yapılabilir mi?

Yerleşik bir arama alanı yoktur. Kullanıcının yazarak filtrelemesini istiyorsanız bir metin alanı ve datalist daha uygundur.

Özelleştirilebilir select eski tarayıcılarda bozulur mu?

MDN'e göre eski ayrıştırma davranışındaki tarayıcılar izin verilmeyen öğeleri (sarmalayıcılar, button, selectedcontent) ayrıştırırken siler ve yalnızca option, optgroup ve hr yapısını tutar. Seçenekler çalışmaya devam eder, ama silinen öğelere dayanan biçim ve betikler çalışmaz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · form etiketi · input türleri · label ve fieldset · form doğrulama · number ve range · yeni HTML özellikleri