HTML5 Yeni Input Tipleri

HTML5 formlar için bir kaç yeni input tipi eklenmiştir. Bu yeni özellikler daha iyi kontrol ve doğrulama olanağı sağlar.

Bütün tarayıcılar yeni giriş tiplerini desteklemeyebilir ama desteklemeseler bile normal giriş alanı gibi davranacaklardır.

Color Input Tipi

Giriş alanının bir renk içermesi için color kullanılır.

<form action="#">
  Bir renk seçin: <input type="color" name="renksec"><br />
  <input type="submit">
</form>

Bu özellik Chrome ve Opera tarafından desteklenmektedir.

Date Input Tipi

Tarih seçmemize yardımcı olur.

<form action="#">
  Doğum günü: <input type="date" name="dogumgunu">
  <input type="submit">
</form>

Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir.

Datetime Input Tipi

Tarih ve Saat seçmemize yarar.

<form action="#">
  Tarih ve Saat: <input type="datetime" name="tarihsaat">
  <input type="submit">
</form>

Bu özellik Safari ve Opera tarafından desteklenmektedir.

Email Input Tipi

Form giriş alanında bir E-posta adresi olması gerektiğinde kullanılır.

<form action="#">
  E-Posta: <input type="email" name="eposta">
  <input type="submit">
</form>

Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir.

Month Input Tipi

Kullanıcının bir ay ve yıl seçmesine olanak verir.

<form action="#">
  Ay ve yıl: <input type="month" name="Ayyil">
  <input type="submit">
</form>

Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir.

Number Input Tipi

Input alanı numerik bir değer gerektirdiği zaman kullanılır. Ayrıca hangi sayıların kabul edilebileceğini belirtebilirsiniz.

<form action="#">
  Miktar girin (1 ve 5 arasında): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir. IE tarafından kısmen desteklenmektedir.

Search Input Tipi

Arama işleri için search tipi giriş kullanılır. (bir search alanı tipik bir metin (text) alanı gibi davranır)

<form action="#">
  Google'da ara: <input type="search" name="googlesearch"><br />
  <input type="submit">
</form>

Bu özellik Chrome, Safari tarafından desteklenmektedir.

URL Input Tipi

Bir giriş alanı bir URL bağlantısı içerecekse kullanılır. Bu özellik form gönderildiği sırada doğrulanır.

<form action="#">
  Ana sayfanızı ekleyin: <input type="url" name="anasayfa">
  <input type="submit">
</form>

Bu özellik Chrome, Firefox ve Opera tarafından desteklenmektedir. IE tarafından kısmen desteklenmektedir.