Berkat HTML5, para pengembang web memiliki perangkat baru yang dapat digunakan untuk meningkatkan formulir agar tidak hanya lebih fungsional, tetapi juga lebih ramah pengguna. Dengan HTML5, tipe input baru (rentang, warna, dll), fungsi validasi, dan atribut diperkenalkan yang tidak hanya menyederhanakan proses pengumpulan data, tetapi juga meningkatkan pengalaman pengguna (mengurangi kesalahan yang tidak disengaja) karena nilainya lebih mirip dengan tipe yang dapat dibaca manusia. Pada artikel ini, kita akan membahas tipe input yang telah ditingkatkan dan fitur validasi asli HTML5 yang membuat pengembangan formulir menjadi lebih mudah serta pengalaman yang lebih ramah pengguna.
Tipe Input Baru dalam HTML5
Tipe Input Baru Salah satu peningkatan yang paling menonjol pada HTML5 adalah tipe input baru. Sebelum ini, para pengembang kebanyakan hanya memiliki bidang input tipe konten dasar untuk digunakan, bersama dengan JavaScript untuk validasi yang lebih canggih. HTML5 telah menghadirkan tipe input yang tepat untuk format data yang berbeda. Di bawah ini adalah beberapa jenis input baru yang dapat berguna:
- Email (ketik = “email”): Jenis masukan ini khusus untuk alamat email. Browser akan secara otomatis memvalidasi simbol @ dalam email yang formatnya benar. Browser seluler juga menyesuaikan keyboard mereka untuk memunculkan karakter yang digunakan dalam email, seperti tanda @.
- URL (ketik = “url”): Gunakan ini untuk alamat web; ini memastikan bahwa input sesuai dengan format URL. Hal ini sangat berguna terutama dalam kasus tautan di mana pengguna tidak akan dapat memasukkan URL yang salah.
- Nomor (ketik = “nomor”): Hanya mengizinkan input numerik, dan dapat menentukan beberapa nilai minimum dan maksimum. Ini membuat pengambilan data numerik menjadi lebih mudah dengan beberapa browser yang menyediakan panah atas dan bawah.
- Range (type=range): tipe input ini digunakan untuk menampilkan slider untuk memilih rentang numerik di mana pengguna tidak perlu memasukkan angka yang tepat, tetapi dapat memilih nilai perkiraan dari rentang yang ditentukan.
- Input Tanggal & Waktu (ketik = “tanggal”, ketik = “waktu”, ketik = “datetime-lokal”, ketik = “bulan”, dan ketik = “minggu”): Tipe-tipe ini sangat berguna untuk input tanggal dan waktu, yang berarti Anda tidak lagi memerlukan pemilih tanggal berbasis JavaScript. Tipe-tipe ini memberikan Anda pemilih tanggal/waktu yang tepat untuk tipe input yang kita gunakan.
- Tel (tipe = “tel”): Jenis input ini untuk nomor telepon. Ini tidak akan melakukan validasi yang tepat tetapi mengubah jenis keyboard pada perangkat seluler untuk membuat memasukkan nomor telepon lebih mudah!
- Color (type=“color”): Jenis input ini memunculkan pemilih warna, yang membantu pengguna dalam memilih warna sebagai input mereka dan mengembalikan heksadesimal yang sesuai.
Metode input baru ini menyempurnakan antarmuka pengguna, karena memberikan kontrol yang lebih alami. Metode ini juga meningkatkan aksesibilitas karena jenis input canggih tersebut lebih mudah ditafsirkan melalui teknologi bantuan.
Validasi Bawaan
Validasi bawaan dalam HTML5 memungkinkan validasi formulir yang lebih sederhana, dengan sedikit atau tanpa JavaScript. Pelacakan penawaran berikut ini memastikan bahwa pengguna memasukkan data dalam struktur yang sesuai, dengan kemungkinan kesalahan dan ketidakkonsistenan yang lebih kecil:
1. Atribut wajib diisi: Saat Anda menambahkan wajib diisi ke bidang input, ini akan menjadikan bidang tersebut sebagai bidang wajib diisi dan browser tidak akan mengirim jika pengguna tidak mengisi nilai apa pun.
2. Pattern: Atribut pattern memungkinkan pengembang untuk menetapkan regex yang harus diikuti saat memasukkan input. Bidang kode pos mungkin memerlukan pattern=“\d{5}” untuk lima digit angka[4].
3. Properti Min & Max: Properti min dan max membatasi rentang nilai input untuk jenis tertentu, seperti angka, rentang, tanggal, datetime-lokal, dan waktu. Hal ini menjamin bahwa input pengguna terbatas pada rentang tertentu dan membuat data lebih seragam.
4. Atribut Langkah: Atribut langkah digunakan dengan jenis input angka dan rentang untuk menentukan interval angka yang sah. Khususnya berguna untuk menentukan ketepatan input angka.
5. fokus otomatis: Atribut autofocus secara otomatis fokus pada bidang input tertentu ketika formulir dimuat, hal ini membantu pengguna untuk menentukan bidang input mana yang harus mereka gunakan terlebih dahulu.
6. Placeholder: placeholder adalah petunjuk yang diharapkan dari sebuah input, yang ditunjukkan kepada penginput tentang apa yang akan dianggap sebagai format yang tepat.
7. Atribut Pelengkapan Otomatis: pelengkapan otomatis memungkinkan browser untuk secara otomatis mengisi data berdasarkan informasi yang dimasukkan sebelumnya, membantu pengguna mengurangi waktu yang dihabiskan untuk memasukkan input yang berulang.
Menggunakan formulir HTML5 untuk meningkatkan pengalaman pengguna
Jenis input baru dan fitur validasi bawaan yang disediakan HTML5 sangat membantu dalam membuat formulir yang mudah digunakan, sehingga pengembang dapat membuat formulir yang lebih intuitif dengan sedikit atau tanpa JavaScript. Opsi-opsi asli ini memungkinkan pengembang untuk merampingkan pengalaman formulir dengan membantu pengguna memasukkan informasi yang benar dan menghilangkan kiriman yang sia-sia dalam format yang salah atau dengan respons yang tidak lengkap.
Selain itu, fitur-fitur ini membantu pengguna seluler dengan mengubah tata letak keyboard tergantung pada jenis input dan kontrol sederhana untuk perangkat layar sentuh. Sebagai contoh, jika kita memiliki kolom email dan URL, fitur ini meminta perangkat seluler untuk menampilkan keyboard yang memiliki karakter khusus yang lebih mudah untuk mengisi formulir; atau input tanggal dan waktu menyediakan pemilih asli yang dioptimalkan untuk layar.
Kesimpulan
Ini mungkin terlihat seperti tambahan yang layak untuk dunia pengembangan web, tetapi formulir HTML5 (dengan jenis input baru yang lebih baik dan fitur validasi) jelas merupakan sebuah langkah maju. Fitur-fitur ini menyederhanakan proses entri data Anda, mengurangi validasi JavaScript, dan memastikan bahwa formulir secara otomatis menjadi lebih mudah diisi oleh pengguna dengan benar. Kemampuan ini membantu pengembang membangun formulir yang lebih kuat, lebih mudah diakses, dan ramah pengguna di berbagai perangkat dan platform. Dengan demikian, formulir HTML5 telah menjadi titik awal yang baik bagi pengembang web modern untuk membuat formulir yang efisien dan berorientasi pada pengguna.
Kembali ke >> Fitur HTML5 yang Harus Anda Ketahui