Datalist ve output
<datalist> ve <output> etiketlerini öğrenirsin.
Datalist ile hazır öneriler
Bazen bir alana hazır öneriler sunmak istersin: şehir, kategori, dil gibi. <datalist> bunun içindir. İçine <option value="..."> etiketleri koyarsın; tarayıcı kullanıcı yazarken bu önerileri açılır listede gösterir.
Önemli olan: <input>'un list özniteliğini datalist'in id'sine eşitlemen gerekir. Kullanıcı yine de öneri dışında bir şey yazabilir; datalist zorlamaz, yalnızca yardımcı olur.
Output ile hesap sonucu
Bir hesabın sonucunu sayfada göstermek için <output> etiketini kullanırsın. İçindeki değer JavaScript ile değişir; HTML tek başına hesap yapmaz.
Output'un for özniteliği, hesapta kullanılan input'ların id'lerini boşlukla listeler. Bu, ekran okuyucuya sonucun hangi alanlardan geldiğini söyler ve erişilebilirliği güçlendirir. Böylece kullanıcı sonucu kaynaklarıyla birlikte görür.
Uygulama Şehir öneri kutusu yaz
Form içine bir <input type="text"> ekle; name özniteliği sehir olsun ve list özniteliğini sehirler yap. Sonra bir <datalist id="sehirler"> ekle ve içine en az iki <option value="..."> koy (değerler önemli değil). Datalist'i kapanış etiketiyle kapat.
Örnek çözümü göster
<form>
<input type="text" name="sehir" list="sehirler">
<datalist id="sehirler">
<option value="İstanbul"></option>
<option value="Ankara"></option>
</datalist>
</form>Kendini test et
-
Hangisi doğrudur?
- datalist kullanıcının seçimini kısıtlar
- output etiketi kullanıcıdan metin alır
- output hesaplama sonucunu sayfada gösterir
- list özniteliği output'a bağlanır
Cevabı göster
output hesaplama sonucunu sayfada gösterir — Doğru. output, hesap sonucunu sayfada gösterir; değer JavaScript ile güncellenir.
-
İki şehir önerisi içeren datalist'in id'si ne olmalı?
<datalist id="____"> <option value="İstanbul"></option> <option value="Ankara"></option> </datalist>Cevabı göster
<datalist id="şehirler"> <option value="İstanbul"></option> <option value="Ankara"></option> </datalist> -
Etiketi ve özniteliği rolüyle eşleştir
- datalist
- Öneri listesi sunar
- output
- Hesap sonucu gösterir
- list
- input'u datalist'e bağlar
- value
- option'ın değeridir