İpucu


Yeni elementler
<canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.
<audio>:
Sayfaya ses oynatıcı bir modül ekler.
<video> :
Video oynatıcı bir modül ekler.
<progress> :
İşlem süreci göstergesi ekler.
<caption> :
Başlık olarak düşünülen metinleri düzenler.
<header> :
Sitenin başlık ve açıklama içeriğini alır.
<nav> :
Menüleri ve bir takım zaruri işlevleri içine alır.
<footer> :
Sitelerin en alt kısmını içine alır.
<section> :
Sitelerin ana içerik kısmını içine alır.
<aside> :
Ana içerikte ayrı yazılan kısımdır.
<article> :
Makale, deneme tarzı yazıları kapsar.
<embed> :
Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
<details> :
Detay bilgisi içerir.
<summary> :
Yazının başlığını belirler.
<time> :
Tarih, saat verilerini kapsar.
<mark> :
Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<figcaption> :
<figure> elementinin başlığını belirler.
<figure> :
Çeşitli medya içeriği gruplarını belirler.
<hgroup> :
Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir.
<datalist> :
Düzenlenebilir elementlere otomatik tamamlama özelliği verilmesini sağlar.

 

   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 :)
<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.
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.
 
<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.
    <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.
<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.