Validasi bidang input email dan URL dalam formulir HTML

Dalam panduan ini, Anda akan mempelajari semua aspek penting dari kolom input untuk alamat email dan URL dalam formulir HTML. Tujuannya adalah untuk menunjukkan cara mengimplementasikan validasi input ini secara efektif dan dapat menyesuaikan gaya untuk berbagai status input. Ini tidak hanya akan meningkatkan pengalaman pengguna, tetapi juga kualitas data yang Anda kumpulkan.

Pengetahuan Utama

• Anda akan mempelajari struktur dasar dan validasi untuk surel dan URL menggunakan HTML.
• Anda juga akan belajar cara memberikan umpan balik visual kepada pengguna saat input tidak valid menggunakan CSS.
• Penggunaan Pola untuk validasi lebih lanjut untuk alamat email dan URL dijelaskan.

Panduan Langkah demi Langkah

1. Membuat Kolom Input Dasar untuk Email

Mulailah dengan membuat elemen Input Standar untuk Email. Di sini Anda harus menetapkan tipe sebagai "email", sehingga browser secara otomatis memvalidasi input tersebut.

Sekarang kolom Input akan diatur oleh HTML sehingga mengharapkan alamat email dan memberikan umpan balik visual saat ada kesalahan input. Begitu pengguna mulai memasukkan data, latar belakangnya berubah menjadi merah muda untuk menunjukkan ada kesalahan.

2. Validasi Alamat Email

Validasi email dilakukan dengan aturan sederhana. Minimal harus ada satu tanda "@" diikuti oleh minimal satu karakter lagi. Ini adalah validasi NLP dasar. Namun, aturan validasi ini tidak cukup untuk menjamin bahwa alamat email tersebut benar-benar ada.

Contoh alamat email yang tidak valid adalah "bla@". Dalam kasus seperti ini, pengiriman formulir akan diblokir, dan pengguna akan melihat pesan kesalahan.

3. Menggunakan Pola untuk Validasi yang Lebih Akurat

Untuk mencapai validasi yang lebih akurat, Anda dapat menggunakan atribut "pattern". Dengan ekspresi reguler (Regex), Anda dapat menetapkan bahwa alamat email memenuhi persyaratan tertentu, misalnya domain tertentu.

Dengan validasi tambahan ini, Anda memastikan hanya alamat email yang valid diterima, seperti alamat Gmail atau GMX saja.

4. Input yang Diperlukan dan Gaya

Untuk memastikan bahwa kolom Email terisi, Anda dapat menambahkan atribut "required". Jika pengguna mencoba mengirim formulir tanpa input, mereka akan segera menerima umpan balik visual.

Untuk gaya input yang tidak valid, Anda dapat menggunakan selector CSS ":invalid". Dengan begitu, latar belakang bidang akan berubah menjadi merah, untuk memberi peringatan kepada pengguna bahwa input tidak benar.

5. Membuat Kolom Input untuk URL

Seperti halnya dengan surel, penting juga untuk membuat elemen Input yang sesuai untuk URL. Tetapkan tipe sebagai "url", sehingga browser juga akan memvalidasi input di sini.

6. Validasi URL

Persyaratan dasar untuk URL valid termasuk dimulainya dengan "http://" atau "https://" dan memiliki setidaknya satu karakter berikutnya. Jika pengguna hanya memasukkan "https", ini tidak cukup.

Prinsip yang sama berlaku untuk protokol lain seperti "ftp". Jika input tidak sesuai dengan persyaratan, browser akan memberikan tanggapan dan tidak mengirimkan formulir.

7. Validasi Lanjutan dengan Pola untuk URL

Untuk membuat validasi lebih spesifik, seperti "https://www.example.com", Anda juga harus menggunakan atribut "pattern" untuk membantu pengguna memasukkan URL dengan benar.

8. Kemudahan Penggunaan Di Perangkat Bergerak

Salah satu keuntungan besar dalam menggunakan tipe "email" dan "url" dalam formulir adalah peningkatan kemudahan penggunaan di perangkat bergerak. Keyboard akan disesuaikan secara optimal untuk memudahkan pengguna dalam memasukkan alamat email dan URL.

Ringkasan

Pada tutorial ini, kita telah membahas kriteria utama untuk validasi alamat email dan URL dalam formulir web. Anda telah mempelajari bagaimana melakukan validasi yang sederhana maupun lanjutan, serta cara menyesuaikan umpan balik pengguna melalui CSS untuk menciptakan pengalaman pengguna yang lebih baik.