HTML Datalist
Önceki derste select kapalı listedendi. Datalist farklı iş: normal bir input'a yazarsınız, tarayıcı önerir. Öneri alabilir veya listede olmayanı yazabilirsiniz.
datalist neden var
Arama, renk ve şehir sık cevap ister ama nadir olanı yasaklamaz. select liste dışı reddeder; boş input ipucu vermez. datalist serbest yazımla öneri boşluğunu doldurur.
Doğrudan yanıt
1) option value'lu datalist. 2) input'ta list = id. 3) label ve name input'ta — datalist göndermez. 4) Öneri veya özel metin OK. 5) Yalnızca listeden olmalıysa önceki select'i kullanın.
📊 Datalist pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| datalist | Suggestion container | Hidden list of hints; not a visible form control alone |
| option (inside datalist) | One suggestion | Prefer value= for the hinted string |
| list (on input) | Points to datalist | Must equal the datalist’s id |
| id (on datalist) | Hook for list= | Unique on the page |
| input | Typed field that submits | Owns name=; suggestions are optional help |
| label | Accessible name | Still required — list suggestions are not a label |
| name (on input) | Submit key | What posts is whatever is in the input |
Tarayıcı öneri demosu
Browser alanı Firefox'tan Safari'ye. Brave yazmak çalışır — liste kilitlemez.
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers" placeholder="Type or choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Edge">
<option value="Safari">
</datalist>
Tarayıcı demosunu okuyun
- Gönderen denetim input'tur, datalist değil
- list id ile eşleşmeli
- Her option value bir öneri
- name input değerini anahtarlar
- label alanı adlandırır
- select'ten farklı: dört isimle sınırlı değilsiniz
Şehir önerileri datalist ile
İkinci parça: şehir öner, köy de yazılabilsin. Önceki kapalı select ile karşılaştırın.
<form action="/ship" method="post">
<label for="city">City</label>
<input id="city" name="city" list="cities" placeholder="Start typing a city" autocomplete="off">
<datalist id="cities">
<option value="Tehran">
<option value="Isfahan">
<option value="Shiraz">
</datalist>
<button type="submit">Continue</button>
</form>
Şehir demosunu okuyun
- Aynı label/name kalıbı
- list/id ipuçlarını bağlar
- Gönderilen = input metni
- autocomplete=off isteğe bağlı
- Sonraki: daha geniş accessibility
datalist vs select vs input
- Yalnızca sabit küme: select
- İpucu + serbest metin: input + list + datalist
- Önerisiz: düz input
- datalist label/name yerine geçmez
- datalist'i input içine koymayın; id ile bağlayın
Alıştırma — önerileri bağlayın
- Beşinci option Opera
- id'yi bilerek bozup düzeltin
- Özel ad yazın
- Şehirlere Mashhad ekleyin
- Aynı şehirleri select yapın; bir cümle fark
- Cümle: datalist önerir; select kısıtlar
- Adlandırma sonraki accessibility dersinde
Kolay hatalar
- list ve id uyuşmazlığı
- Serbest yazımın reddini beklemek
- label unutmak
- input'ta name unutmak
- datalist'e name koymak
- value'suz boş option
- Serbest alanda yalnızca-select düşüncesi
Özet
- datalist + option value = input önerileri
- list ve id eşleştirin
- Liste dışı yazım serbest
- label ve name input'ta
- Kapalı seçim için select
- Sonraki: accessibility
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek