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
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

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.

Bir cevap yazın

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