Sayfa içeriği
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>
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>
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>
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>