Ana sayfa » Teknoloji » HTML Dersleri » HTML 5 Dersleri – Bölüm 7 – Input type özellikleri

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

tarafından Hasan Yasin Türkyılmaz
2 yorum 16 gösterim

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 typeIEFirefoxOperaChromeSafari
emailHayır4.09.010.0Hayır
urlHayır4.09.010.0Hayır
numberHayırHayır9.07.0Hayır
rangeHayırHayır9.04.04.0
Date pickersHayırHayır9.010.0Hayır
searchHayır4.011.010.0Hayır
colorHayırHayır11.012Hayı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" />
Özellikdeğertanım
maxnumberMaksimum değer limiti
minnumberMinimum değer limiti
stepnumbertanımlanan aralıkta sayılar artar ve azalır
valuenumberVarsayı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" />

 

 

 

Alakalı yazılarım

2 yorum

Işıl Başer 23 Şubat 2013 - 12:06

Merhaba. Öncelikle verdiğiniz bilgiler çok işime yaradı teşekkür ederim. Input type="date"….. komutunu kullandığımız zaman tarih seçicinin arka planı gri işaretleyicisi mavi renkte gözüküyor bu görünümü nasıl değiştirebilirim. Yardımcı olabilir misiniz?

Yanıtla
nefarkederki 1 Mayıs 2013 - 17:10

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.

Yanıtla

Bu site çerezleri kullanarak deneyiminizi artırmakta. Bilgilerinizi satmamakta, spam amacıyla yapılan reklamlarda da kullanmamakta. Sizlere faydalı içerikler sunarak öğrenmeniz için çabalamakta. Kabul et Devamını oku

%d blogcu bunu beğendi: