Top

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

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

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

 

 

 

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan HTML 5 Dersleri – Bölüm 6 – Web depolama başlıklı makalemizde çerez, client ve cookies hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious

    • nefarkederki

      Kusura bakmayın geç yazdığım için. Yorumlarla ilgili bir sorun… Öncelikle, tarayıcınızı ve sürümünü söylemelisiniz. Ardından Ekran görüntüsü yollamalısınız.