HTML5 Datalist Element’i İle Birçok İnput Nesnesine Veri Listesi Hazırlama

Başlıkta’da belirtildiği gibi HTML5 ile gelen datalist ile input nesnesi için veri listesi hazırlayabilirsiniz örnek olarak range türü için aralık, color için renk listesi, text için otomatik tamamlama gibi özellikleri datalist veri listesi oluşturarak kullanabilirsiniz.

HTML5 Datalist element’i ile birçok input nesnesine veri listesi hazırlama

Otomatik Tamamlama İle Sehir Seçim Listesi

İlk örneğimizi otomatik tamamlama üzerine yapalım HTML5 ile beraber gelen datalist ile şehirler listesi oluşturacağız ve bu listeyi oluşturacağımız input nesnesine bağlayacağız bağlama işlemi için yapmanız gereken oluşturduğunuz datalist için id özelliğine bir değer girmek ve buraya girdiğiniz değeri input nesnesinin list özelliğine girerek otomatik tamamlama özelliğini kullanabilirsiniz.

Şimdi şehirler listesinin bulunduğu bir datalist ve oluşturulan listeyi bağlamak için ise bir input nesnesi oluşturuyoruz.

HTML

Şimdi farklı bir örnek üzerinde duralım farzedelimki mahallelerin olduğu bir listeyi üstteki gibi otomatik tamamlama özelliği şeklinde kullanmak istiyorsunuz fakat türkiyedeki mahalle sayısı 20.09.2014 tarihi itibari ile 31743 adettir bu mahalleleri sayfa yüklendiğinde bir datalist oluşturmak hem sayfaya çok ağır bir yük oluşturacaktır hemde kullanıcı açısından sayfa çok geç açılacaktır bu durumda yapılması gereken kullanıcının girdiği değere göre dinamik olarak üretmek olacaktır böylelikle daha az sonuç gelecektir javascript ile bunu nasıl gerçekleştireceğimizi görelim.

HTML

Javascript

Sonuç

Renk Seçim Listemizi Oluşturma

HTML5 ile gelen özelliklerden biride renk seçimi için giriş nesnesi oluşturabiliyorduk oluşturduğumuz renk seçim girişi ile buton oluşmakta ve üzerinde varsayılan olarak siyah renk geliyordu bu butona tıkladığımızda ise word, paint gibi birçok yazılımda görmeye alışkın olduğunu işletim sisteminin renk seçim paleti geliyor bu paletten seçtiğimiz renk buton üzerinde yer alıyor buton üzerinde seçtiğimiz renge ulaşmak için ise input nesnesinin value özelliğini kullanıyoruz istersek kendimizde value özelliğine varsayılan değerler atayabiliriz. şimdi kendi renk listemizi color türü input nesnesine nasıl tanımlayabileceğimizi görelim.

HTML

Sonuç

Aralık listesi oluşturma

HTML5 ile beraber gelen yeni input türlerinden biri olan range ile belirtmiş olduğumuz aralıklarda kullanıcılara değer seçtirebiliyoruz. datalist nesnesini kullanarak range türündeki input nesnemiz için bir aralık listesi oluşturacağız.

HTML

Sonuç

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın