HTML5 ile gelen ve tasarımcıların çok fazla işine yarayacak yeniliklerden bir tanesi de yeni input türleri. Tarih seçimi, alan kısıtlaması gibi özellikler için jquery veya diğer javascript kütüphaneleri kullanırken html5 ile birlikte buna da kolay bir çözüm geldi.
- Renk seçimi: <input type=”color” name=”renk” />
- Sayı: <input type=”number” name=”sayi” />
- Aralık: <input type=”range” name=”aralik” />
- Tarih: <input type=”date” name=”tarih” />
- Tarih ve Saat: <input type=”datetime-local” name=”tarihsaat” />
- Ay: <input type=”month” name=”ay” />
- Hafta: <input type=”week” name=”hafta” />
- Zaman/Saat: <input type=”time” name=”saat” />
- E-posta: <input type=”email” name=”eposta” />
- Telefon numarası: <input type=”tel” name=”telefon” />
- Site adresi: <input type=”url” name=”url” />
- Arama: <input type=”search” name=”arama” />
Bunlar input türlerine gelen yeni türlerdir. Ayrıca input alanına girilen değerleri filtrelemek için pattern kullanabilirsiniz. İçerisine girilebilecek karakterler ve en az, en fazla girilebilecek karakter sayısı belirleyebilirsiniz.
Örnek olarak pattern=”[A-Za-z]{4,10}”
İnput alanına büyük-küçük harf girilebilir ve en az 4, en fazla 10 karakter girilebilir.
Sayfaya girildiğinde otomatik olarak focuslanması için autofocus kullanabilirsiniz. Ayrıca alanın doldurulmasının zorunlu olduğunu belirtmek için required kullanabilirsiniz. Bunları kullandığınızda başka javascript kodlarına ihtiyaç duymadan tarayıcınızın varsayılan uyarılarınıda görebilirsiniz.
