Laptop menampilkan formulir pendaftaran dengan label di atas setiap kolom isian

Tips Praktis Menata Label dan Placeholder di Formulir

Kamu pernah membuka formulir pendaftaran, lalu berhenti karena bingung harus mengetik apa di kolom yang kosong? Placeholder-nya hilang begitu kamu mulai mengetik, dan tidak ada petunjuk lain di sekitarnya. Situasi seperti ini sering terjadi karena penataan label dan placeholder dikerjakan asal-asalan. Padahal keduanya punya tugas berbeda, dan menempatkannya dengan benar membuat pengisian formulir jauh lebih lancar.

Kenapa label dan placeholder tidak boleh saling menggantikan

Label menjelaskan apa isi sebuah kolom. Ia harus tetap terlihat setelah pengguna mengetik. Placeholder hanya contoh format atau petunjuk tambahan, misalnya “08xx-xxxx-xxxx” untuk nomor telepon. Ketika placeholder dipakai sebagai satu-satunya penanda isi kolom, petunjuk itu lenyap begitu kursor masuk. Pengguna yang lupa urutan pengisian harus menghapus teksnya untuk mengingat lagi.

Aturan sederhananya: setiap kolom wajib punya label yang terlihat permanen. Placeholder sifatnya opsional dan hanya untuk memperjelas format. Kalau kamu sedang merapikan elemen-elemen dasar seperti ini, ada baiknya membaca ulang daftar elemen antarmuka yang sering terlewat saat merancang aplikasi agar tidak ada bagian formulir yang tertinggal.

Posisi label di atas kolom lebih aman untuk formulir panjang

Label di sisi kiri kolom terlihat rapi, tapi mata harus bergerak bolak-balik antara label dan kotak isian. Untuk formulir dengan banyak kolom, posisi di atas lebih cepat dipindai. Pengguna membaca label, langsung mengisi, lalu lanjut ke bawah tanpa lompatan mata yang melelahkan.

Label di kiri masih masuk akal kalau formulirnya pendek dan setiap label punya panjang serupa, misalnya tiga kolom data diri. Begitu jumlah kolom bertambah, konsistensi lebar label sulit dijaga. Teks panjang akan mendorong kotak isian ke kanan, sementara teks pendek menyisakan celah kosong.

  • Formulir lebih dari lima kolom: taruh label di atas.
  • Formulir pendek dengan label seragam: label di kiri masih bisa dipakai.
  • Kolom pencarian tunggal: label visual boleh disembunyikan selama teks alternatif untuk pembaca layar tetap ada.

Placeholder yang membantu dan yang justru menyesatkan

Placeholder yang baik memberi contoh konkret. Untuk kolom tanggal lahir, tulisan “DD/MM/YYYY” membuat pengguna tahu urutan angka yang diharapkan. Placeholder yang buruk mengulang label, misalnya kolom berlabel “Email” dengan placeholder “Masukkan email Anda”. Tidak ada informasi baru, hanya tinta tambahan.

Ada satu jebakan lagi. Placeholder dengan warna abu-abu terang sering lolos dari pemeriksaan kontras karena penulis menganggapnya sekadar hiasan. Padahal teks itu tetap dibaca pengguna, jadi tetap harus memenuhi rasio kontras terhadap latar belakang. Beberapa alat pemeriksa kontras bisa dipakai untuk mengeceknya dalam hitungan detik.

Hindari juga memakai placeholder untuk petunjuk rumit seperti aturan panjang kata sandi. Petunjuk itu akan hilang saat pengguna mulai mengetik, tepat ketika ia paling membutuhkannya. Taruh aturan seperti itu di bawah kolom, bukan di dalamnya.

Menandai kolom wajib dan opsional dengan jelas

Pengguna benci mengisi formulir panjang lalu ditolak karena satu kolom terlewat. Tandai kolom yang wajib diisi, atau sebutkan secara eksplisit bahwa sisanya opsional. Pasang keterangan di awal formulir, misalnya “Kolom bertanda wajib diisi”, lalu beri penanda konsisten pada setiap kolom yang dimaksud.

Kalau semua kolom wajib kecuali satu, lebih hemat menandai yang opsional saja. Prinsipnya menandai pengecualian, bukan mayoritas. Penanda yang muncul di hampir semua kolom berhenti berfungsi sebagai pembeda.

Petunjuk pengisian di dekat kolom, bukan di atas formulir

Menjelaskan aturan di satu paragraf panjang di atas formulir membuat pengguna harus mengingat banyak hal sekaligus. Pecah petunjuknya dan letakkan sedekat mungkin dengan kolom yang bersangkutan. Kalau format nomor telepon harus pakai kode negara, tulis contohnya tepat di bawah kolom telepon.

Petunjuk yang menempel pada kolom juga memudahkan saat pengisian gagal. Pesan kesalahan yang menyebut kolom tertentu akan lebih mudah dipahami jika aturannya sudah terlihat sejak awal. Cara merumuskan pesan yang tidak menghakimi dibahas lengkap di panduan menulis pesan error yang membantu pengguna.

Menguji formulir ke pengguna sebelum dianggap selesai

Setelah label dan placeholder ditata, coba isi formulirnya sendiri dengan kecepatan normal. Jangan hanya melihat tampilannya di layar. Ketik data asli, salah ketik dengan sengaja, lalu perhatikan bagaimana tampilan kolom berubah. Cara ini cepat menemukan label yang tertutup, placeholder yang membingungkan, atau penanda wajib yang luput.

Lebih baik lagi kalau kamu meminta dua atau tiga orang mencoba mengisi tanpa dibantu. Perhatikan di kolom mana mereka berhenti, bertanya, atau menebak. Catat masalah yang muncul lalu perbaiki satu per satu. Pola ini sejalan dengan latihan yang dijelaskan di tips praktis merancang antarmuka untuk pemula.

Periksa hubungan antara label dan kolom di kode

Tampilan saja tidak cukup. Pastikan elemen label terhubung ke kolom isiannya lewat atribut yang benar. Kalau kamu memakai JavaScript untuk validasi, cek juga apakah pesan kesalahan muncul di elemen yang benar dan terbaca pembaca layar. Beberapa kesalahan umum saat menggabungkan PHP dan JavaScript di halaman web memang muncul di tahap ini, terutama saat data dari server dimuat ulang ke formulir.

<div class="field">
  <label for="telepon">Nomor telepon</label>
  <input id="telepon" name="telepon" type="tel"
         placeholder="08xx-xxxx-xxxx"
         aria-describedby="telepon-hint" required>
  <p id="telepon-hint">Gunakan nomor yang aktif untuk verifikasi.</p>
</div>

Contoh di atas menaruh label sebagai elemen terpisah, bukan placeholder. Placeholder hanya memberi contoh format, dan petunjuk tambahan dihubungkan lewat atribut agar pembaca layar membacakannya. Kalau validasi memakai jQuery, pastikan selektornya menunjuk elemen yang tepat supaya pesan kesalahan tidak nyangkut di kolom lain. Kumpulan tips debugging kode jQuery yang sering bikin error bisa jadi rujukan saat pesan validasi tidak mau muncul.

Ringkasan

Label wajib terlihat permanen, placeholder hanya pelengkap format. Letakkan label di atas kolom untuk formulir yang panjang, tandai kolom wajib secara konsisten, dan dekatkan setiap petunjuk dengan kolomnya. Setelah itu, uji formulir dengan mengisi sendiri dan minta orang lain mencobanya tanpa dibantu. Perbaikan kecil di tahap ini menghemat banyak pengisian yang gagal di kemudian hari.

Pertanyaan yang Sering Diajukan

Bolehkah hanya memakai placeholder tanpa label?

Tidak disarankan. Placeholder hilang begitu pengguna mengetik, sehingga tidak ada lagi penanda isi kolom. Untuk kolom yang sangat jelas seperti kotak pencarian tunggal, label visual bisa saja disembunyikan, asalkan label untuk pembaca layar tetap disediakan.

Apakah label harus selalu di atas kolom?

Tidak selalu. Formulir pendek dengan label pendek dan seragam masih nyaman memakai label di kiri. Begitu jumlah kolom bertambah atau panjang label tidak seragam, posisi di atas lebih mudah dipindai dan tidak membuat tata letak berantakan.

Bagaimana menandai kolom wajib dengan rapi?

Pilih satu penanda dan pakai di semua kolom yang diperlukan, misalnya tanda bintang dengan keterangan di awal formulir. Kalau hampir semua kolom wajib diisi, lebih jelas menandai sedikit kolom yang opsional saja.

Tutorial Coding