HTML5 ile Yeni Veri Girişi ve Form Elemanları

Bu bölümde HTML5'in girdi (input) elemanlarından bahsedilecektir. Önceki haftalardan hatırlayacağınız üzere etiketi, <form> ve </form> etiketleri arasında yer alır ve kullanıcılardan farklı tür veri girişi yapacağı alanları tanımlamaktadır. HTML5 ile beraber çok sayıda yeni veri giriş tipi ve form elemanı dâhil olmuştur. Yeni veri giriş tiplerinden sonra bu tiplere kazandırılan yeni özellikler anlatılacaktır.

HTML5 ile Yeni Veri Giriş (Input) Tipleri

HTML5 ile veri girişi tipleri çeşitlilik göstermektedir. Aşağıda yeni veri giriş tiplerinden öne çıkanlar sıralanmıştır:

color, renkler için kullanılır.
email, e-posta için kullanılır.
range, fiyat aralığı vb. yazmak için kullanılır (min, max, step ve value parametreleri alır).
search, arama girdileri için kullanılır.
number,sadece sayısal veri girişleri için kullanılır.
tel, telefon yazmak için kullanılır.
time, saat için kullanılır.
url, url girebilmek için kullanılır.
date, doğum günü, yıl dönümü vb. için kullanılır.
datetime, date tipine ek olarak saati de kapsayacak şekilde kullanılır.
month, ay bilgisini yazmak için kullanılır.
week, hafta bilgisini yazmak için kullanılır.

HTML5 ile Yeni Form Özellikleri

HTML5 ile form elemanlarına yeni özellikler kazandırılmıştır. Özellikle input etiketiyle beraber kullanılan bu özellikler, formların kullanışlılığını artırmıştır. Aşağıda yeni eklenen özellikler verilmektedir:

autocomplete, otomatik tamamlama özelliği için kullanılır.
validate/novalidate, formun doğrulama yapılması/yapılmaması gereken durumlarda kullanılır.
autofocus, sayfa yüklendiğinde otomatik olarak focus/odaklanma özelliği alır.
form, veri girişini, sayfanın başka bir yerinde ki form'a dâhil etmek için kullanılır.
formaction, form'a birden fazla action özelliği kazandırmak için kullanılır.
formmethod, form'a birden fazla method özelliği kazandırmak için kullanılır.
formnovalidate, form elemanları kontrol edilmeden gönderimi için kullanılır.
formtarget, form verileri gönderildikten sonra nerede görüntüleneceğini gösteren bir isim ya da anahtar sözcük belirlemek için kullanılır.
min ve max özellikleri number, range, date, datetime, datetime-local, month, time ve week gibi girdilerin en küçük ve en büyük değerlerini belirlemek için kullanılır.
multiple, e-posta ve dosya seçimi gibi form elemanlarına birden fazla değer girilmesini sağlamak için kullanılır.
pattern, text, search, url, tel, email, ve password gibi veri girişlerinin kontrollü yapılması sağlanabilmek için kullanılır.
placeholder, bir giriş alanına beklenen değerini açıklayan kısa bilgi verilebilmek için kullanılır.
required özelliği, form gönderilmeden önce istenen girdilerin doldurulmasını zorunlu kılmak için kullanılır.
step, geçerli sayı aralığında veri girişi yapılmasını sağlamak için kullanılır.
readonly, sadece okuma izin vermek için kullanılır.

Sonuç

Bu bölümde HTML5'in yeni giriş (input) elemanları anlatılmıştır. HTML5 ile beraber çok sayıda yeni veri giriş tipi ve form elemanları dâhil olmuştur. Böylelikle etkileşimli formlar hazırlanabilmektedir.