HTML5'deki Yeni Input Type'lar

0 dakikada yazıldı

54367 defa okundu

Düzenle

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ü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\         {\             bordersolid red;\             font-weightbold;\         }\     \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.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.