Jumat, 01 Mei 2015

Inputan Type HTML5

HTML5 memiliki beberapa input type baru untuk form. Fitur baru ini memungkinkan kontrol input yang lebih baik dan validasi.
Pada chapter ini kita akan membahas Input Type baru pada HTML5 :
§  color
§  date
§  datetime
§  datetime-local
§  email
§  month
§  number
§  range
§  search
§  tel
§  time
§  url
§  week

Catatan : Tidak semua browser mendukung semua input type baru. Kita bisa memulainya. Jika tidak didukung maka akan ditampilkan sebagai field text biasa. Input Type : color
Type color digunakan untuk menginputkan field yang berisikan warna.
 
Input Type : date Type data date memungkinkan user untuk memilih tanggal.
 

Input Type : datetime
Type datetime memungkinkan pengguna untuk memilih tanggal dan waktu (bukan zona waktu).
 

Input Type : datetime-local
Type datetime-local memungkinkan pengguna untuk memilih tanggal dan waktu (bukan zona waktu). 
 

Input Type : email Type email digunakan untuk menginputkan field yang seharusnya berisi alamat email. Mendefinisikan field dari alamant e-mail (akan otomatis divalidasi ketika disubmitkan) 
 

Tip : Safari dan iPhone mengenal type email, dan merubah keyboard on-screen sesuai dengan format email (email@admin.com)
Input Type : month Type month memungkinkan user untuk memilih bulan dan tahun.
 

Input Type : number Type number digunakan untuk menginputkan field yang seharusnya berisikan nilai numeric. Kita juga bisa mengatur restriction pada nomor yang diterima : 
 

Gunakan atribut berikut untuk menentukan restriction :
·      Max - menentukan nilai maksimum yang diperbolehkan
·      Min - menentukan nilai minimum yang diperbolehkan
·      Step - menentukan nomor legal interval
·      Value - menentukan nilai default

Input Type : range Type range digunakan untuk menginputkan fiels yang seharusnya nomor.
Kita juga bisa mengatur restriction nomor apa yang akan diterima.
 

Gunakan atribut dibawah ini untuk menentukan restriction :
·      Max - menentukan nilai maksimum yang diperbolehkan
·      Min - menentukan nilai minimum yang diperbolehkan
·      Step - menentukan nomor legal interval
·      Value - menentukan nilai default 

Input Type :Search
Type search digunakan untuk mencari field (field search tampul seperti text field biasa).
 

Input Type : tel
Mendefinisikan field yang memasukkan nomor telepon.
 

Input Type : time
Type time memungkinkan user untuk memilih waktu.
 

Input Type : url Type url digunakan untuk menginputkan fields yang seharusnya berisikan alamat URL. Nilai dari field url secraa otomatis di validasi ketika form disubmitkan.
 

Tip : Safari di iPhonr mengenali input type url, dan mengubah keyboard on-screen untuk menyesuaikan format url (contoh : http://situs.com).

Input Type : week
Type week memungkinkan user untuk memilih minggu dan tahun. 

Referensi :
 

 
 

 

 

 

 

 

  

 
 
 
 

Tidak ada komentar:

Posting Komentar