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

Sıradaki ders: Progress ve meter

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler