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

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

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" />

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" />