HTML5'deki Yeni Input Type'lar

0 dakikada yazıldı

54511 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.