Belajar HTML Part 32 Membuat Form Validasi dengan HTML 5

Posted on Posted in Tutorial HTML

Setelah dalam tutorial sebelumnya kita sudah belajar mengenai bagaimana cara menambahkan video dengan menggunakan HTML 5, dalam tutorial kali ini kita kembali membahas fitur HTML 5 yang berhubungan dengan Form.

Kita akan membahas salah fitur yang dimiliki oleh HTML 5 yang berhubungan dengan form yaitu form validasi.

Apa sih fungsi dari form validasi itu ?

Form validasi itu digunakan untuk melakukan pengecekan terhadap inputan yang di input di form, semisal anda menginginkan salah satu field di form tersebut harus diisi dengan email, nah anda dapat mengatur validasi di field tersebut yang mengharuskan pengguna memasukkan alamat email dengan format yang valid, jika alamat email yang dimasukkan tidak sesuai format yang valid maka akan muncul error pada field di form tersebut, dan data tidak bisa di proses, jadi kurang lebih seperti itu fungsi dari form validasi.

 

Jika dulu untuk membuat form validasi di sisi client kita harus menggunakan javascript, saat ini anda bisa menggunakan perintah di HTML 5.

baik langsung saja kita bahas apa saja sih fitur form validasi yang ada di HTML 5.

 

Validasi Inputan Tidak Boleh Kosong (required)

Jika anda menginginkan inputan salah satu field di form harus diisi anda dapat menambahkan attribute required, sehingga jika fieldnya tidak diisi akan menampilkan pesan error, contohnya adalah sebagai berikut :

semisal kita simpan dengan nama form_validasi_required.html

lalu kita buka di browser maka hasilnya adalah sebagai berikut :

maka jika form tidak diisi, dan tombol submit di klik, akan ada error notifikasi bahwa form belum diisi.

 

 

Validasi Inputan Harus Berupa Angka

Anda Juga dapat mengatur validasi pada form hanya bisa diisi dengan angka saja, caranya dengan menggunakan value number pada attribute type, contohnya seperti dibawah ini :

semisal kita simpan dengan nama form_validasi_number.html, lalu saya kita buka di browser maka hasilnya adalah sebagai berikut :

terlihat ketika kita memasukkan inputan yang bukan angka, dan tombol di klik maka akan muncul error, bagaimana mudah kan….

 

 

Validasi Inputan harus berupa alamat URL

Anda juga dapat mengatur inputan form yang harus diinputkan alamat URL dengan format yang valid, konsepnya hampir sama dengan validasi inputan number, anda dapat merubah value attribute type dengan “url”, contohnya adalah sebagai berikut :

semisal kita simpan dengan nama form_validasi_url.html, lalu kita buka di browser, maka hasilnya adalah sebagai berikut :

nah terlihat saya memasukkan inputan urlnya adalah warungbelajar.com dan saya klik tombol submit, akan tetapi menampilkan error seperti gambar diatas, hal tersebut dikarenakan format input url tidak sesuai format,  seharusnya formatnya adalah http://warungbelajar.com , gimana mudah kan 😀

 

Validasi Inputan harus berupa Email

Selain alamat url, anda juga dapat mengatur validasi inputan harus berisi alamat email, konsepnya sama dengan merubah value dari attribute type menjadi “email”, contohnya adalah seperti dibawah ini :

semisal kita simpan dengan nama form_validasi_email.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

terlihat saya menginputkan warungbelajar.com pada inputan dan ketika di klik tombol submit akan menampilkan error, hal tersebut dikarenakan inputan tidak sesuai dengan format email, jadi seharusnya inputannya adalah warungbelajar@gmail.com.

Jadi inputan ini mendeteksi tanda @ pada text yang diinput.

 

Validasi jumlah maximal karakter yang dapat diinput

Anda juga dapat mengatur berapa jumlah maksimal karakter yang dapat diinput di inputan form, dengan menggunakan attribute maxlength dan menentukan value yang merupakan jumlah maximal karakter yang dapat diinput, contohnya adalah sebagai berikut :

semisal kita simpan dengan nama form_validasi_max.html, lalu kita buka di browser, maka hasilnya adalah sebagai berikut :

terlihat pada gambar diatas kita hanya bisa menginputkan hingga angka 5 saja, meskipun kita coba menginputkan text lagi hasilnya akan tetap menampilkan 5 karakter saja, karena kita menset maxlength=”5″ bagaimana mudah kan 😀

 

Bagaimana mudah kan cara menambahkan form validasi dengan HTML 5, tetapi ada beberapa kekurangan yang ada di form validasi di HTML 5 ini yaitu support dari browser, karena tidak seluruh browser dapat mensupport dari fitur form validasi ini.

untuk keterangan lebih lanjut mengenai support browser bisa di cek di http://www.w3schools.com/html/html_form_input_types.asp

Baik sekian dulu pembahasan dari form Validasi dengan HTML 5, jika ingin berdiskusi bisa di kolom komentar, sekian dulu semoga bermanfaat, sampai jumpa di tutorial selanjutnya.

Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *