datalist Etiketi

datalist etiketi, HTML formlarındaki input giriş alanları için otomatik tamamlama oluşturur.

Otomatik tamamlamanın özü: kullanıcı giriş alanına bir şeyler yazmaya çalıştığında, aşağıda kullanılabilir seçenekler listesini temsil eden bir açılır ipucu belirecektir. Kullanıcı, sonuna kadar yazmak zorunda kalmadan önerilen seçeneklerden birini seçebilecektir.

Bir input etiketine otomatik tamamlama bağlamak için, ona list niteliği verilmelidir. Bu nitelikte, bağlanan datalist etiketinin id niteliği belirtilmelidir.

Seçim seçenekleri, datalist etiketinin içinde bulunan option etiketlerinde saklanır.

Örnek

Giriş alanına bir ülke girelim. Önce 'b' harfini girelim - ve üç ülkeden oluşan bir açılır ipucu görelim. Sonra 'e' harfini de girelim - önerilen ülke sayısı ikiye düşecek:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

Örnek

Şimdi option etiketine value niteliğini ekleyelim. Belirli bir ülke seçildiğinde, bağlı input'a ülkenin adı değil, value niteliğinin içeriği girecektir:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

Örnek . autocomplete Niteliğinin Etkisi

Açılır ipucu listesi, autocomplete niteliğinden etkilenir. Eğer açıksa (varsayılan olarak böyledir), datalist etiketinde belirttiğiniz değerlere, kullanıcının bu alana daha önce girdiği değerler de karışacaktır.

Alana 'Brazil' yazın ve gönderme düğmesine tıklayın (gönderme olmadan tarayıcı bu ülkeyi hatırlamaz). Sonra bu örneğe geri dönün ve 'b' harfini girin - açılan listede sadece datalist'teki 3 ülkeyi değil, daha önce girilmiş ülkeyi de göreceksiniz (ayrıca, aynı işlemi 'Belarus' kelimesiyle yaparsanız - açılır listede bu değer iki kez görünecektir).

Eğer bu durum sizin için sorun teşkil ediyorsa - autocomplete niteliğini off değerini vererek devre dışı bırakın.

Açıklanan işlemleri bu örnekle deneyin:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

Ayrıca Bakınız

form alanlarına otomatik tamamlama atayan,
autocomplete niteliği