HTML5 – Jenis input yang baru dan mudah!

HTML5 ternyatanya berbeza dari HTML sebelumnya, dengan usaha memperkenalkan beberapa jenis input yang baru, HTML5 menyediakan kawalan dan pengesahan input yang lebih baik. Antara jenis input yang baru di HTML5 adalah:

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

Apa yang menarik mengenai HTML5 adalah pengesahan form kini boleh dilakukan oleh pelayar di sebelah client dengan minimum penggunaan JavaScript. Dengan itu, anda tidak perlu lagi menulis JavaScript yang panjang lebar dan memeningkan. Tambahan pula, penulisan kod anda akan bertambah kemas dan teratur dengan hasil yang lebih baik.

Seterusnya mari kita lihat beberapa contoh penggunaan jenis dan attribute input HTML5 yang sangat berguna.

Jika sebelum ini, pengaturcara perlu menggunakan kod JavaScript untuk mengeluarkan paparan kalendar, kini dengan HTML5, pengaturcara hanya perlu menggunakan kod yang pendek untuk mengeluarkan paparan kalendar seperti dibawah.

Birthday: <input type="date" name="bday"> 

Selain input date ini, terdapat juga input date yang lain seperti datetime dan datetime-local untuk memilih tarikh dan masa beserta zon masa ataupun tidak. Walaubagaimanapun, untuk input date ini hanya pelayar web Google Chrome, Opera dan safari sahaja yang tersedia menyokong ciri ini.

Seterusnya adalah input color. Dengan input color ini, kita boleh memaparkan pemilih warna pelayar. Tetapi harus diketahui, paparan pemilih warna adalah berlainan mengikut pelayar.

<input type="color" >

Paparan Opera		Paparan Chrome

Pelayar Opera pada mulanya memaparkan warna asas dan format hexa manakala pelayar Chrome akan serta merta memaparkan palet warna apabila ditekan. Seterusnya adalah input number. Input number digunakan untuk nilai nombor. Anda juga boleh menyatakan sekatan nilai nombor dengan menggunakan attribute seperti max, min, step dan value.

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

Sekiranya nilai nombor yang dimasukkan tidak menepati nilai min dan max yang ditetapkan, pelayar akan memaparkan error untuk nombor yang dimasukkan. Selain itu, HTML5 juga menyokong fungsi untuk melakukan pengesahan fields mengikut paten yang dikehendaki seperti pengesahan untuk email, URL dan no telefon. Pengesahan ini boleh dilakukan dengan menggunakan input seperti email, url dan tel.

<input type ="email" placeholder="name@domain.com" required />

<input type ="url" placeholder="http://www.domainname.com" required /> 

<input type ="tel" placeholder="(###)###-####" pattern ="\(\d{3}\)+\d{3}-\d{4}" required/>

1	2	3

Seperti di gambar 1, pelayar melakukan pengesahan field untuk email. Input yang boleh digunakan adalah input email. Ianya akan terus diperiksa samada ianya mengikut format email atau tidak. Manakala, di gambar 2, ianya melakukan pengesahan untuk input URL dengan menggunakan input url dan gambar 3, pelayar melakukan pengesahan field menggunakan input tel mengikut format nombor telefon yang dikehendaki. Semua pengesahan fields ini dilakukan mengguna HTML5 tanpa JavaScript.

Seterusnya, HTML5 memudahkan pengesahan fields yang wajib diisi dengan hanya menulis attribute required di setiap <input> tag yang wajib di isi. Contohnya:

 

Pelayar akan memberitahu anda sekiranya, anda menghantar form tanpa melengkapkan fields yang wajib diisi.Terdapat banyak lagi jenis input yang terdapat di HTML5, anda boleh mencuba sendiri kehebatan HTML5 di http://www.w3schools.com/html/html5_form_input_types.asp.

Kenapa kita memerlukan HTML5 untuk pengesahan form? Sejujurnya, kita tidak boleh mempercayai apa yang akan diisi dan dihantar oleh pengguna. Sistem tanpa pengesahan form umpama membiarkan orang luar memasukkan apa sahaja kedalam rumah kita, secara teknikalnya ianya akan mengganggu data di pangkalan data. HTML5 memudahkan kawalan dan penggunaan input supaya pengesahan input dari form akan lebih berkesan dan mudah. Selain itu, HTML5 juga memaparkan paparan visual pelayar yang lebih menarik dan mudah untuk pengguna.  

Untuk mempelajari HTML5 dengan lebih lanjut anda boleh menghadiri kursus kami @ Introduction To Development Using HTML5, CSS3 & JQuery. Lawati laman sesawang kami di www.training.2-sigma.com atau boleh menghubungi kami melalui emel di farahiryanti@2-sigma.com/sales@2-sigma.com atau melalui talian telefon di 03-61880601 untuk mendapatkan kandungan kursus dan tarikh kursus terdekat.