Placeholder adalah teks redup yang muncul di dalam kolom isian yang masih kosong — misalnya “contoh: [email protected] ” — lalu hilang begitu pengguna mulai mengetik. Ia berguna, tapi berbatas. Kesalahpahaman terbesar di web modern justru lahir dari atribut kecil ini: placeholder diperlakukan sebagai pengganti label.

Kita bedah dulu posisinya yang benar, lalu pola salah yang wajib dihindari.

Posisi yang Benar: Pendamping Label #

Placeholder paling sehat dipakai sebagai contoh format — pelengkap di samping label, bukan pesaingnya:

html 
<label for="email">Alamat email</label>
<input type="email" id="email" name="email" placeholder="contoh: [email protected]">

<label for="telepon">Nomor telepon</label>
<input type="tel" id="telepon" name="telepon" placeholder="contoh: 0812-3456-7890">

Hasil Render:

Mari kita telaah kode di atas:

  1. <label> tetap memimpin: nama kolom permanen terlihat di atas — tidak hilang saat mengetik, tidak tergantung warna kontras.
  2. placeholder menunjukkan bentuk isian: “contoh: [email protected] ” menjelaskan format yang diharapkan tanpa menyamarkan nama kolom.
  3. Kata “contoh:” di awal: menegaskan bahwa teks itu ilustrasi, bukan isian yang tinggal dilanjutkan mengetik.

Anti-Pola: Placeholder Menjadi Label #

Form berikut terlihat rapi sekilas — semua kolomnya ada petunjuknya — padahal setengah informasinya menguap begitu pengguna mengetik:

html 
<form action="/daftar" method="post">
  <input type="email" name="email" placeholder="Alamat email">
  <input type="tel" name="telepon" placeholder="Nomor telepon">
  <input type="text" name="kota" placeholder="Kota asal">
  <button type="submit">Daftar</button>
</form>

Blok ini ditandai lint="off" karena sengaja menampilkan pola yang keliru untuk dibedah. Tiga masalahnya nyata:

  1. Petunjuk hilang saat paling dibutuhkan: begitu pengguna mengetik di kolom pertama lalu menoleh ke kolom kedua, placeholder kolom pertama sudah tergantikan — pengguna yang ingin memeriksa ulang format kehilangan pegangan.
  2. Kontras rendah: teks placeholder sengaja dibuat redup oleh browser, dan sering kali lebih redup dari yang direkomendasikan untuk teks baca.
  3. Dibaca sebagai label oleh sebagian pembaca layar: sebagian kombinasi alat bantu mengumumkan placeholder sebagai nama kolom — dan saat placeholder sama untuk banyak kolom, semua kolom terdengar bernama sama.

Placeholder Tidak Pernah Terkirim #

Placeholder murni tampilan. Kontrol di atas yang dibiarkan kosong mengirim email= (nilai kosong) ke server — teks “contoh: [email protected] ” tidak pernah ikut sebagai nilai, apa pun yang terjadi. Ia juga tidak dihitung sebagai isi oleh validasi required: kolom ber-placeholder tetap dianggap kosong selama pengguna tidak mengetik apa pun.

Ringkasan #

  • Placeholder = contoh isian sementara; label = nama permanen kontrol.
  • Contoh terbaik pemakaian: menunjukkan format (“contoh: [email protected] ”, “DD/MM/YYYY”).
  • Placeholder tidak pernah dikirim sebagai nilai dan tidak memenuhi required.
  • Form tanpa label alias semua petunjuk ber-placeholder adalah pola yang wajib dihindari.