HTML5 (Input) Tipleri
HTML5 formlar için bir kaç yeni input tipine sahiptir. Bu yeni özellikler daha iyi kontrol ve doğrulama olanağı sağlar. HTML5 ile gelen bu yeni input tiplerini gelişmiş tarayıcılar destekler. Ancak desteklemeyen tarayıcılar bu yeni inputları normal text alanları gibi görmektedir. Şimdi HTML5 ile birlikte gelen input tiplerini birlikte inceleyelim..
color Input Tipi: Giriş alanının bir renk içermesi için color kullanılır.
<!DOCTYPE html> <html> <body> <form action="#"> Bir renk seçin: <input type="color" name="renksec"><br /> <input type="submit"> </form> </body> </html>
Bu özellik Chrome ve Opera tarafından desteklenmektedir.
<!DOCTYPE html> <html> <body> <form action="#"> Doğum günü: <input type="date" name="dogumgunu"> <input type="submit"> </form> </body> </html>Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir.
datetime Input Tipi: Tarih ve Saat seçmemize yarar.
<!DOCTYPE html> <html> <body> <form action="#"> Tarih ve Saat: <input type="datetime" name="tarihsaat"> <input type="submit"> </form> </body> </html>Bu özellik Safari ve Opera tarafından desteklenmektedir.
datetime-local Input Tipi: Bir tarih ve saat seçmenizi sağlar (time zone olmadan).
<!DOCTYPE html> <html> <body> <form action="#"> Toplantı Günü (tarih ve saat): <input type="datetime-local" name="tdaytime"> <input type="submit"> </form> </body> </html>Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir.
email Input Tipi: Form giriş alanında bir e-posta adresi olması gerektiğinde kullanılır.
<!DOCTYPE html> <html> <body> <form action="#"> E-Posta: <input type="email" name="eposta"> <input type="submit"> </form> </body> </html>
Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.
month Input Tipi: Kullanıcının bir ay ve yıl seçmesine olanak verir.
<!DOCTYPE html> <html> <body> <form action="#"> Ay ve yıl: <input type="month" name="Ayyil"> <input type="submit"> </form> </body> </html>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.
<!DOCTYPE html> <html> <body> <form action="#"> Miktar girin (10 ve 20 arasında): <input type="number" name="quantity" min="10" max="20"> <input type="submit"> </form> </body> </html>
Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.
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)
<!DOCTYPE html> <html> <body> <form action="#"> Google'da ara: <input type="search" name="googlesearch"><br /> <input type="submit"> </form> </body> </html>Bu özellik Chrome ve 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.
<!DOCTYPE html> <html> <body> <form action="#"> Ana sayfanızı ekleyin: <input type="url" name="anasayfa"> <input type="submit"> </form> </body> </html>
Bu özellik Chrome, Firefox ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.
range Input Tipi: Belirli bir aralıkta olan bir sayıyı seçmenizi sağlar Hangi sayıların kabul edilebileceğini belirtebilirsiniz:
<!DOCTYPE html> <html> <body> <form action="#" method="get"> Puanlar: 0<input type="range" name="points" min="1" max="10">10 <input type="submit"> </form> </body> </html>
Bu özellik Chrome, Firefox ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.
NOT: Kullanmış olduğunuz web tarayıcının HTML5 desteğini html5test.com adresine girerek test edebilirsiniz.
