HTML5 ile beraber gelen yenilikler arasında en pratiklerinden bir tanesi
input type sayısının günümüz ihtiyaçlarına göre arttırılıyor olması. email, url, number, range,
date picker, search
ve color adlarında yeni input typelarımıza hoş geldiniz diyebilirsiniz :)
[HTML]
<input name="TextBox1" type="email" id="TextBox1" />
Yukarıda gördüğünüz input kontrolünün tipi aynen tahmin edeceğiniz üzere bu
kontrolün içerisine bir e-mail adresi yazılacağını belirtiyor. Bu şekilde
yapılan bir ayarlama bizi doğrudan istemci taraflı validasyon kodu yazmaktan da
kurtarıyor ve tarayıcı kendisi bu gibi validasyonları çözebiliyor.
HTML5 E-Mail Adresi Kontrolü
Eğer isterseniz gösterilecek olan uyarı yazısını ve hatta özel durumlarda
validasyon için kullanılacak RegEx Pattern'i de ayrıca belirleyebilirsiniz.
[HTML]
<input type="tel" name="tel"
pattern="\(\d\d\d\) \d\d\d\\d\d\d\d"
title="Telefon numarasını (212) 2223344
şeklinde yazınız." />
Yukarıdaki kod içerisinde hem pattern hem title
özellikleri gerekli özelleştirmemeleri yapabilmemizi sağlıyor. Gelin hızlıca
birkaç örneğin daha kodunu inceleyelim.
[HTML]
<label>
Enter your first name:
<input name="firstname" type="text" required>
</label>
<input type="url" name="url" />
<input type="email" name="email" />
<input type="number" min="0" max="10" step="2" />
Kodumuzdaki yeniliklerden biri "required" attribute'ü. Bu
attribute sayesinde bir hücrenin kesinlikle doldurulup doldurulmaması
gerektiğine dair bilgiyi verebiliyorsunuz. Input Type Number
olan kontrol ise sıfır ile on arasında ikinin katlarından biri olarak bir sayı
istenmesini sağlıyor.
Eğer bu kontrollerle ilgili invalid durumundaki görselliği değiştirmek
isterseniz aşağıdaki gibi bir CSS kodu yazmak mümkün.
[CSS]
<style type="text/css">
input:invalid
{
border: solid red;
font-weight: bold;
}
</style>
Tüm bunlarla ilgili ASP.NET 4.5 ile beraber gerekli düzenlemeleri ASP.NET
tarafında da göreceğiz.
ASP.NET 4.5'ten yeni HTML5 Input Type'lara destek
Ekran görüntüsünden de görebileceğiniz üzere ASP.NET'teki basit bir
Textbox'ın artık çok daha fazla TextMode'u var. Tüm bu TextMode'lar HTML5'teki
yeni Input Type'lara denk geliyor ve uygun HTML5 kodunun yaratılmasını sağlıyor.
Gelecek çok güzel olacak :) Hepinize kolay gelsin.