Cara menggunakan form validasi html

Saat mengisi form online biasanya terdapat kolom untuk mengisi alamat email, dan saat kita salah menuliskan format email maka akan muncul pesan bahwa format salah. Banyak yang menggunakan skrip pemrograman seperti PHP atau JavaScript untuk memvalidasi email ini

Nội dung chính Show

Validasi tanda @ (at).
Video Tutorial Belajar HTML - Validasi Form di HTML
Apa yang dimaksud dengan validasi formulir?
Apa gunanya validasi formulir?
Bagaimana cara membuat formulir dalam HTML?
Apa itu validasi masukan?

Pada artikel ini kita akan menggunakan kode praktis menggunakan HTML5. Saat saya mencoba menggunakan 2 browser berbeda, ternyata ada juga perbedaan pada pesan validasinya. Namun intinya tetap sama, jika format email yang dimasukkan salah maka akan muncul pesan notifikasi

Validasi tanda @ (at).

Validasi email ini berdasarkan ada atau tidaknya tanda @ (at) sebagai bagian dari format alamat email yang valid

Setelah pada tutorial sebelumnya kita telah mempelajari tentang cara menambahkan video menggunakan HTML 5, pada tutorial kali ini kita akan kembali membahas fitur-fitur HTML 5 yang berhubungan dengan Forms

Video Tutorial Belajar HTML - Validasi Form di HTML

Kami akan membahas salah satu fitur yang dimiliki oleh HTML 5 yang berhubungan dengan form yaitu validasi form

Apa fungsi dari formulir validasi?

Form validasi digunakan untuk mengecek input pada form, misalnya jika ingin salah satu field pada form diisi dengan email, maka validasi pada field tersebut dapat diatur dimana user harus memasukkan alamat email pada form tersebut. format yang valid, jika alamat email yang dimasukkan tidak sesuai dengan format yang valid, maka akan muncul error pada field yang ada di form, dan data tidak dapat diproses, sehingga kurang lebih fungsi dari form validasi.

Jika sebelumnya untuk membuat form validasi di sisi client kita harus menggunakan javascript, sekarang bisa menggunakan perintah di HTML 5

ok langsung saja kita bahas apa saja fitur form validasi pada HTML 5

Validasi Masukan Tidak Boleh Kosong (wajib)

Jika ingin input salah satu field pada form diisi, dapat ditambahkan atribut yang dibutuhkan, sehingga jika field tidak diisi maka akan muncul pesan error, contohnya seperti berikut

<. DOCTYPE html>

<html>

<judul>Pelajari Form Validasi</judul>

</kepala>

<tubuh>

</bentuk>

</tubuh>

</html>

misalnya kita simpan dengan nama form_validasi_required. html

kemudian kita buka di browser dan hasilnya seperti berikut

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

Validasi Input Harus Numerik

Anda juga bisa mengatur validasi pada form yang hanya bisa diisi dengan angka, caranya adalah dengan menggunakan nilai angka pada tipe atribut, contohnya seperti dibawah ini

<. DOCTYPE html>

<html>

<judul>Pelajari Form Validasi</judul>

</kepala>

<tubuh>

</bentuk>

</tubuh>

</html>

misalnya kita simpan dengan nama form_validasi_number. html, kemudian kita buka di browser dan hasilnya seperti berikut

bisa dilihat ketika kita memasukan input yang bukan angka, dan tombol di klik maka akan muncul error, caranya mudah kan...

Validasi Input harus berupa alamat URL

Anda juga bisa mengatur form input yang harus berupa alamat URL input dalam format yang valid, konsepnya hampir sama dengan validasi input angka, Anda dapat mengubah tipe atribut nilai dengan "url", contohnya adalah sebagai berikut

<. DOCTYPE html>

<html>

<judul>Pelajari Form Validasi</judul>

</kepala>

<tubuh>

</bentuk>

</tubuh>

</html>

misalnya kita simpan dengan nama form_validasi_url. html, kemudian kita buka di browser, maka hasilnya seperti berikut

nah sepertinya masukan url yang saya masukan adalah warung belarjar. com dan saya klik tombol submit, tetapi muncul error seperti gambar di atas, itu karena format input url tidak sesuai, formatnya harus https. //toko belajar. com, mudah kan 😀

Validasi input harus dalam bentuk Email

Selain alamat url, validasi input juga bisa diset berisi alamat email, konsepnya sama dengan mengubah nilai dari tipe atribut menjadi "email", contohnya seperti di bawah ini

<. DOCTYPE html>

<html>

<judul>Pelajari Form Validasi</judul>

</kepala>

<tubuh>

</bentuk>

</tubuh>

</html>

misalnya kita simpan dengan nama form_validasi_email. html, kemudian kita buka di browser dan hasilnya seperti berikut

sepertinya saya input lapak belajar. com di input dan ketika tombol submit di klik akan muncul error, hal ini dikarenakan input tidak sesuai dengan format email, jadi inputnya harus warungbelajar@gmail. com

Jadi masukan ini mendeteksi tanda @ pada teks masukan

Validasi jumlah maksimum karakter yang dapat dimasukkan

Anda juga dapat mengatur jumlah maksimal karakter yang dapat diinputkan pada form input, dengan menggunakan atribut maxlength dan menentukan nilai yaitu jumlah maksimal karakter yang dapat diinputkan, contohnya adalah sebagai berikut

<. DOCTYPE html>

<html>

<judul>Pelajari Form Validasi</judul>

</kepala>

<tubuh>

</bentuk>

</tubuh>

</html>

misalnya kita simpan dengan nama form_validasi_max. html, kemudian kita buka di browser, maka hasilnya seperti berikut

terlihat pada gambar di atas kita hanya bisa menginput sampai angka 5 saja, walaupun kita coba input teks lagi hasilnya tetap hanya 5 karakter saja, karena kita setting maxlength=”5″ gampang kok 😀

Cara menambahkan form validasi dengan HTML 5 sangatlah mudah, namun terdapat beberapa kekurangan pada form validasi pada HTML 5 yaitu dukungan browser, karena tidak semua browser dapat mendukung fitur form validasi ini.

untuk informasi lebih lanjut tentang dukungan browser dapat diperiksa di http. // www. w3schools. com/html/html_form_input_types. asp

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

[stextbox id=”info”] Anda serius ingin menguasai HTML?

Warung Belajar telah membuat DVD Tutorial "Tutorial HTML - Kotak Putih". DVD Tutorial kali ini membahas tentang HTML secara lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke. Tutorial HTML – Kotak Putih[/stextbox]

Apa yang dimaksud dengan validasi formulir?

Validasi form adalah proses validasi input data input dari form . Proses validasi ini biasanya dilakukan di Controller dan menggunakan library form_validation.

Apa gunanya validasi formulir?

Form validasi umumnya menjalankan dua fungsi. Validasi dasar - Memeriksa semua isian formulir apakah semua isian sudah terisi data . Proses ini akan memeriksa setiap formulir satu per satu dan memeriksa datanya. Validitas format data - Memeriksa validitas format dan nilai data yang dimasukkan.

Bagaimana cara membuat formulir dalam HTML?

Untuk membuat form dengan menggunakan bahasa HTML, Anda dapat menggunakan elemen HTML yaitu

Apa itu validasi masukan?

Validasi input dilakukan untuk memastikan bahwa data yang diisi oleh pengguna sesuai dengan kebutuhan aplikasi . Untuk halaman login, setidaknya ada 2 input yang harus Anda validasi. Yang pertama adalah input email dan yang kedua adalah input kata sandi.