HTML Açılır Liste: select, option, optgroup ve mult…

Q: HTML'de açılır liste nasıl yapılır?

Her seçenek için bir ile kullan: Red Blue . Select'e bir name ve bir ver.

Q: Bir select'te varsayılan seçenek nasıl ayarlanır?

O seçeneğe selected ekle: Blue . O olmadan ilk seçenek seçilir. JavaScript'te select.value = 'blue' ata.

Q: Bir select'e placeholder nasıl eklenir?

İlk seçeneği boş ve seçilemez yap: Choose a country . Gerçek bir seçenek seçilene kadar form gönderilemesin diye elementine required ekle.

Q: JavaScript'te bir select'in seçili değerini nasıl alırım?

select.value seçili seçeneğin değeridir. Görünen metni için select.selectedOptions[0].text kullan, seçim değiştiğinde tepki vermek için de change olayını dinle. Çoklu bir select için select.selectedOptions üzerinde map kullan.

Q: select ile datalist arasındaki fark nedir?

Bir yalnızca listelenen seçeneklere izin verir. olan bir ise okur yazarken seçenek önerir ama her metni kabul eder. Cevap senin seçeneklerinden biri olmak zorundaysa select kullan.

HTML'de açılır liste nasıl yapılır

Açılır liste, her seçenek için bir <option> içeren bir <select> elementidir. Her seçeneğin value değeri formun gönderdiği şeydir; etiketlerin arasındaki metin de okurun gördüğü şeydir. Birini seç ve Submit'e bas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Form language=js gönderir: select'in name değeri ve seçilen seçeneğin value değeri. selected varsayılanı belirler; o olmadan ilk seçenek seçilir. Bir seçeneğin value değeri yoksa onun yerine metni gönderilir.

Label'ı select'e for ve id ile (ya da onu sararak) bağla, böylece label'a tıklamak açılır listeye odaklanır ve ekran okuyucular onu duyurur.

select ve option özellikleri

Element	Özellik	Ne yapar
`<select>`	`name`	Değerin gönderildiği anahtar
`<select>`	`required`	Boş ilk placeholder seçeneği değil, gerçek bir seçenek seçilmeli
`<select>`	`multiple`	Birkaç seçenek seçilebilir
`<select>`	`size`	Kaç satırın görünür olduğu (onu bir liste kutusuna çevirir)
`<select>`	`disabled`	Bütün açılır liste kapalıdır ve gönderilmez
`<option>`	`value`	Seçildiğinde gönderilen şey
`<option>`	`selected`	Sayfa yüklendiğinde seçili
`<option>`	`disabled`	Gösterilir ama seçilemez
`<optgroup>`	`label`	Grubun başlığı

required ile bir placeholder seçeneği

Bir select'in her zaman bir değeri vardır, bu yüzden placeholder olmadan okur açılır listeye hiç dokunmasa bile ilk gerçek seçenek gönderilir. Boş bir ilk seçenek bunu çözer, required de gerçek bir seçenek seçilene kadar gönderimi durdurur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Seçim yapmadan Continue'ya bas: tarayıcı reddeder ve bir öğe seçmeni ister. Placeholder'ın değeri required tarafından boş kabul edilen value="" olur; bir ülke seçildikten sonra yeniden seçilemesin diye de disabled durumundadır.

optgroup ile seçenekleri gruplamak

<optgroup label="..."> bir seçenek setinin üstüne bir başlık koyar. Başlık seçilemez:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Gruplar iç içe yazılamaz: bir liste tek seviye başlık alır, daha fazlasını değil. Bir <optgroup> üzerindeki disabled içindeki her seçeneği devre dışı bırakır.

Çoklu seçim

multiple okurun birkaç seçenek seçmesine izin verir ve açılır listeyi bir liste kutusuna çevirir. Seçenekleri tek tek eklemek için Ctrl'ye (Mac'te Cmd), bir aralık seçmek için Shift'e basılı tut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

Form skills=html ve skills=css gönderir: seçilen her seçenek için bir kez aynı ad. Birçok kişi Ctrl+tık hareketini bilmez, bu yüzden birkaç seçenek için bir checkbox grubunu kullanmak daha kolaydır.

Değeri JavaScript'te okumak ve ayarlamak

select.value seçili seçeneğin değerini okur ve ayarlar, change olayı da okur farklı bir seçenek seçtiğinde tetiklenir. Yaygın bir kullanım, seçenekleri ilkine bağlı olan ikinci bir açılır listedir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) bir seçenek oluşturur. select.selectedIndex seçili seçeneğin konumudur, select.selectedOptions de seçili olanları listeler; çoklu bir select'i böyle okursun.

Bir select'e stil vermek

Açılır listenin açık hâlini tarayıcı ve işletim sistemi çizer ve bunun çok azına stil verilebilir. Kapalı kutuya verilebilir: appearance: none yerel oku kaldırır, bir arka plan resmi de onun yerine seninkini koyar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

Fazladan son padding, uzun seçenek metni okun altına girmesin diye ok için yer bırakır. font: inherit burada da butonlardaki kadar önemlidir: select'ler varsayılan olarak tarayıcının küçük form yazı tipini kullanır. Açık listedeki seçenekler yerel görünümü korur. Chrome, appearance: base-select ile tercih ettiğinde açık listeye de stil verebilir; bunu desteklemeyen tarayıcılar yerel listeyi gösterir. Her yerde tam kontrol, ARIA ile yapılmış özel bir bileşen gerektirir; bunu doğru yapmak göründüğünden çok daha fazla iştir.

select, radio butonlar mı yoksa datalist mi?

Kullan	Ne zaman
`<select>`	Uzun bir listeden tek seçim ya da yerin dar olduğu durumlar
Radio butonlar	Hepsi görünür olması gereken birkaç seçenekten tek seçim (bkz. HTML radio buton)
`<datalist>` ile `<input>`	Öneriler, ama yazılan her değere izin verilir

Sık yapılan hatalar

Zorunlu bir seçimde placeholder olmaması. Okur hiç seçmemiş olsa bile ilk gerçek seçenek gönderilir.
value="none" gibi gerçek bir değeri olan bir placeholder. required onu geçerli bir seçim olarak ele alır. value="" kullan.
Metin uzun ya da çevrilmiş olduğunda value olmayan seçenekler. Sunucu, dile göre değişen görünen metni alır.
Birkaç seçenek için multiple. Checkbox'ları kullanmak daha kolaydır.
Seçeneklerde click dinlemek. <select> üzerinde change kullan; klavyeyle yapılan değişikliklerde de tetiklenir.
Label olmaması. Yalnızca placeholder'ı olan bir select, bir seçenek seçildikten sonra adsız kalır.

Sıkça Sorulan Sorular

HTML'de açılır liste nasıl yapılır?

Her seçenek için bir <option> ile <select> kullan: <select name="color"><option value="red">Red</option><option value="blue">Blue</option></select>. Select'e bir name ve bir <label> ver.

Bir select'te varsayılan seçenek nasıl ayarlanır?

O seçeneğe selected ekle: <option value="blue" selected>Blue</option>. O olmadan ilk seçenek seçilir. JavaScript'te select.value = 'blue' ata.

Bir select'e placeholder nasıl eklenir?

İlk seçeneği boş ve seçilemez yap: <option value="" disabled selected>Choose a country</option>. Gerçek bir seçenek seçilene kadar form gönderilemesin diye <select> elementine required ekle.

JavaScript'te bir select'in seçili değerini nasıl alırım?

select.value seçili seçeneğin değeridir. Görünen metni için select.selectedOptions[0].text kullan, seçim değiştiğinde tepki vermek için de change olayını dinle. Çoklu bir select için select.selectedOptions üzerinde map kullan.

select ile datalist arasındaki fark nedir?

Bir <select> yalnızca listelenen seçeneklere izin verir. <datalist> olan bir <input> ise okur yazarken seçenek önerir ama her metni kabul eder. Cevap senin seçeneklerinden biri olmak zorundaysa select kullan.

İlgili kavramlar