HTML Web

HTML5 Form Nesneleri ve Kullanımı – 1

Merhaba,

Bu yazı ile itibaren, iki yazıyı kapsayacak şekilde form nesnelerini anlatmaya çalışacağım yazı dizisine başlıyorum.

Şimdiye dek HTML ile kullanılan form nesneleri (etiketleri) HTML5 ile geliştirilerek, kullanıcı açısından daha kullanışlı ve ihtiyaçları karşılayacak şekilde sürüm güncellemesi yapılmıştır.

Aşağıdaki görselde HTML5 ile kullanılabilen tüm form nesneleri listelenmiştir. Konumuza bu gösterimi yaparak devam edelim.

Not : Aşağıdaki görsellerde kırmızı kutu içerisine alınmış kısımlar,  HTML5 ile gelen özelliklerdir.

html5-form-nesneleri

 

1- Form kullanımı

HTML5’in sonraki aşamalarda bahsedilecek olan form elementlerini kullanabilmek için gerekli olan elementtir. Diğer bütün form ögeleri <form></form> etiketleri içerisinde tanımlanır.

– Bunun yanında formlarla ilgili bazı önemli hususlardan bahsetmek gerekir. HTML5 ile bir form tasarlandığında içerisinde kullanılacak olan etiketlerin kullanılması ve diğer form ve sayfalarla ilişkinin kurulabilmesi için action ve methot özelliklerini bilmemiz gerekmektedir.

action=”[Tetiklenen Form].[web dosya uzantısı]”  veya action=”AktifOlacakForm.html”  ve methot=”Veri Gönderme şekli”  veya methot=”get | post”  şeklinde bir kullanım vardır.

Şimdi bu özelliklerin kullanımını anlatalım. Oluşturulan form içerisinde “submit” butonu tıklandığında action içerisinde belirtilen sayfa aktif olur ve methot içerisinde seçmiş olduğumuz yöntem ile açılan sayfaya veri iletimini gerçekleştirmiş oluruz.  Ayrıca “action” olmasa dahi methot özelliği aktif olur.  Varsayılan yöntem “get” dir.  “get” ile form içindeki elementlerin verileri tarayıcıda,  adres çubuğunda görülür.  “post” ise verilerin görülmeden iletimini sağlar.

Örnek verecek olursak, bir login (giriş) ekranı ve giriş yapmak istediğimiz hesabım sayfası olduğunu düşünelim. Bura kullanıcı adı ve şifre girişi bekleyen textbox’lar ve giriş işlemini tetikleyecek olan gönder butonu bulunsun. Formun action’u hesabım sayfasını göstersin ve metot da ‘get’ olsun. Gönder butonuna tıkladığında şifre ve kullanıcı adı doğruysa hesabım sayfasına giriş yapmış olacağız ve metot get olduğu için şifre ve kullanıcı adımız adres çubuğunda ‘ab.com/hesabim.php?kullanıcıadı=avni&sifre=53’ gibi bir url uzantısı olur. Eğer metot ‘post’ ise böyle bir görünüm olmaz, fakat veri gönderimi yine de gerçekleştirilmiş olur.

Kullanım şekli:

 

2- Giriş (İnput) elementi/etiketi

Form oluşturulduktan sonra içerisine text, buton, şifre vb. tiplerinde input (giriş) elementleri oluşturulur. Bu input tipleri ile tasarımcının isteğine göre formlar tasarlanabilir. Şimdi input elementini ve en çok kullanılan önemli tiplerini inceleyelim.

 

a- İnput tipleri

html5-giriş-tipleri

 

b-İnput tiplerinin özellikleri

 

html5-özellik

 

c-Temel input tipleri

<input type=”text”> :

İnput(giriş) elementi text tipinde belirlenir. Yani klasik textbox kullanımı olarak ifade etsek yanlış olmaz. Örn; kullanıcı adı girişi için idealdir.

<input type=”password”> :

Şifre tipinde veri girişi için kullanılır. Textbox’a girilen ifadeler “*****” şeklinde gizlenerek gösterilir.

<input type=”radio”> :

Radio button tipinde, istenilen verileri seçmek için geliştirilen giriş yöntemidir.

<input type=”checkbox”> :

Checkbox tipinde, onay gerektiren durumlarda kullanılması için geliştirilen giriş yöntemidir.

<input type=”button”> :

Klasik buton oluşturur. Varsayılan olarak herhangi bir işlem yapmaz. Javascript vb. programlama dilleri ile birlikte işlevsel hale gelir.

<input type=”submit”> :

Form içerisindeki elementlere girilen verileri, gönderme işlemini yapar. action ile açılacak yeni sayfaya veya mevcut sayfanın kendisine, get veya post metoduna göre değişecek şekilde veri gönderme işlevini gerçekleştirir. methot=”get” kullanılmışsa action durumunda göre sayfanın adres çubuğundaki url’nin sonunda, methot=”post” kullanılmışsa sayfanın arka planında veriler saklanır.

<input type=”reset”> :

Buton tipinde bir nesne oluşturur. Form içerisindeki elementlere veriler girilmiş halde iken reset’e tıklandığında görünen tüm verileri temizler ve elementleri ilk haline getirir.

Kullanım şekli:

 

Kod çıktısı:

html5-input-type1

 

d – HTML5 ile gelen input tipleri

<input type=”color”> :

Renk çeşitlerini tasarımcıya sunan ve seçimini sağlayan giriş tipidir. value=”#RenkKodu” içerisinde istediğimiz rengin hexadecimal kodunu girerek tarayıcıdaki rengi belirleyebilirsiniz. Kod çalıştıktan sonra tarayıcıya gelen renk üzerine tıklandığında, seçmek üzere renk tablosu açılır. Inernet Explorer ve Safari dışındaki tarayıcılar desteklemektedir.

<input type=”date”> :

Tarayıcıda tarih gösterimini sağlayan tipdir.  gg.aa.yyyy varsayılan formatında görünür.  Elemente tıklandığında bir takvim çıkar ve istenilen tarihin seçilmesini mümkün kılar.  max(gg.aa.yyyy) ve min(gg.aa.yyyy) özellikleri ile alt ve üst sınır tarihi belirlenebilir.  İnternet Explorer ve Mozilla Firefox dışındaki tarayıcılar tarafından desteklenmetedir.

<input type=”email”> :

Sadece e-mail girişi yapabilmek için kullanılır. Email formatı dışındaki girişlerde, düzgün veri girişi yapılması gerektiği yönünde uyarı vermektedir. Safari dışındaki tüm tarayıcılar desteklemektedir.

<input type=”number”> :

Sadece sayı girişi yapabilmek için kullanılır. Sayı dışındaki girişlerde, düzgün veri girişi yapılması gerektiği yönünde uyarı vermektedir. Safari dışındaki tüm tarayıcılar desteklemektedir.

<input type=”range”> :

Bir aralık belirtmemiz gerektiğinde, bu giriş tipini kullanmamız gerekmektedir. Dizi şeklinde veri gösterimi yapar. min=”başlangıç değer” ve max=”son değer” ile aralık belirlemesi yapılır. Tüm tarayıcılar tarafından desteklenmektedir.

<input type=”search”> :

Arama yapmamızı sağlayan giriş tipidir. Aktif olacak form içerisinde, girilecek olan veri aranır. Sadece Google Chrome ve Safari tarafından desteklenmektedir.

<input type=”time”> :

Tarayıcıda saat gösterimini sağlayan tipdir.  hh.mm varsayılan formatında görünür. Element üzerinde saat belirlemesi yapılması mümkündür. İnternet Explorer ve Mozilla Firefox dışındaki tarayıcılar tarafından desteklenmetedir.

Kullanım şekli:

 

Kod çıktısı:

html5-ileri-input

 

 

Şimdilik HTML5 ile form kullanımı yazısının sonuna gelmiş bulunmaktayız. Konu ile ilgili 2.yazı da düzenlenecektir.

Bir sonraki yazıda görüşmek üzere.
Selamet ile.


HTML 5 Müfredatı

  1. HTML5 Nedir ?
  2. HTM5 – Temel Etiketler ve Özel Karakterler
  3. Metin Biçimlendirme(Text Formatting)
  4. Bağlantı (Link) Yapısı
  5. Tablo (Table) Kullanımı
  6. Liste(Lists) Kullanımı
  7. Form Nesneleri ve Kullanımı ~ 1
  8. Form Nesneleri ve Kullanımı ~ 2
  9. Audio Kullanımı
  10. Video Kullanımı
Rize/Ardeşen doğumlu.
Karadeniz Teknik Üniversitesi, İstatistik ve Bilgisayar Bilimleri mezunu.

.NET teknolojileri alanında ihtisas yapma amacında.
İstatistik ve nevi ilimleri sevmekte, fırsat bulduğunda üzerine çalışmayı amaçlamakta.

Özel bir şirkette web ve yazılım geliştirici olarak çalışmaktadır.