Raşit Apalak Kişisel Blog. Hmm!

HTML5 Form özellikleri

Bu yazıda HTML5 ile birlikte gelen yeni form özelliklerini anlatmaya çalışacağım. Web sitelerinde kullanılan formlarda form alanının dolu olup olmadığı, rakam gerektiren alanlara harf girilmemesi, email adreslerinin doğru yazılması ve input alanları için açıklama girilmesi gibi çeşitli kontroller sürekli olarak kullanılmakta ve önem arz etmekte. HTML5, genelde javascript ile yapılan bu kontrolleri form alanlarına kolayca eklenebilen attribute dediğimiz nitelik tanımlamalarıyla başarılı bir şekilde çözmeyi başarmış.

Aşağıda bu yeni özelliklerin detaylı bir şekilde incelemesi yer alıyor. Parantez içinde de hangi tarayıcılarda çalıştığını belirttim.

Zorunlu Alanlar (Chrome, Opera)
Oluşturduğunuz formda Ad Soyad, Adres gibi alanların doldurulmasını zorunlu kılmak için kullanılan bir özellik.

<input name=”adsoyad” type=”text” required>

Formda bu alanın gerekli olduğunu göstermek için de basit bir css tanımlaması ekliyoruz.

input:required {
border: 1px red solid;
}

Böylece form açıldığında input alanımız kırmızı bir çerçeveye sahip olacak ve bu alan doldurulmadan post işlemi gerçekleşmeyecek.

Placeholders (Chrome, Safari)
Placeholder özelliği input alanlar için bir açıklama girmenizi kolaylaştırır. Önceden kullanılan value özelliğinin görevini yapar. Ancak input alana tıkladığınızda açıklama kaybolur. Dışarı tıkladığınızda açıklama tekrar input alanda görülür. Bunu javascript teknikleri ile yapmak zorundaydık.

<input name="adsoyad" placeholder="Lütfen adınızı ve soyadınızı giriniz">

Autofocus (Chrome, Safari)
Bu özellik form açıldığında imlecin hangi alanda konumlandırılacağını belirtir.

<input name="arama" autofocus>

Email alanları (Chrome, Opera)
Email adresinin yanlış yazılması çoğu zaman form gönderme işlemlerinde sorun oluşturmaktadır. Bunu önlemek için yine javascript teknikleri ile email adresinin doğru olup olmadığını kontrol etmek zorundaydık. Bu özellik ile ek bir kod yazmadan bu kontrol gerçekleştirilebilir.

<input name="email" type="email">

Pattern attribute (Chrome, Opera)
Form gönderilmeden önce kontrol edilirken bazı alanlara istenmeyen harf ya da rakamların yazılmamasını isteriz. Çoğunlukla telefon bilgileri istenen alanlara rakamdan başka bir karakter yazılmadığını kontrol etmek gerekir. Rakam ya da belirli bir harf kombinasyonunu kontrol etmek için regex kodu dediğimiz kalıplarla bu alanlar kontrol edilir.

<input type="text" name="Telefon" pattern="^(05)[0-9][0-9][1-9]([0-9]){6}$" placeholder="Telefon" required>

Bu kalıp bir cep telefonu numarasının doğrulunu kontrol eder.

Tarih Seçiciler (Opera)
Bazı alanlarda takvimden tarih seçtirmek için css ve javascript ile oluşturulmuş takvim uygulamaları kullanılır. Bu özellik sayesinde ek bir koda ihtiyaç kalmıyor. Benim yaptığım testlerde en iyi sonucu Opera veriyor. Takvim uygulaması gerçekten çok şık. Özellik, Chomre’da da çalışıyor fakat biraz ilginç çalışıyor. Deneyip görün :)

<input name="gun" type="date">

Bunlar da kullanabileceğiniz diğer tarih ve zaman seçicileri.

<input type="date">
<input type="datetime">
<input type="month">
<input type="week">
<input type="time">

Kaynak : http://www.catswhocode.com/blog/enhance-your-web-forms-with-new-html5features