Şub 28

autocomplete (Otomatik Tamamlama)

Aldığı değerler “on” yada “off”‘dur. Otomatik tamamlama açıkken, yani “on” değerinde, kullanıcının önceden girdiği değerlere göre tarayıcı yazılanları otomatik tamamlamaya çalışır. Farkı sadece tanımlandığı veri giriş elemanının tamamlama özelliğini açar veya kapatır.

Şimdi ufak bir örnek yapalım.

İsim:
E-mail:

İsim:
E-mail:

autofocus (Otomatik Odak)

autofocus (otomatik odak) boolean bir değerdir. Sayfa yüklendiğinde tanımlandığı veri giriş elemanına odaklanmasını sağlar.

Şimdi ufak bir örnek yapalım.

İsim: 

İsim:

Yukarıdaki örnekteki kod parçası bir HTML sayfasında olduğunda, sayfa ilk yüklendiğinde imleç isim kutusunda yanıp sönmeye başlayacaktır ve klavyeden yazı yazmaya başladığımızda yazılanlar 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.

Şimdi ufak bir örnek yapalım.

Ad:
Soyad:
Ad:
Soyad:

Yukarıdaki örnekte soyad değişkeni <form> etiketinin dışında ama form özelliği sayesinde “form1″ içinde yer alıyor. “Gonder” 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 alacak ise formların “id” değeri o veri giriş elemanın form özelliğine virgülle ayrılarak yazılabilir.

Örneğin;

Soyad: 

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 bir 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.

Şimdi ufak bir örnek yapalım.

İsim:
Soyisim:

İsim:
Soyisim:

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 metot ile kodlanacağını belirtir.

Şimdi ufak bir örnek yapalım.

İsim:
Soyisim:

İsim:
Soyisim:

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

formmetod (Form Metodu)

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

Şimdi ufak bir örnek yapalım.

İsim:
Soyisim:

İsim:
Soyisim:

Yukarıdaki örnekte “Gonder” düğmesine tıklayınca form tanımlandığı gibi “get” metodu ile gönderilirken “Gonder2″ düğmesine tıklandığında ise “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.

Şimdi ufak bir örnek yapalım.

E-mail:

E-mail:

Yukarıdaki örnekte “Gonder” düğmesine basınca “email” değerinin e-posta formatında olduğu kontrol edilecektir. “Gonder2″ düğmesine tıklanıldığında ise herhangi bir kontrol yapılmadan form “gonder.php” sayfasına gönderilecektir.

formtarget (Form Hedefi)

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

Şimdi ufak bir örnek yapalım.

E-mail:

E-mail:

Yukarıdaki örnekte “Gonder” düğmesine tıklayınca aynı pencere içinde “gonder.php” sayfası gösterilir. “Gonder2″ düğmesine tıklayınca ise yeni bir pencere 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 belirlemeyi sağlar.

Şimdi ufak bir örnek yapalım.

E-mail:

E-mail:

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

list (Liste)

list özelliği önceden tanımlanmış datalist belirlemeyi sağlar. datalist içindeki değerler ile otomatik tamamlama yapılması sağlanır.

Datalist etiketini daha önceki makalemizde açıklamıştık. İncelemek için lütfen tıklayın.

min ve max

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

Şimdi ufak bir örnek yapalım.

2010-01-01'den önce bir tarih giriniz:


2010-01-01'den sonra bir tarih giriniz:


1 ile 5 arasında bir sayı giriniz:

2010-01-01′den önce bir tarih giriniz:

2010-01-01′den sonra bir tarih giriniz:

1 ile 5 arasında bir sayı giriniz:

Yukarıdaki örnekte gösterildiği gibi 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ğlar. file tipi için birden çok dosya seçilmesine, email için ise birden çok e-posta girilmesine imkan verir.

Şimdi ufak bir örnek yapalım.


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

pattern (Format)

pattern özelliği bir veri giriş elemanının belirli bir formata olan uyumluluğunu denetler. pattern bir rasyonel ifade (regular expressions) değeri alır.

Şimdi ufak bir örnek yapalım.

İsim:
İsim:

Yukarıdaki örnekte rasyonel ifade, girilecek değerin sadece büyük ve küçük harflerden ve en az iki karakterden oluşması gerektiğini söylüyor. İstenilenden farklı bir değer girdiğimizde form gönderilmiyor ve uyarı mesajı veriyor.

placeholder (Bilgi Alanı)

placeholder bir veri giriş elemanına nasıl bir değer girilmesi ile ilgili ipucu veren bir bilgidir. Kullanıcı veri girmeye başladığı anda kaybolur. text, search, url, tel, email ve password veri tiplerinde kullanılabilir.

Şimdi ufak bir örnek yapalım.

Kullanıcı adı: 

Kullanıcı adı:

required(Gerekli)

required boolean bir değerdir. Bir veri giriş elemanına eklendi ise o veri giriş elemanının doldurulması gerektiğini ifade eder. text, search, url, tel, email, password, number, checkbox, radio ve file veri tiplerinde kullanılabilir.

Şimdi ufak bir örnek yapalım.

İsim:
İsim:

Yukarıdaki örnekte isim yerine hiçbir değer girmeden formu göndermeye çalıştığımızda uyarı mesaj alırız.

step (Basamak)

step girilen bir değerin artış ve azalış basamaklarını gösterir. Yani number veri tipinde bu özelliğe 7 değerini verirsek o kutucuğa 7 ve katlarında sayı girebiliriz. number, range, date, datetime, datetime-local, month, time ve week veri tiplerinde kullanılabilir.

Şimdi ufak bir örnek yapalım.



7′nin katında olmayan bir sayı girip formu göndermeye çalıştığımızda uyarı mesajı alırız.

Kaynak: A.O.Mermerkaya, Html 5 Css 3, Abaküs Kitap Yayın Dağıtım Hizmetleri, İstanbul, 2015.

Yorum Yaz