HTML 5 Dersleri – Bölüm 7 – Input type özellikleri

HTML 5 Dersleri – Bölüm 7 – Input type özellikleri

by Hasan Yasin Türkyılmaz Temmuz 15, 2011

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.

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

Input type – Number

Kesinlikle numerik değerin girileceği bir giriş alanı sağlar.

Sınırlama da getirebilirsiniz.

Örnek ve deneme adresi; Points: <input type="number" name="points" min="1" max="10" />

Input type – Range

Kaydırma çubuğuna sahip belirli sınırları olan  numerik değer seçicisi oluşturur.

Örnek ve deneme adresi;  <input type="range" name="points" min="1" max="10" />
Özellik değer tanım
max number Maksimum değer limiti
min number Minimum değer limiti
step number tanımlanan aralıkta sayılar artar ve azalır
value number Varsayılan değer

Input type – Tarih toplayıcıları

date, month, week, time, datetime, datetime-local … Hepsi kendine ait bir sınırlama getirmekte.

Örnek ve deneme adresi; Date(Tarih): <input type="date" name="user_date" />

Input type “month”: Denemek için

Input type “week”: Denemek için

Input type “time”: Denemek için

Input type “datetime”: Denemek için

Input type “datetime-local”: Denemek için

Input Type – Search

Arama alanı için kullanılır, düzenli text alanı olarak davranır.

Input Type – Color

Giriş alanlarında renk seçimi için kullanılır. Opera color picker ile renk seçmenizi sağlarken chrome hexadecimal renk değerlerini kabul etmekte.

Örnek ve deneme adresi; Color: <input type="color" name="user_color" />

 

 

 

Bültenime kaydol!

İster soru sor, ister yazılarımdan ve etkinliklerimden haberdar ol...

Hasan Yasin Türkyılmaz

Dijital stratejist, growth hacker, pazarlama ve reklam danışmanı, eğitmen, konuşmacı, yazar @bilgeadam @g4asw @hyturkyilmaz

Related Articles

%d blogcu bunu beğendi: