Required dan Placeholder

Setelah section Forms tuntas, kita mampu menyusun form lengkap dengan label, beragam input, hingga action dan method. Sayangnya, form yang tampak rapi masih bisa dikirim dalam keadaan kosong: browser tetap memproses tombol Kirim bila tidak ada aturan yang kita pasang. Section Form Validation mengisi celah tersebut, dan Chapter ini membuka seri dengan dua atribut dasar: required untuk menandai kolom wajib isi dan placeholder untuk memberi petunjuk format. Keduanya sering muncul berdampingan pada satu kolom, meski tugasnya berbeda.

Menandai Kolom Wajib dengan required #

required adalah boolean attribute — atribut yang cukup ditulis dengan namanya saja tanpa nilai. Bila sebuah kontrol form membawa atribut ini, pengunjung wajib mengisinya sebelum form dapat dikirim. Browser menjalankan pemeriksaan tersebut saat tombol submit ditekan: kolom yang kosong membuat pengiriman dibatalkan, fokus pindah ke kolom itu, dan sebuah balon pesan (bubble) muncul dengan teks bawaan seperti “Please fill out this field”.

Atribut required didukung oleh hampir seluruh jenis kontrol form, dengan makna yang menyesuaikan jenisnya:

• input satu baris (text, email, number, date, dan jenis lainnya): nilai tidak boleh kosong.
• checkbox dan radio: kotak pilihan wajib dicentang.
• select: opsi terpilih tidak boleh bernilai kosong — sediakan option pertama dengan value kosong sebagai pemandu.
• textarea: teks di dalamnya tidak boleh kosong.

Pemeriksaan hanya menilai kekosongan nilai, bukan isi yang bermakna: satu karakter apa pun dianggap terisi. Penuntutan format menjadi tugas atribut lain, pattern, pada Chapter Pola Validasi.

Placeholder: Petunjuk Format di Dalam Kolom #

Atribut placeholder mendefinisikan teks yang tampil di dalam kontrol selama kontrol belum bernilai. Isinya sebaiknya petunjuk singkat tentang bentuk data yang diharapkan, misalnya pola nomor telepon. Begitu pengunjung mulai mengetik, teks placeholder hilang dan digantikan isian sungguhan.

Pilih kata placeholder yang menggambarkan format, bukan menjelaskan aturan panjang. Contoh yang lazim: 0812-3456-7890 untuk nomor telepon, nama-lengkap untuk username, atau Jl. Melati No. 10 untuk alamat. Petunjuk ringkas semacam ini membantu pengunjung tanpa menggeser peran label.

Mengapa Placeholder Tidak Menggantikan Label #

Form yang hanya mengandalkan placeholder — tanpa label — terlihat ringkas, tetapi membawa sejumlah masalah. Petunjuk di dalam kolom hilang tepat saat pengunjung mengetik, sehingga yang sedang mengoreksi isian tidak lagi melihat konteks kolomnya. Kontras teks placeholder juga umumnya rendah, dan pada kolom yang terisi otomatis oleh browser, placeholder sama sekali tidak tampil.

Pembaca layar (screen reader) umumnya menumumkan placeholder, tetapi perilaku antar pembaca layar tidak seragam. Atribut ARIA seperti aria-label dapat memberi nama pada kontrol, namun pembahasannya menunggu section Accessibility. Pola yang aman untuk kini: label yang selalu terlihat, ditambah placeholder sebagai petunjuk tambahan.

Contoh: Form Pendaftaran Kelas Memasak #

Toko Budi membuka kelas memasak akhir pekan dan menerima pendaftaran lewat web. Simpan file berikut sebagai contoh-required-placeholder.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pendaftaran Kelas Memasak</title>
</head>
<body>
  <h1>Pendaftaran Kelas Memasak</h1>
  <form action="/pendaftaran" method="post">
    <p>
      <label for="nama">Nama lengkap</label>
      <input type="text" id="nama" name="nama" required placeholder="cth: Budi Santoso">
    </p>
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required placeholder="[email protected]">
    </p>
    <p>
      <label for="telepon">Nomor WhatsApp</label>
      <input type="tel" id="telepon" name="telepon" placeholder="0812-3456-7890">
    </p>
    <p>
      <label for="catatan">Catatan alergi makanan</label>
      <textarea id="catatan" name="catatan" rows="3" placeholder="Tulis bahan yang perlu dihindari"></textarea>
    </p>
    <p>
      <input type="submit" value="Daftar">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Form dengan dua kolom wajib (Nama lengkap, Email) dan dua kolom opsional
  - Teks placeholder pudar di dalam setiap kolom yang masih kosong
  - Saat tombol "Daftar" ditekan dalam keadaan kosong, pengiriman dibatalkan,
    fokus pindah ke kolom Nama lengkap, dan bubble "Please fill out this
    field" muncul di bawah kolom tersebut

Berikut peran setiap bagian kode:

1. Baris 10 (form action="/pendaftaran" method="post"): form mengirim data dengan method POST ke alamat pendaftaran.
2. Baris 12-13 (label dan input nama): kolom nama wajib isi; label selalu tampil, sedangkan placeholder hanya mencontohkan format penulisan.
3. Baris 16-17 (input email): kolom email wajib, dan bentuk alamatnya ikut diperiksa oleh jenis input yang dipilih.
4. Baris 20-21 (input tel): kolom nomor WhatsApp bersifat opsional; placeholder tetap berguna sebagai petunjuk format tanpa membuat kolom wajib.
5. Baris 24-25 (textarea): kolom catatan opsional dengan placeholder berupa petunjuk isi.
6. Baris 28 (input submit): tombol yang memicu pemeriksaan required sebelum data dikirim.

required menjaga kolom tetap terisi, sementara banyak data juga punya syarat panjang: username minimal 4 karakter, deskripsi maksimal 200. Chapter berikutnya membahas dua atribut pengatur panjang teks, minlength dan maxlength, beserta perbedaan perilaku keduanya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Atribut required
• MDN Web Docs — Atribut placeholder
• MDN Web Docs — Elemen input
• web.dev — Learn Forms

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pendaftaran Kelas Memasak</title>
</head>
<body>
  <h1>Pendaftaran Kelas Memasak</h1>
  <form action="/pendaftaran" method="post">
    <p>
      <label for="nama">Nama lengkap</label>
      <input type="text" id="nama" name="nama" required placeholder="cth: Budi Santoso">
    </p>
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required placeholder="[email protected]">
    </p>
    <p>
      <label for="telepon">Nomor WhatsApp</label>
      <input type="tel" id="telepon" name="telepon" placeholder="0812-3456-7890">
    </p>
    <p>
      <label for="catatan">Catatan alergi makanan</label>
      <textarea id="catatan" name="catatan" rows="3" placeholder="Tulis bahan yang perlu dihindari"></textarea>
    </p>
    <p>
      <input type="submit" value="Daftar">
    </p>
  </form>
</body>
</html>