Top

ozellikleri Tag

  • All
  • Dijital medya
  • Dijital reklam
  • Dijital strateji
  • Eğitim
  • Growth hacking
  • Haber
  • İnceleme
  • Kişisel
  • Kurumsal
  • Markalar
  • Medya
  • Rehber
  • Teknoloji

Genel Olay Özellikleri

HTML 4; tarayıcıda, olaylara tetikleme izni vermiştir, tıpkı bir elemente tıklayınca çalışan Javascript gibi.

Javascript ve nesneye yönelik HTML de anlatacaklarım listesinde.

Aşağıdaki genel olay özellikler HTML5 içerisinde olayların etkileşimde bulunmasını sağlamakta.

Yeni : HTML5’teki yeni olay özellikleri.


Window(pencere) Olay Özellikleri

Window nesnesi için olay tetikleyicileri.

<body> tag’ına uygulanırlar:

Özellik Değer Tanım
onafterprint  Yeni script Belge basıldıktan sonra çalışır
onbeforeprint  Yeni script Belge basılmadan önce çalışır
onbeforeonload  Yeni script Belge yüklenmeden önce çalışır
onblur script Pencere odaklanmasını kaybedince çalışır
onerror   Yeni script Bir hata gerçekleştiğinde çalışır
onfocus script Pencereye odaklandığında çalışır
onhaschange  Yeni script Belge değiştirildiğinde çalışır
onload script Belge yüklendiğinde
onmessage  Yeni script Mesaj tetiklendiğinde
onoffline  Yeni script Belge çevrimdışı olduğunda
ononline  Yeni script Belge çevrimiçi olduğunda
onpagehide  Yeni script Pencere gizli olduğunda
onpageshow Yeni script Pencere görünür olduğunda
onpopstate  Yeni script Pencerenin tarihi değiştiğinde ya da durumu
onredo  Yeni script Belge bir tekrar yapma işlemine sahne olduğunda
onresize  Yeni script Pencere yeniden boyutlandırıldığında
onstorage  Yeni script Bir belge yüklendiğinde
onundo  Yeni script Belge bir geri alma işlemine sahne olduğunda
onunload  Yeni script Kullanıcı belgeden ayrılınca



Form Olayları

Bir HTML formu içerisinde olay tetiklenir.

Tüm HTML5 elementlerine uygulanır,fakat çoğu form elementlerine uygulanır:

Özellik Değer Tanım
onblur script  bir element odaklanmasını yitirdiğinde
onchange script bir elment değiştiğinde
oncontextmenu Yeni script  bir kaynak menu tetiklendiğinde
onfocus script  Bir elemente odaklanıldığında
onformchange Yeni script  Bir form değiştiğinde
onforminput Yeni script  Bir form kullanıcı veri girişi aldığında
oninput Yeni script  Bir element veri girişi aldığında
oninvalid Yeni script  Bir element doğru olmadığında (invalid)
onreset script  Bir form resetlendiğinde
HTML5 desteklemiyor
onselect script  Bir elment seçildiğinde
onsubmit script Bir form onaylandığında

Form attributes yani;

Yeni form özellikleri;

  • autocomplete,
  • novalidate

Yeni input özellikleri;

  • autocomplete,
  • autofocus,
  • form,
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget),
  • height and width,
  • list,
  • min, max and step,
  • multiple,
  • pattern (regexp),
  • placeholder,
  • required,

Tarayıcı desteği;

Attribute IE Firefox Opera Chrome Safari
autocomplete 8.0 3.5 9.5 3.0 4.0
autofocus Hayır 4.0 10.0 3.0 4.0
form Hayır 4.0 9.5 10.0 Hayır
form overrides Hayır 4.0 10.5 10.0 Hayır
height and width 8.0 3.5 9.5 3.0 4.0
list Hayır 4.0 9.5 Hayır Hayır
min, max and step Hayır Hayır 9.5 3.0 Hayır
multiple Hayır 3.5 11.0 3.0 4.0
novalidate Hayır 4.0 11.0 10.0 Hayır
pattern Hayır 4.0 9.5 3.0 Hayır
placeholder Hayır 4.0 11.0 3.0 3.0
required Hayır 4.0 9.5 3.0 Hayır

autocomplete Özelliği

Form ya da giriş alanının(input field) autocomplete ile otomatik tamamlama özelliğine sahip olmasını sağlar.

Not; Form etiketi ile çalışır autocomplete. Ayrıca; input->text, search, url, telephone, email, password, datepickersi range ve color ile de kullanılır.

Bu özelliğe sahip olan bir alanda yazmaya başlayan kullanıcı, tarayıcı alandaki verileri doldurabilecek şeylere dair ayarları göstermeye başlayacaktır.

Örnek ve deneme adresi için;

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

Not; bazı tarayıcılarda aktif etmeniz gerekebilir bu özelliği.

HTML5 birkaç yeni input type özelliğine sahip formlar için. Bunlar daha iyi giriş kontrolü ve doğrulaması sağlamakta.

Yeni input type özellikleri;

  • email
  • url
  • number
  • range
  • tarih toplayıcıları(date, month, week, time, datetime, datetime-local)
  • search
  • color

Tarayıcı desteği

Input type IE Firefox Opera Chrome Safari
email Hayır 4.0 9.0 10.0 Hayır
url Hayır 4.0 9.0 10.0 Hayır
number Hayır Hayır 9.0 7.0 Hayır
range Hayır Hayır 9.0 4.0 4.0
Date pickers Hayır Hayır 9.0 10.0 Hayır
search Hayır 4.0 11.0 10.0 Hayır
color Hayır Hayır 11.0 12 Hayır

Not; Opera yeni giriş elemanları için en iyi desteği sunmakta. Bununla birlikte, tüm bilinen tarayıcılarda kullanmaya başlayabilirsiniz. Eğer desteklemiyorlarsa, normal text alanları olarak davranacaklardır.

Input Type – email

Kesinlikle e-posta adresinin girileceği bir giriş alanı sağlar.

Eposta alanının değeri otomatik olarak doğrulanır form onaylandığında.

Örnek ve deneme adresi; Anasayfa: <input type="url" name="user_email" />

İpucu; iPhone üzerindeki Safari email giriş elemanı özelliğini tnaımakta ve eşleşecek şekilde klavye girişlerini değiştirmekte ekranda (adds@and.com ayarları)

Input type – URL

Kesinlikle url adresinin girileceği bir giriş alanı sağlar.

Üstteki ipucu burada da geçerli.