Belajar HTML Part 32 Membuat Form Validasi dengan HTML 5

bySetyo Wibowo ID - 0

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 :





<!DOCTYPE html>
<html>
<head>
   <title>Belajar Form Validasi</title>
</head>
<body>
<form method="post" action="">
	<input type="text" name="username" required/>
	<input type="submit" name="tombol" value="Tombol"/>
</form>
</body>
</html>




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 :





<!DOCTYPE html>
<html>
<head>
   <title>Belajar Form Validasi</title>
</head>
<body>
<form method="post" action="">
	<input type="number" name="umur"/>
	<input type="submit" name="tombol" value="Tombol"/>
</form>
</body>
</html>




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 :





<!DOCTYPE html>
<html>
<head>
   <title>Belajar Form Validasi</title>
</head>
<body>
<form method="post" action="">
	<input type="url" name="alamat_web"/>
	<input type="submit" name="tombol" value="Tombol"/>
</form>
</body>
</html>




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









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 :





<!DOCTYPE html>
<html>
<head>
   <title>Belajar Form Validasi</title>
</head>
<body>
<form method="post" action="">
	<input type="email" name="alamat_email"/>
	<input type="submit" name="tombol" value="Tombol"/>
</form>
</body>
</html>




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 :





<!DOCTYPE html>
<html>
<head>
   <title>Belajar Form Validasi</title>
</head>
<body>
<form method="post" action="">
	<input type="text" name="username" maxlength="5"/>
	<input type="submit" name="tombol" value="Tombol"/>
</form>
</body>
</html>








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









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.


Tags:

Post a Comment (0)

أحدث أقدم