HTML Dersleri 14 Yeni Veri Giriş (Input) Tipleri ve Form Özellikleri

Bir önceki konuda HTML 5 ile gelen yeni etiketlerden bahsettik. Bu dersimizde de yeni veri giriş tiplerini ve yeni gelen form özelliklerini inceleyeceğiz.

Yeni Veri Giriş (Input) Tipleri ve Form Özellikleri

HTML 5′ den önceki versiyonlarda veri giriş (input) tipi olarak “text”, “button”, “submit” vb. birkaç veri tipi akla geliyor. HTML 5′ de ise web programlamada ihtiyacımız olan renk, tarih, zaman vb. bir çok veri tipi bulunmaktadır. Yeni gelen veri tiplerini aşağıdaki listede görebilirsiniz.

  • color (renk)
  • datepickers (tarih, zaman, yerel tarih ve zaman)
  • e-mail (e-posta)
  • number (sayı)
  • range (aralık)
  • search (arama)
  • tel (telefon)
  • time (zaman)
  • url

color (renk) 

Renk seçimi yapabilmek için kullanılır. Hexadecimal olarak renk kodunu yazdırmak mümkün olduğu gibi görsel olarak da seçim yaptırılabilir. Örnekle ve ekran görüntüsüyle nasıl kullanıldığını  aşağıdaki örnekte görebilirsiniz.

Ekran görüntüsü aşağıdaki gibidir:

Yukarıdaki örnekte  renk seçimi düğmesine tıklayınca, şekildeki renk seçmemizi sağlayan pencere ortaya çıkıyor. İstediğimiz rengi seçip formu gönderdiğimizde reengin 16′ lık basamaktaki renk kodu (#RRGGBB”) sunucuya “renk” adındaki değişken ile gönderilecektir.

date pickers (tarih, ay, hafta, zaman, zaman ve tarih, yerel tarih ve zaman) 

HTML 5’ de zaman ve tarih girişleri konusunda da yenilikler mevcuttur. Date yıl/ay/gün, month yıl/ay, week yıl/hafta, time saat/dakika, datetime local saat ve tarih girilecek form alanı, datetime ile de UTC standartlarında saat ve tarih şeklinde görsel olarak form elemanları oluşturulur.

Şimdi bu elementleri ayrı ayrı kullanımları ile beraber görelim.

date (tarih)

Ekran görünümü aşağıdaki gibidir:

Örnekte görüldüğü gibi tarih seçmek artık daha kolay. Bu veri tipinin bulunduğu form sunucuya gönderilirse “tarih” değişkeninin değeri seçtiğimiz tarih olacaktır.

month (ay)

Şimdi de çıktımıza bakalım…

Yukarıdaki örneğimizle görünümü aynı aynı denemeyi sizde yaparsanız aradaki farkı hemen farkedeceksiniz.

week (hafta)

Şimdi de çıktımıza bakalım…

 

datetime-local (yerel tarih ve zaman)

Şimdi de çıktımıza bakalım…

e-mail (e-posta) 

HTML5’ de e-posta girmek amacıyla kullanılır ve girdinin geçerli olup olmadığını yani e-posta formatında olup olmadığını denetler.

Örnek kullanımı aşağıdaki gibidir.

Ekran çıktısı şu şekildedir.

Tipi e-mail olan veri giriş elemanına e-posta formatı dışında bir değer yazıp form gönderilmeye çalışıldığında görseldeki gibi uyarı çıkmaktadır.

number (sayı) 

Form giriş alanına sayısal değerler girmek için kullanılmaktadır.

Kullanımda max ve min. ve value nitelikleri ile girilebilecek en düşük ve en yüksek sayısal değerler belirlenebilir ve kısıtlama yapılabilir.

Örnek kullanımı aşağıdaki gibidir.

Ekran çıktısı şu şekildedir.

Yukarıdaki örnekte sayı değeri olarak 1 ile 10 arasında bir değer girilebilir. Varsayılan değer 3′ tür.

range (aralık) 

Belirli bir aralıktaki sayıları grafiksel olarak seçmemizi sağlayan veri tipidir. number  tipinde olduğu gibi min, max ve value özellikleri vardır.

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

Ekran çıktısı aşağıdaki gibidir.

Yukarıdaki örnekte 1 ile 10 arasındaki bir sayıyı seçmemizi sağlayan veri tipini görüyoruz.

search (arama) 

Yazı alanında arama yapabileceğimiz bir arama kutusu oluşturur.

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

Ekran görüntüsü aşağıdaki gibidir.

tel (telefon) 

İlgili alana telefon numarası girilmesi için kullanılır. İstenirse input özelliği ile pattern niteliği de kullanılarak bir format oluşturulabilir.

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

Ekran görüntüsü aşağıdaki gibidir.

time (zaman)

Saat seçmemizi sağlayan veri tipidir.

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

Ekran çıktısı aşağıdaki gibidir.

url (link)

Form giriş alanına sadece bir URL adresi girilmesini sağlamak içindir ve girdinin geçerlilik sınaması da yapılır. İstenirse input özelliği ile pattern niteliği de kullanılarak bir format oluşturulabilir.

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

Ekran çıktısı aşağıdaki gibidir.

Şimdiye kadar HTML 5 ile yeni eklenen ve kullanılan veri tiplerini gördük. Şimdi ise veri girişi ile ilgili gelen yeni özelliklere bakalım.

Yeni Veri Giriş (Input) Özellikleri

Bu kısımda formlara veri giriş (input) elemanlarına eklenen yeni özellikleri inceleyeceğiz. Form ve veri giriş özelliklerini aşağıdaki listede görebilirsiniz.

FORM ÖZELLİKLERİ

  • autocomplete (Otomatik tamamlama)
  • novalidate (Geçerlilik kapalı)

VERİ GİRİŞ ÖZELLİKLERİ

  • autofocus (Otomatik odak)
  • form (Form)
  • formaction (Form eylemi)
  • formenctype (Form kodlama tipi)
  • formmethod (Form metodu)
  • formnovalidate (Form geçerlilik kapalı)
  • formtarget (Form hedefi)
  • height and weight (Yükseklik ve genişlik)
  • list (Liste)
  • min and max (En az ve en çok)
  • multiple (Birçok)
  • pattern (Model)
  • placeholder (Bilgi alanı)
  • required (Gerekli)
  • step (Basamak)

Form Özellikleri

autocomplete (otomatik tamamlama)

Form alanlarında veri girişi yaparken otomatik tamamlama yapabilirsiniz. Aldığı değerler “on” ve “off”‘ dur.  Autocomplete açık olduğunda, tarayıcı otomatik olarak kullanıcı tarafından önceden girilen bilgileri tamamlar. Bu nitelik sadece text, search, url, tel, e-mail, data pickers (date, month, week, time, datetime-local), number, range ve color değerleri ile input-type olarak tanımlanırsa kullanılabilir.

Bir örnek yapalım.

Formu doldurup gönderin, sonra sayfayı yeniden yükleyerek otomatik olarak tamamlandığını görün. autocomplete özelliğinin isim ve soyisim için “on”, e-mail için “off” olduğuna dikkat edin.

Bu örneği denemek için gerekli kutucukları dolduralım ve gönderelim. Gönderdiğimizde “form.php” dosyası bulunamadığından hata verecektir. Gönderdiğimizi varsayıp sayfayı yenileyelim. Sayfayı yeniledikten sonra ilgili yerlere yine aynı girişleri yapmaya başladığımızda aşağıdaki gibi otomatik tamamlanacaktır.

E-mail kısmında “autocomplete” için “off” değeri verildiği için hatırlamayacaktır.

novalidate (geçerlilik kapalı)

novalidate  bir boolean değerdir. Form özelliği olarak tanımlandığında form içindeki veri giriş elemanlarının değerlerinin veri tipleri ile uyumlu olduğunun kontrol edilip edilmeyeceğini belirler. Yani bir e-mail tipinde bir veri giriş elemanının olduğunu düşünelim. Eğer novalidate aktif ise elemanın değerinin email formatına uyumlu olup olmadığı kontrol edilmeyecektir.

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

Yukarıdaki örnekte novalidate olduğu için email değerinin e-posta formatına uyumlu olup olmadığı kontrol edilmeyecektir. novalidate herhangi bir değer almadığı için bu özelliği kullanmak istemiyorsak yazmamamız yeterlidir.

Veri Giriş Özellikleri

autofocus (otomatik odak)

autofocus bir boolean değerdir. Sayfa yüklendiğinde tanımlandığı veri giriş elemanına odaklanılmasını sağlar.

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

Çıktısı şu şekildedir:

Yukarıdaki örnekteki kod parçasının olduğu HTML sayfası ilk yüklendiğinde, imleç isim kutusunda yanıp sönmeye başlayacaktır ve klavyeden yazı yazmaya başladığınızda direk isim kutusuna yazılacaktır. 

form

form  özelliği <form> etiketleri dışında bir veri giriş elemanının o forma dahil olduğunu belirtmeyi sağlar. Form gönderildiği zamanda o forma dahil tüm veri giriş elemanlarının değeri gönderilir.

Örnek kullanımı aşağıdaki gibidir:

Yukarıdaki örnekte soyad değişkeni <form> etiketlerinin dışında ama form özelliği sayesinde “form1” içinde yer alıyor ve gönder düğmesine tıklandığında form.php sayfasına soyad değişkeni de gönderilecektir. Bir değişken eğer birden çok formun içinde yer alacaksa formların “id” değeri o veri giriş elemanının form özelliğine virgülle ayrılarak yazabiliriz.

formaction (form eylemi)

formaction submit ve image tiplerinde kullanılır. Tıklandığında formun hangi sayfaya gönderileceğini belirtir. Bu özelliğin şöyle bir avantajı vardır. Mesela bir form tanımladık ve onu action özelliğinde tanımlanan sayfaya gönderiyoruz. Form içinde başka bir düğmeye tıkladığımız zaman ise o formun başka bir sayfaya gitmesini istiyoruz. formaction  özelliğini işte bunun için kullanabiliriz.

Örnek kullanımı aşağıdaki gibidir.

Kodlarımıza ait çıktı aşağıdaki gibidir:

Yukarıdaki örnekte “Gönder” düğmesine tıklayınca form “gonder.php” dosyasına gönderilecektir. “Kaydet” düğmesine tıklayınca “kaydet.php” dosyasına gönderilecektir.

formenctype (form kodlama tipi)

formenctype submit ve image tiplerinde kullanılır.Formun içeriğinin hangi method ile kodlanacağını belirtir.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

Örnekte “Gönder” düğmesine tıklayınca form varsayılan “application/x-www-form-urlencoded” ile kodlanıp gönderilirken “Gönder2” düğmesine tıklayınca “multipart/form-data” ile kodlanıp gönderilecektir.

formmethod (form metodu)

“formmethod” submit ve image tiplerinde kullanılır. Formun gönderilme metodunu (post veya get) belirler. Bu özellik sayesinde bir düğme formun gönderilme metodunu değiştirebilir.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

Yukarıdaki örnekte “Gönder” düğmesine tıklayınca form varsayılan olarak “get” metodu ile gönderilirken “Gönder2” düğmesine tıklayınca “post” metodu ile gönderilecektir.

formnovalidate (form geçerlilik kapalı)

formnovalidate submit tipinde kullanılır. Formun içindeki verilerin, tipleri ile uyumluluğu kontrol edilmeden gönderilir.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

Yukarıdaki örnekte “Gönder” düğmesine tıklayınca “email” değerinin e-posta formatına uygun olup olmadığı kontrol edilecektir. Yalnız “Gönder2” düğmesine tıklandığında herhangi bir kontrol yapılmadan form.php dosyasına gönderilecektir.

 formtarget (form hedefi)

formtarget submit ve image tipinde kullanılır. Formun sonucunun nerede gösterileceğini (yeni pencere veye aynı pencere) belirler. Form içinde tanımlanan target  özelliği bu düğme kullanılırsa etkisiz olur.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

Yukarıdaki örnekte “Gönder” düğmesine tıklayınca aynı pencere içinde “gonder.php” sayfası gösterilir.  “Gönder2” düğmesine tıklayınca ise yeni bir sayfa açılır ve gonder.php sayfası orada gösterilir.

 height ve width (yükseklik ve genişlik)

height ve width image tipinde kullanılır. height görselin yüksekliğini, width ise görselin genişliğini belirler.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

Yukarıdaki örnekte image tipindeki veri giriş elemanının genişliği ve yüksekliği 150 ve 75px olarak belirlenmiştir. İstediğimiz gibi görselin yüksekliğini ve genişliğini ayarlayabiliriz.

 list (liste)

Hazırlanan veri giriş alanları için seçenek listesi oluşturmak içindir. Form dolduran kişi veri giriş alanında isterse; bu seçeneklerden bir tanesini tercih eder; isterse de kendisi bir veri girişi yapabilir. Bu nitelik sadece text, search, url, tel, e-mail, data pickers (date, month, week, time, datetime-local), number, range ve color değerleri ile input-type olarak tanımlanırsa kullanılabilir. List özelliği, bir <input> elemanı için önceden tanımlanmış seçenekler içeren bir <datalist> element anlamına gelir.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

Yazı alanına benzer bir şeyler yazınca tamamlama özelliğinde olduğu gibi “tarayıcılar” listesindeki benzer sonuçlar geliyor. Aynı zamanda listeden seçim seçeneği de sağlıyor.

 min ve max (en az ve en çok)

min ve max özelliği tanımlandığı veri giriş elemanının alabileceği en küçük ve en büyük değerleri belirler. number, range, date, datetime, datetime-local, month, time and week veri tipleri için kullanılır.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

Yukarıdaki örnekte görüldüğü üzere girilecek değerler sınırlanıyor ve bu sınırlamanın dışında bir değer girilmesine izin verilmemektedir.

 multiple (bir çok)

multiple email ve file tiplerinde kullanılan boolean bir değerdir. Eklendiği veri tipine birden fazla değer girilmesini sağlamaktadır. file tipi için birden çok dosya seçilmesini, email için ise birden çok e-posta girilmesini sağlar.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

Yukarıdaki örnekte birden fazla dosya seçip bir form içinde sunucuya gönderilebilir.

 pattern (format)

Formdaki bir veri giriş alanına sadece bizim istediğimiz formatta veri girilebilmesini istediğimiz alanlarda kullanırız. . Bu nitelik sadece text, search, url, tel, e-mail ve password değerleri ile input-type olarak tanımlanırsa kullanılabilir.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

Belirlediğimiz 05xx-xxx-xx-xx formatının sağlanabilmesi için [0-9]{4}-[0-9]{3}-[0-9]{2}-[0-9]{2} yapısını kullandık. Bunun anlamı, 0-9 aralığında dört rakam, araya – (tire) işareti, sonra üç, sonra da iki kez iki rakamlı yapı şeklindedir.

 placeholder (bilgi alanı)

Kullanıcılara formdaki ilgili alana ne tip veri girmelerini istediğimizi anlatan bir ipucu vermek için kullanılır. Kullanıcı veri girmeye başladığı anda yazan ipucu kaybolur. Bu nitelik sadece text, search, url, tel, e-mail ve password değerleri ile input-type olarak tanımlanırsa kullanılabilir.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

 

Örnekte görüldüğü gibi sadece rakam girmemizi belirten bir ipucu belirtiyor.

 required (gerekli)

Kullanıcı tarafından doldurulması zorunlu alanlar ya da seçimler oluşturmak için kullanılır. Eğer ilgili seçim yapılmaz ya da alan boş bırakılırsa, bir uyarı mesajı görüntülenir ve form bilgileri gönderilmez. Bu nitelik sadece text, search, url, tel, e-mail, data pickers (date, month, week, time, datetime-local), number, radio, checkbox ve file değerleri ile input-type olarak tanımlanırsa kullanılabilir.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

 step (basamak)

step  girilen bir değerin artış veya azalış basamaklarını gösterir. Yani number veri tipinde bu özelliğe 7 değerini verdi isek o kutucuğa 7 ve katlarında sayı girebiliriz. Bu nitelik sadece number, range, date, datetime, datetime-local, month, time and week veri tipleri için kullanılır.

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü aşağıdaki gibidir:

7′ nin katında olmayan bir sayı girip formu göndermeye çalıştığımızda görseldeki gibi uyarı alıyoruz.

Form Etiketleri

Bu bölümde formların içerisinde kullanılan yeni etiketleri inceleyeceğiz. Aşağıda yeni form etiketleri listelenmiştir.

  • <datalist>
  • <keygen>
  • <output>

 <datalist>

Bir input etiketinde önceden tanımlanmış seçenekleri belirlemek için kullanılır. Kullanıcı veri girişelemanına metin yazarken açılan liste içerisinde benzer elemanlar gözükecektir. Kullanıcı da istediği seçeneği kolayca tıklayabilecektir.

Örnek kullanımı şu şekildedir:

Ekran görüntüsü şu şekildedir:

 

Yukarıdaki örnekte input etiketinin oluşturduğu yazı alanına yazınca datalist içindeki s ile başlayan sonuçlar listeleniyor.

 <keygen>

keygen etiketi kullanıcılara güvenli yetkilendirme olanağı sağlar. açık (public) ve kapalı (private) anahtar oluşturup açık anahtarı sunucuya gönderir ve kapalı anahtarı ise kendi içinde kaydeder. Açık anahtar ilerde sertifika oluşturup kullanıcıyı yetkilendirmek için kullanılabilir. 

Örnek kullanımı şöyledir:

Bu formun içerisinde örnekteki gibi bir keygen etiketi yer alabilir ve form gönderildiğinde sunucuda “anahtar” diye bir değişken olacaktır. keytype özelliği ile farklı anahtar türleri de (rsa, dsa) belirlenebilir.

 <output>

output etiketi JavaScript gibi hesaplama işlemlerinin sonucunu ekranda göstermeyi sağlar. 

Örnek kullanımı aşağıdaki gibidir:

Ekran görüntüsü şu şekildedir:

Bu dersimizde HTML 5 ile formlara gelen yeni veri giriş tiplerini ve özelliklerini örneklerle anlatmaya çalıştım. Bir sonraki dersimizde HTML 5 ile gelen media elementlerini tanıyacağız. Umarım faydalı ve yararlı bir eğitim olmuştur.

About egitimkanalim.com

Check Also

HTML Dersleri 15 HTML 5 Media Etiketleri

YENİ ETİKETLER VE ANLAMSAL WEB HTML 5 ile gelen ActiveX, Flash Player, Quicktime gibi web …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir