0Pricing
HTML Academy · Ders

Select ve option Açılır Menüler

select ve option ile açılır seçim menüleri oluşturun

Select ve option Açılır Menüler, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

select Öğesi

<select> öğesi bir açılır menü oluşturur:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

option value ile metin

Her <option> öğesinin bir value değeri (sunucuya gönderilir) ve görüntülenen bir metni vardır:

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

selected Özniteliği

selected özniteliğiyle bir seçeneği önceden seçin:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

Kategorilere Ayrılmış Seçenekler için optgroup

İlişkili seçenekleri <optgroup> ile gruplayın:

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

multiple Özniteliği

multiple özniteliğiyle birden fazla seçeneğin seçilmesine izin verin:

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

size Özniteliği

size özniteliği, kaç seçeneğin görünür olacağını belirler:

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

Devre Dışı Seçenekler ve Gruplar

Tek tek seçenekleri veya grupların tamamını devre dışı bırakın:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

select Biçimlendirme

Yerel <select> öğesinin biçimlendirme olanakları sınırlıdır — işe yarayan yöntemler şunlardır:

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

Özel Açılır Menüler ile Yerel select Karşılaştırması

Özel bir açılır menü bileşeni değerlendirirken göz önünde bulundurulması gereken ödünleşimler:

  • Yerel select — varsayılan olarak erişilebilirdir, mobil cihazlara uygundur ve JavaScript olmadan çalışır
  • Özel açılır menü — biçimlendirme üzerinde tam denetim sağlar; ancak eksiksiz ARIA uygulaması ve klavye işlemleri gerektirir

Çoğu kullanım durumu için yerel <select> öğesini tercih edin.

JavaScript'te selected Değerini Okuma

selected değerini JavaScript ile alın veya ayarlayın:

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

Yer Tutucu Seçenek Kalıbı

Seçilemeyen bir yer tutucu seçeneği oluşturun:

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

Hızlı Kontrol

Bir select açılır menüsündeki ilişkili seçenekleri hangi öğe gruplar?

Özet: select ve option

Açılır menülerin temel özellikleri:

  • <select> + <option> — açılır menü
  • option üzerindeki value — sunucuya gönderilen değer
  • selected — bir seçeneği önceden seçer
  • <optgroup label> — ilişkili seçenekleri gruplar
  • multiple — birden fazla seçime izin verir
  • size — açılır menü olmadan N seçeneği gösterir

Sıkça Sorulan Sorular

“Select ve option Açılır Menüler” dersi ücretsiz mi?

Evet — “Select ve option Açılır Menüler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Select ve option Açılır Menüler” dersinde ne öğreneceğim?

select ve option ile açılır seçim menüleri oluşturun HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Select ve option Açılır Menüler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Select ve option Açılır Menüler
  2. Çok Satırlı Girdi için Textarea
  3. Onay Kutusu ve Radyo Düğmesi Grupları
  4. Otomatik Tamamlama için Datalist
← HTML Academy Sayfasına Dön