Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragrafları
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • HTML Onay Kutuları
  • HTML Radyo Düğmeleri
  • HTML Açılır Listeler
  • HTML Seçim Aralıkları
  • HTML Formun Ortak Öğelerini Toplamak
  • Sayfanın dilini belirtmek
  • HTML Dil Kodları
  • HTML Ülke Kodları
  • HTML Farklı Dillerde Sayfalar
  • Diğer dersler
  • Database - Veritabanları
  • HTML5 Nedir?
  • ens

K-kudo

HTML öğren

HTML araçları

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Yardım
  • Araştırma

HTML Açılır Listeler

önceki ders sonraki ders
Sayfa içeriği
  • › Açılır liste konsepti
  • › Açılır liste eklemek

Açılır liste konsepti

Açılır listeler veya Dropdown, tıklandığında içindeki tüm öğeleri gösteren düğme benzeri bir listedir.

Varsayılan olarak, sayfada yalnızca listedeki ilk öğe görünür ve kullanıcı bunlardan birini seçebilir, ancak bunlardan birden fazla değer seçmesine ek olarak görünecek öğe sayısını belirtebilirsin.


Açılır liste eklemek

Ondan bir öğe seçilebildiğin açılır liste eklemek için, tarayıcıyı bir açılır liste eklemek istediğini söylemek için <select> </select> etiketi ekleyebilirsin ve, içindeki öğeleri eklemek için <option> </option> etiketi ekleyebilirsin.

<select> etiketin özellikleri

  • id: <label> etiketi ile ilişkilendirmek istiyorsan id eklemelisin.
  • name: Gönder butonuna tıklandığında içinde seçilen değerin gönderilmesi için ekliyoruz.
  • size: Listede görünecek öğelerin sayısını sınırlamak istediğimizde size ekliyoruz. Varsayılan olarak, yalnızca bir öğe görünür.
  • disabled: İnaktif hale getirmek istiyorsan disabled eklemelisin. Yani soluk bir renkte görünmek ve içine yerleştirilen hiçbir değere tıklanmamak'tır.

<option> etiketin özellikleri

  • value: Seçeneğin değerini ayarlamak için ekliyoruz ve her <option> için farklı bir değer belirlememiz gerekiyor.
  • selected: Öğeyi varsayılan olarak seçili yapmak istiyorsan selected eklemelisin.
  • disabled: İnaktif hale getirmek istiyorsan disabled eklemelisin.

Aşağıdaki örnekte 4 öğeli bir açılır liste ekledim.

  • <label for="languages">Senin dilin seç:</label>
  • <select id="languages" name="languages">
  •     <option value="turkish">Türkçe</option>
  •     <option value="english">ingilizce</option>
  •     <option value="arabic">arapça</option>
  •     <option value="japanese">japonca</option>
  • </select>
kod dene 

Aşağıdaki örnekte, sayfa açıldığında varsayılan olarak dördüncü öğenin seçileceğini belirten bir liste ekledim.

  • <label for="languages">Senin dilin seç:</label>
  • <select id="languages" name="languages">
  •     <option value="turkish">Türkçe</option>
  •     <option value="english">ingilizce</option>
  •     <option value="arabic">arapça</option>
  •     <option value="japanese" selected>japonca</option>
  • </select>
kod dene 

Aşağıdaki örnekte, listedeki son iki öğe inaktif olan bir liste ekledim.

Dördüncu ve üçüncü <option> etiketi disabled özelliği ekledim için inaktif oldu.

  • <label for="languages">Senin dilin seç:</label>
  • <select id="languages" name="languages">
  •     <option value="turkish">Türkçe</option>
  •     <option value="english">ingilizce</option>
  •     <option value="arabic" disabled>arapça</option>
  •     <option value="japanese" disabled>japonca</option>
  • </select>
kod dene 

Aşağıdaki örnekte inaktif bir liste ekledim.

<select> etiketi disabled ekledim için liste inaktif oldu.

  • <label for="languages">Senin dilin seç:</label>
  • <select id="languages" name="languages" disabled>
  •     <option value="turkish">Türkçe</option>
  •     <option value="english">ingilizce</option>
  •     <option value="arabic">arapça</option>
  •     <option value="japanese">japonca</option>
  • </select>
kod dene 
önceki ders sonraki ders

Kullanım Koşulları ve Gizlilik Politikası © 2021-2023 HTML öğren.