HTML datalist Etiketi Nedir ve Nasıl Kullanılır?
HTML datalist elementi temel olarak form elementlerinin daha önce belirlenen herhangi bir eleman ile doldurulması işlemini gerçekleştirir. Örneğin formumuzda kullanıcıdan hangi şehirde yaşadığının bilgisini alacağız. Kullanıcı input etiketi içine kendi yazarak bu bilgiyi aktarabilir. Ancak biz bu input etiketine kendi oluşturduğumuz bir list’i dahil edersek, kullanıcı yazmadan buradan da seçim yapabilir. Eğer list içinde yoksa kendi yazarak da işleme devam edebilir. İşte datalist HTML sayfası içinde bizim tarafımızdan list oluşturmamızı sağlayan ve bu list’i istediğimiz yerde kullanmamıza olanak sağlayan bir etikettir.
<datalist> … </datalist> elementinin kullanımı aşağıdaki gibidir.
<datalist>
<!– datalist icin elemanlar option elementi ile belirlenir –>
<option value=”deger1″>
<option value=”deger2″>
<option value=”deger3″>
…
</datalist>
HTML datalist elementi ile basit bir örnek yapalım.
<!DOCTYPE html> <head> <title>Datalist Örnek!</title> <meta charset="utf-8"> </head> <body> <form method="POST"> <table style="border: 1px; border-style: solid"> <tr> <td> <!-- verileri tasimak icin bir list olusturalim. --> <input list="sehirler"> <!-- verileri tutmak icin bir datalist olusturalim --> <datalist id="sehirler"> <!-- verileri olusturalim --> <option value="İstanbul"> <option value="Ankara"> <option value="İzmir"> <option value="Adana"> </datalist> </td> <td><input type="submit" value="Kaydet" /></td> </tr> <tr> <td colspan="2">Formu tamamlamak için kaydet tuşuna basınız.</td> </tr> </table> </form> </body> </html>
Yukarıdaki örneğimizin ekran çıktısını alalım.
Yukarıdaki ekran çıktısında görüldüğü gibi kullanıcı il değerini girerken otomatik olarak tamamlanıyor. Bir diğer konuda alanın hemen sağ tarafında bir ok işareti var. Bu işareti tıklayarak da daha önce datalist’te belirttiğimiz değerlerden herhangi birini seçebiliriz. Bazı tarayıcılarda bu ok işareti çıkmadığı için alana çift tıklamak gerekiyor.
HTML datalist etiketi konusunu bu yazımızda gördük. Konu ile ilgili soru, görüş ya da fikirlerinizi aşağıda bulunan yorumlar kısmı ile bizlere ulaştırabilirsiniz. Aşağıdaki linke tıklayarak HTML ile ilgili diğer yazılarımıza da ulaşabilirsiniz. Ayrıca Instagram ve Twitter linklerine de tıklayarak bizi Instagram ve Twitter üzerinden takip ederek destek olabilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/html/
Sosyal Medya Hesaplarımız
