HTML5 Form Input Tipleri ve Kullanımı

Bir internet sitesi hazırlarken bir şekilde mutlaka form kullanıyor ve dolayısıyla input da kullanmak zorunda kalıyoruz. Veri girişi için gerekli olan bu input nesnelerinin kullanımı göz önüne alınarak yerinde bir hamleyle HTML5 ile birlikte daha da geliştirilmiş. Bu gelişim bize, geliştiricinin işini kolaylaştırmanın yanında kullanıcı deneyimini de arttırma fırsatı sunuyor. Dilerseniz lafı hiç uzatmadan bakalım kullanabileceğimiz ne gibi inputlar mevcut ve bu inputları nasıl kullanırız.

Input Tipleri

Kullanılabilir input tipi tam 13 adet. Formlarınızda kullanmak istediğiniz veri girişine göre bunlardan bir veya birkaçını kullanabilirsiniz. Input tipleri sırasıyla şöyle:

 

color Input Kullanımı

<input type="color">
color input tipini kullanarak kolay bir şekilde renk girişi yaptırabilirsiniz. Gerek bilgisayar, gerekse mobil cihazlarda kullanıcıları renk kodları ile muhattab etmeyerek yalnızca ekrandan istedikleri tondaki rengi seçerek veri girişi yaptırabilirsiniz.

date Input Kullanımı

<input type="date">
date input tipi ile tarih seçimini kolayca yaptırabilirsiniz. Doğum tarihi gibi sık kullanılan tarih verilerinin girişi için oldukça pratik bir yöntemdir.

datetime Input Kullanımı

<input type="datetime">
Hiçbir tarayıcı desteklememektedir.

datetime-local Input Kullanımı

<input type="datetime-local">
Tarih ve saat veri girişini bir arada yapmak için en uygun input tipidir.

email Input Kullanımı

<input type="email">
Adından anlaşılacağı gibi email adresi verisinin girişi için kullanılmaktadır ve “@” işaretinin kullanımı gibi bazı denetlemeleri otomatik yaparak veri girişinin doğruluğunu kontrol etmektedir.

month Input Kullanımı

<input type="month">
Tarih girişi için kullanılan date inputundan farklı olarak içinde gün olmadan yalnızca yıl ve ay için veri girişi yapmaktadır.

number Input Kullanımı

<input type="number">
number input tipini pozitif veya negatif sayı girişi için kullanabilirsiniz.

range Input Kullanımı

<input type="range" min="1" max="100" value="50">
range input tipi number input tipine benzemektedir. Farkı ise şurada; minimum ve maksimum değer vererek, verilen değer aralığında sürükleme yoluyla seçim yapılmaktadır. Oylama ve yetenek seviyesi belirleme gibi işlemler için kullanılması oldukça uygundur.

<input type="search" results="10" autosave="saved-searches">
search input tipini arama kutusu olarak kullanabilirsiniz. Önemli özelliklerinden biri autosave özelliğidir. Bu özelliği saved-searches şeklinde kullanırsanız girilen verileri (arama terimlerini) hafızasında saklayarak kolay arama özelliği sunmaktadır.

tel Input Kullanımı

<input type="tel">
Veri olarak telefon numarası girilmesini istiyorsanız bu inputu kullanabilirsiniz ancak ne yazık ki tarayıcı desteği çok kısıtlı.

time Input Kullanımı

<input type="time">
time inputu ile saat ve dakika girişini hızlıca halledebilirsiniz.

url Input Kullanımı

<input type="url">
url ile web adresi veri girişinin yapılmasını istediğiniz alanlarda girilen verinin bir url (bağlantı) olup olmadığı kontrolünü de gerçekleştirebilirsiniz.

week Input Kullanımı

<input type="week">
url inputunun diğerlerine nazaran biraz daha spesifik bir kullanım alanına sahip olduğunu söyleyebiliriz. Yıl ve o yıla ait herhangi bir haftanın verisini kolayca elde etmek için bu inputu kullanabilirsiniz.

Örnekleri Görüntüle

Tarayıcı Desteği

HTML5 bize çok çeşitli inputlar sunuyor fakat ne yazık ki tarayıcılar bize HTML5 kadar cömert davranmıyor. Bahsettiğimiz tüm input tiplerini ne yazık ki tüm tarayıcılar desteklemiyor. Tarayıcılar bu konuda zamanla desteklerini arttıracak mı azaltacak mı bilemiyoruz. İşte bu yüzden güncel olarak tarayıcı desteğini sorgulamaya ihtiyaç duyacaksınız ve Can I Use isimli internet sitesi aracılığı ile kullanmadan önce input tiplerinin hangi tarayıcı tarafından desteklendiğini sorgulayabilirsiniz. Yapmanız gereken tek şey internet sitesine giderek arama kısmına sorgulamak istediğiniz input ismini yazmanız.

Kaynaklar:

24.03.2016 HTML Yorum yapılmamış

, , ,

Yorum yapılmamış

Yorum Yazın

kod.gen.tr