Formulir adalah percakapan terstruktur antara pengunjung dan layanan. Situs menanyakan informasi, pengguna mengisinya, lalu aplikasi menjelaskan hasil tindakannya. Jika salah satu bagian hilang, pengguna harus menebak: apa yang diminta, mengapa data ditolak, atau apakah pesan benar-benar diterima. Memahami bagian formulir membantu pengembang menghindari masalah sebelum mulai menambahkan animasi dan gaya visual.
Contoh paling sederhana adalah halaman kontak dengan nama, email, subjek, dan pesan. Keempat bidang tersebut tidak otomatis diperlukan pada semua situs. Setiap pertanyaan seharusnya memiliki tujuan yang jelas. Mengurangi data yang tidak diperlukan mempersingkat pekerjaan pengunjung sekaligus membatasi informasi yang harus dikelola. Jangan menambahkan nomor identitas hanya karena contoh formulir lain memilikinya.
Label menjelaskan pertanyaan yang diajukan
Label memberi tahu tujuan sebuah kontrol. Pada HTML, label dapat dihubungkan melalui atribut for yang cocok dengan id kontrol. Hubungan juga dapat dibuat dengan membungkus kontrol di dalam label. Yang penting, pasangan tersebut tidak sekadar berdekatan secara visual. Pengguna teknologi bantu membutuhkan hubungan yang dapat dikenali program ketika mereka berpindah dari satu bidang ke bidang berikutnya.
Placeholder bukan pengganti label yang baik. Teks contoh di dalam bidang biasanya menghilang saat pengguna mengetik sehingga pertanyaan awal tidak lagi terlihat. Placeholder dapat membantu menunjukkan contoh singkat, tetapi instruksi penting sebaiknya tetap tersedia. Pastikan contoh tidak dianggap sebagai nilai yang sudah diisi dan jangan memakai teks samar yang sulit dibaca pada latar formulir.
Petunjuk berbeda dari nama bidang
Nama bidang menjawab informasi apa yang diminta, sedangkan petunjuk menjelaskan cara mengisinya. Misalnya, kolom pesan dapat mempunyai instruksi untuk menyertakan tautan artikel ketika melaporkan koreksi. Letakkan petunjuk dekat kontrol dan hubungkan secara aksesibel bila diperlukan. Tidak semua informasi harus dimasukkan ke label panjang karena hal itu dapat menyulitkan pemindaian formulir secara keseluruhan.
Kontrol menentukan bentuk interaksi
Input teks cocok untuk jawaban singkat, textarea untuk pesan panjang, dan pilihan terbatas dapat memakai select atau kelompok radio. Pemilihan kontrol bergantung pada bentuk jawaban, bukan hanya tampilan yang mudah dibuat. Untuk alamat email, tipe input yang sesuai membantu browser menyediakan pemeriksaan format awal serta pengalaman keyboard yang lebih relevan pada sebagian perangkat seluler.
Nama atribut pengiriman juga penting. Sebuah kontrol dapat terlihat dan menerima teks, tetapi tidak terkirim sebagaimana diharapkan jika konfigurasi form salah. Pada pengiriman melalui JavaScript, pengembang perlu memastikan data yang dibaca sesuai bidang yang ditampilkan. Jangan menganggap seluruh nilai otomatis masuk ke server hanya karena pengguna melihat tombol kirim dan berhasil menekannya pada halaman.
Validasi membantu, tetapi bukan batas keamanan
Browser dapat memeriksa bidang wajib, panjang, dan bentuk tertentu sebelum pengiriman. Pemeriksaan ini mempercepat umpan balik untuk kesalahan umum. Namun, pengguna dapat melewati aturan sisi klien atau mengirim permintaan dengan alat lain. Server tetap harus memvalidasi data yang diterimanya. Aturan browser adalah bantuan pengalaman pengguna, bukan pengganti pengamanan pada endpoint penerima dan proses penyimpanannya.
Validasi sebaiknya mengikuti kebutuhan nyata. Format yang terlalu sempit dapat menolak nama, alamat, atau nomor yang sebenarnya sah. Hindari aturan berdasarkan satu contoh lokal tanpa memikirkan variasi pengguna. Untuk email, pemeriksaan bentuk tidak membuktikan alamat dimiliki pengirim atau dapat menerima pesan. Jika kepemilikan diperlukan, aplikasi membutuhkan alur verifikasi yang berbeda dari sekadar mengecek karakter.
Kapan pesan kesalahan ditampilkan?
Kesalahan dapat diberitahukan setelah pengiriman atau setelah pengguna selesai mengisi bidang. Menampilkan peringatan pada setiap karakter sering mengganggu ketika jawaban memang belum lengkap. Pilih waktu yang memberi kesempatan untuk memperbaiki tanpa menutupi pekerjaan. Apa pun polanya, pesan harus menjelaskan bidang bermasalah dan tindakan yang dibutuhkan, bukan hanya menampilkan ikon merah tanpa informasi tambahan.
Pengiriman belum tentu berarti penerimaan
Tombol yang berubah menjadi memuat menandakan proses sedang berlangsung, bukan keberhasilan. Aplikasi perlu membaca respons layanan dan membedakan data ditolak, koneksi gagal, serta permintaan berhasil diterima. Pesan sukses harus sesuai bukti yang tersedia. Jangan menampilkan pesan terkirim hanya karena fungsi klik berjalan atau jendela aplikasi email diminta terbuka dari halaman kontak tersebut.
Jika formulir memakai mailto, jelaskan bahwa pengguna masih harus mengirim pesan melalui aplikasi email. Jika server mengantrekan email, penerimaan antrean tidak selalu berarti pesan sudah masuk ke kotak tujuan. Bahasa status yang tepat mengurangi kebingungan tanpa harus menjelaskan semua detail infrastruktur. Sediakan jalur alternatif ketika tindakan utama gagal, misalnya alamat kontak yang dapat disalin pengguna.
Nilai formulir dari alur lengkap
Periksa formulir kosong, jawaban sah, kesalahan format, koneksi lambat, dan kegagalan layanan. Gunakan keyboard dan layar sempit agar masalah bukan hanya dinilai dari desktop. Formulir yang baik menghubungkan pertanyaan, cara menjawab, pemeriksaan, serta hasil tindakan dalam alur yang jelas. Keindahan visual membantu, tetapi tidak dapat menggantikan kejelasan fungsi dan kejujuran status yang diberikan kepada pengunjung.
Jangan lupakan tindakan setelah kesalahan
Pesan seharusnya membantu pengguna melanjutkan tugas. Jika email tidak valid, tunjukkan bidangnya dan jelaskan bentuk yang diperlukan tanpa menyalahkan pengisi. Jika layanan tidak tersedia, jangan meminta mengganti alamat email karena masalahnya bukan pada jawaban pengguna. Membedakan penyebab memberi kesempatan memilih tindakan berikutnya yang masuk akal.
Periksa pula apakah jawaban tetap tersedia setelah kegagalan. Pengunjung yang sudah menulis penjelasan panjang tidak seharusnya kehilangan seluruh teks karena satu bidang perlu dikoreksi. Pemulihan merupakan bagian desain formulir, bukan tambahan.
