Merhaba. HTML5'in getirdiği yeni özelliklerden biri olan yeni nesil input tiplerindan bahsetmek istiyorum. Bu tiplerin bize sağladığı faydalardan birisi daha sağlıklı input doğrulaması yapılabilmesi:

Yukarıdaki resimden de anlaşılacağı gibi kullanıcı mail adresini doğru formatta girmediği zaman tarayıcımız mail adresi bilgisinin doğru formatta girilmediği uyarısını veriyor.

İkinci faydası ise sanal klavye kullanan cihazlarda (mobil cihazlar ve tabletler gibi dokunmatik ekranlı aygıtlar) kullanılacak veri tipine göre klavyenin şekillenmesi. Mesela cep telefonunuzdan mail adresi bilgisi girilecek bir input'a tıkladığınız zaman mail adresinizi daha kolay girebileceğiniz özelleştirilmiş klavye ekranı açılır.

Bu tipleri web sitemizde kullandığımız zaman siteyi ziyaret eden mobil kullanıcılar daha iyi bir mobil deneyim yaşayacaktır.

HTML5 input tiplerini kullanmanın faydalarından bahsettik.Şimdi de bu tiplerin neler olduğunu ve nasıl kullanılacağını görelim.

• color (Renk girişi için)
• date (Tarih girişi için)
• datetime (Saat ile birlikte tarih girişi için)
• datetime-local (datetime tipine ek olarak zaman dilimi tanımlar)
• email (e-posta girişi için)
• month (Ay bilgisi girişi için)
• number (Sadece rakam girişi için. min, max, step ve value öznitelikleri tanımlanabilir.)
• range (Belli bir aralıktaki sayı girişi için. min, max, step ve value öznitelikleri tanımlanabilir.)
• search (Arama inputları için. Sadece css özelliğini değiştirir.)
• tel (Teleon numarası girişi için)
• time (Saat girişi için)
• url (Url girişi için)
• week (Hafta bilgisi girişi için)

Kullanımları ise:

color

<input type="color" name="Renk" />

date

<input type="date" name="dogumgunu" />

şeklindedir. MVC 3 Razor syntax'ta ise:

@Html.TextBoxFor(model => model.fiyat, new { type = "number" })

şeklindedir. Tabi bu input tiplerinin çalışabilmesi için kullanılan tarayıcının HTML5 desteği sunan modern bir tarayıcı olması gereklidir. Hepinize kolay gelsin. İyi çalışmalar.