HTML Datalist Etiketi ve Örnek Kullanımı!

Html datalist etiketi önceden tanımlanmış seçeneklere sahip bir veri listesi oluşturmamıza yarayan etikettir. Genellikle bizim belirttiğimiz seçenekler dahilinde kullanıcılar hareket eder.

HTML Datalist Etiketi ve Örnek Kullanımı!
HTML Datalist Etiketi ve Örnek Kullanımı!

HTML Datalist Etiketi Nasıl Kullanılır?

Aşağıdaki örnekte olduğu gibi;

Bu örnekte sizden bir tarayıcı seçmeniz isteniyr. Bir tarayıcı listesi görmemeniz normal çünkü html datalist etiketi default olarak görünmezdir. Siz tarayıcı ismi yazmak için yazı alanına tıkladığınızda tarayıcıların listesi görünecektir. Buradan istediğiniz seçeneği tıklayabilirsiniz.

Ayrıca onlarca seçeneğin olduğu bir durumda ise istediğinizi bulmanız için yazı alanına istediğiniz seçeneği yazmaya başladığınızda istediğiniz seçenek bulunana kadar her harfte tarayıcı seçenekler arasında otomatik olarak filtreleme yapacaktır.

Tanım ve Kullanım

<datalist> Etiketi, <input> elemanı için önceden tanımlanmış seçenekler listesini belirtir.

<datalist> Etiketi <input> elemanları için bir “otomatik tamamlama” özelliği sağlamak için kullanılır.

<datalist> Öğenin id özelliği (bu bağlar onları birbirlerine) <input> öğenin Liste özelliğine eşit olmalıdır.

Html datalist etiketi Safari tarayıcısının 12.1 sürümünden önceki sürümlerde desteklenmemektedir.

Varsayılan CSS Ayarları

Çoğu tarayıcı, <datalist> öğeyi aşağıdaki varsayılan değerlerle görüntüler:

datalist {
  display: none;
}

Datalist etiketi içindeki seçenekleri ilk bakışta görememenizin nedeni de bu varsayılan css özelliğidir.

Armyyazılım İbrahim BOZKURT

En önemlisi herhangi bir sorunuz ve öneriniz varsa, yorumlar kısmında bize bildirin! Eğer yazılım ile ilgileniyorsanız sizde bizlere katılıp makaleler yazablir veya video içerikler üreteblirsiniz. Sizlerle birlikte bizde büyük bir ekip olabiliriz.

Ayrıca İnstagram hesabımızı takip edeblr  bize  Twitter ’dan da yazablrsnz. Sosyal medya hesaplarımızdan bize ulaşarak istediğiniz konularda eğer biliyorsak size yardımcı olmaktan mutluluk duyarız.

Bu platformlardan herhangi birinde hesabınız yok ise telaşa gerek yok. Çünkü İstediğiniz soruyu yorumlarda belirtebilirsiniz.

İlginizi çekebilir…

Ayrıca Diğer tüm etiketleri ve kullanımını görmek için Tüm HTML Kodları ve Açıklamaları! makalemize bakabilirsiniz. Çünkü Eminiz ki bilmediğiniz , bilmediğimiz o kadar çok html etiketleri var ki şaşıracaksınız.

Ayrıca Java ve Python ile ilgileniyorsanız Java ve Python kategörilerimize de bakmanızı öneririz.

Ayrıca Css öğrenip istediğiniz tasarımları yapmak isterseniz Css kategorimize göz atmanızı tavsiye ederiz.

Veya JavaScript öğrenip projelerinizi daha dinamik hale getirmek istiyorsanız JavaScript kategorimize bakmanızı öneririz.

En önemlisi bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz…



Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


*
*