HTML 5 Dersleri 3 - Input Tipleri

Bu dersimiz ile Input yani giriş tiplerinin HTML5 ile gelen yeni özellikleri ve yeni hallerini öğreneceğiz.

HTML 5 Dersleri 3 - Input Tipleri

HTML 5 Yeni Input Şekilleri

HTML5 formlar için yeni input tipleri ile geldi. Bu yeni input tipleri ve özellikleri bizlerin form elemanları kullanırken işimizi kolaylaştırıyor. Aynı zamanda formlarda kullandığımız nitelikleri zenginleştirmemizi sağlıyor.

Yeni İnput Tipleri Nelerdir

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Input Tipi : color

Giriş alanının bir renk içermesini sağlar.

Bir renk seçin: <input type="color" name="favcolor">

Bir renk seçin:

Input Tipi : date

Bir tarih seçme özelliği eklememizi sağlar.

Doğum günü: <input type="date" name="bday">

Doğum günü:

Input Tipi : datetime

Bir tarih ve saat seçeneği eklemeyi sağlar.

Doğum günü (tarih ve saat): <input type="datetime" name="bdaytime">

Doğum günü (tarih ve saat):

Input Tipi : datetime-local

Bir tarih ve saat seçmek için kullanılır ancak time zone kullanılmaz.

Doğum günü (tarih ve saat): <input type="datetime-local" name="bdaytime">

Doğum günü (tarih ve saat):

Input Tipi : e-mail

Input alanına bir mail adresi girileceğini gösterir.

E-mail: <input type="email" name="email">

E-mail:

Input Tipi : month

Kullanıcıların bir ay ve yıl seçmesini sağlar.

Doğum günü (ay ve yıl): <input type="month" name="bdaymonth">

Doğum günü (ay ve yıl):

Input Tipi : number

Input alanı sadece rakamsal bir değer alacaksa kullanılır.

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

Miktar girin (1 ve 5 arasında):

Input Tipi : range

Belli bir aralıkta sayı seçmemizi sağlar.

<input type="range" name="points" min="1" max="10">

Puanlar: 010

Input Tipi : search

Arama özelliği gereken formlarda kullanılır.

Google'da ara: <input type="search" name="googlesearch">

Google'da ara:

Input Tipi : tel

Telefon numarası verisi almak istediğimiz giriş alanlarında kullanılır.

Telefon: <input type="tel" name="usrtel">

Telefon:

Input Tipi : time

Bir saat seçme verisi için kullanılır.

Bir saat seçin: <input type="time" name="usr_time">

Bir saat seçin:

Input Tipi : url

Giriş alanına bir URL bağlantısı eklememizi sağlar.

Ana sayfanızı ekleyin: <input type="url" name="homepage">

Ana sayfanızı ekleyin:

Input Tipi : week

Bir hafta ve yıl seçmemizi sağlar.

Bir hafta seçin: <input type="week" name="week_year">

Bir hafta seçin:

Dipnot:

Dostlar Input tipleri bu şekilde. Aklıma gelen sizlerin sorabileceğiniz sorular oldu ve ona cevap vereyim. Bazı alanlar aynı farkı ne ? Arkadaşlar farkı SEO anlamında sizlere Semantik Elementler dersi paylaşmıştım. Bu elementler bizleri aramalarının daha kolay olabileceğini gösteriyor ve aynı zamanda teknik anlamda sağlam kodlar ve siteler çıkarmamızı sağlıyor. Input tipleri için ise istediğiniz ne ise o alanda Input tipi kullanmanızı öneririm. İyi çalışmalar.