HTML5 Form Elemanları Nelerdir Nasıl Kullanılır?

HTML5 Form Elemanları Nelerdir Nasıl Kullanılır?

HTML5 Bundan sonra web sitelerinde olmazsa olmaz bir yere sahip. Çünkü teknoloji geliştikçe bizim de kendimizi yenilememiz için zorluyor. Bu da biraz kapitalizmin getirisi olsa da iyi bir şey olarak çıkıyor karşımıza. HTML5’i zaman zaman inceleyerek tamamlamayı umut ediyorum.

HTML5 ile gelen form elemanlarına baktığımızda, geçmişte javascript ile yaptığımız çoğu şeyi HTML5 kendi içerisinde halletmiş bile. Form elemanları olan İnput, textarea, select, butonlar ile ilgili yeniliklerden bahsedelim ve HTML5 özelliklerine göz atalım.

HTML INPUT Form Elemanı -  <input>

Form elemanları arasında en gözdesi de <input> etiketidir. Bu etiket, yazı, şifre, e-mail, telefon gibi bilgileri girdiğimiz ve kullanıcıya gönderdiğimiz ya da veri tabanına kaydettiğimiz kısım. Hani mail gönderiyorsunuz ya işte o maildeki gönderen, gizli sekmelerinin olduğu kutucuklar, onlar birer input. İnput etiketlerinin görevi içerisine eklenilen type=”” özelliği ile belirleniyor. Mesela:

<input type=”text”  />

Dediğimizde bu kısma yazı yazabileceğimiz gösteriyor

 <input type=”pasword”  />

Dediğimizde ise bu kısım şifre alanı oluyor ve buraya yazdığınız şifre yıldız şeklinde yani görünmez çkıkıyor.

HTML Select Form Elemanı -  < select >

Select form elemanları açılır form menü yapmamız için kullanılır. Mesela bir siteye kayıt olurken yaşadığınız il diyip tıkladığınızda aşağıda doğru açılan il listesinin olduğu kısım <select> form elemanıdır.

Select form elemanının şu şekilde kullanımı vardır

<select name="Hayvanlar">

  <option value="aslan">Aslan</option>

  <option value="maymun">Maymun</option>

  <option value="kedi">Kedi</option>

  <option value="timsah">Timsah</option>

</select>

Select Etiketi sadece seçicidir, açılır kısmı oluşturan yukarıdaki örnekte görüldüğü gibi option etiketidir.

HTML Textarea Form Elemanı -  < textarea >

HTML Form elemanlarının ağır absi olan textarea duygu, görüş, düşünce, şikayet gibi uzun uzadıya eklediğimiz yazılarımızı form yardımı ile karşıya ulaştırmakta kullanılır.

Html Form Elamanı olan textarea etiketinin kullanımı aşağıdaki gibidir.

<textarea name="mesaj" rows="22" cols="41"></textarea>

Texarea form etiketi içerisinde bulunan rows özelliği ile satır genişliği yani form textarea alanının genişliği belirtilirken cols özelliği ile yüksekliği belirlenir. Ama artık bunlar pek kullanılmamakta olup CSS ile bu işlem daha pratik ve kullanışlı bir şekilde yapılabiliyor.

HTML Button Form Elemanı -  < button >

Form elemanlarından olan buton elemanı Mouse ile tıkladığımız ve tıklandığında formun gönderilmesini sağlayan düğmedir.

Kullanımı aşağıdaki gibidir.

<button type="button" name=”gonder”)">Gönder</button>

HTML5 form elemanları

Yazının başlarında da söylemiştim. HTML5 öyle radikal yenilikler ve değişiklikler gerçekleştirdi ki kendisinin bu günlere gelmesinde en büyük destekçisi olan javascriptin özelliklerini bile kendi bünyesinde kullanmaya başladı. Yeni gelen Form elemanları böyle bir kullanıma örnek değil ama HTML5’in nasıl bir yeniliğe imza attığını göstermek için iyi bir örnekti.

HTML5 İle Gelen Yeni Form Etiketleri: <datalist>, <keygen>, <output> dur bunları bir sonraki yazımızda detaylı bir şekilde inceleyeceğiz.