Html 5 ile formlarınız akıllanacak!

Evet arkadaşlar bugün ki konumuz yeni nesil tarayıcıların desteklediği HTML5 in formlardaki değişimleri üzerine olacaktır… Html özellikle CSS i güçlendirip javascript kodlarını biraz daha arka plana atmış görünüyor… Yapılan değişiklikler öyle ki neredeyse hiç bir javascript kodu kullanmayarak bir canlı web sayfası oluşturmaya imkan tanıyor gibi…

Gelelim html5 de form nesnelerinde ne gibi değişiklikler var…

Gelişmiş Form Kontrolleri ve yeni input çeşitleri…
Alışması belki biraz zor olacak ama artık html formlarınızda ki form kontrolleri tarayıcılar tarafından yapılabilecek… Nasıl mı?

Örneğin e-mail, link ve isim alacağımız bir yorum formumuz olsun…

<input type="name" name="isim" />
<input type="url" name="link" />
<input type="email" name="email" />
<textarea name="yorum"></textarea>

ilet type = “” özelliğine kalıp seçeneklerden işimize yarayanını seçerek formumuzun kontrollerini html 5 destekli tarayıcılara yaptırabileceğiz… Sadece bu kadar mı? hayır tabiki…

<input type="name" name="isim" required/>
<input type="url" name="link" />
<input type="email" name="email" />
<textarea name="yorum" required></textarea>

required etiketi ile de bu formlarda gerekli alanları işaretleyebileceğiz. Ve bu alanlar doldurulmadan form gönderimi yapılamayacak. (Tabiki alternatif kontroller de kullanılabilir.)

Html5 formlarda eklenen diğer bir özellik focus özelliği.
Aktif form alanlarınının belirginleşmesi için kullandığımız ve javascript ile desteklenen bu özellik html5 ile birlikte artık otomatikleşiyor
Eski kullanım;

<form action="" method="get">
 <p><label>Ara: <input name="arama" type="text" id="arama"></label></p>
 <script type="text/javascript">document.getElementById('arama').focus()</script>
</form>

Yeni Hali;

<form action="" method="get">
 <p><label>Ara: <input type="text" name="arama" autofocus></label></p>
</form>

Görebileceğiniz gibi sadece autofocus etiketi ile focus olayını halletmiş olacağız…

Html5 formlarda ki diğer bir özellik placeholder, yani alan etiketi;
Bu özellikte özellikle arama kutucuklarında üzerine tıkladığınızda kaybolan tanımlar bulunur. “Aranacak kelime giriniz, etiket giriniz, ID giriniz tarzında…” Bunu da javascript ile yapmak şu anda mümkün ancak html5 ile javascripte gerek kalmadan bu özelliği de kullanabilirsiniz…

Örnek kullanım:

<form>
  <input name="ara" placeholder="Aranacak Kelime">
  <input type="submit" value="Ara">
</form>

gördüğünüz gibi
placeholder=”Aranacak Kelime” ile bu işleminizi de kolaylıkla yapabileceksiniz…

Bu alandaki tüm kodların gösterildiği örnek sayfa için tıklayınız…
Yorumlarınızı esirgemeyiniz…

Dipnot: Bu betik sadece Html 5 destekli tarayıcılar (opera, chorome ve ff4 beta ) da çalışır.