Input Tersembunyi dan Tombol

Kenapa Ada Data yang Tidak Terlihat

Bayangkan kamu membeli minuman di kantin dengan kupon. Di kuponmu tertulis nama minuman, tapi di baliknya kasir membubuhkan cap nomor struk yang tidak perlu kamu baca. Nomor itu penting untuk kasir, bukan untukmu. Form HTML punya kebutuhan yang sama: kadang server butuh data tambahan yang tidak perlu dilihat atau diubah pengguna, misalnya ID produk yang sedang dibeli, ID sesi, atau token keamanan. Menampilkannya sebagai teks biasa membingungkan pengguna, menaruhnya di JavaScript merepotkan. Solusinya adalah <input type="hidden">: input yang tidak tampil di layar, tapi nilainya ikut terkirim bersama form seperti input lainnya.

Contoh 1: Hidden Paling Sederhana

<form action="/beli" method="post">
  <input type="hidden" name="produk_id" value="42" />
  <p>Jumlah: <input type="number" name="jumlah" value="1" min="1" /></p>
  <button type="submit">Beli</button>
</form>

Pengguna hanya melihat field jumlah, tapi server menerima dua data: produk_id=42 dan jumlah=3. Tanpa hidden input, server tidak tahu produk mana yang dimaksud karena halaman ini bisa dipakai untuk ratusan produk berbeda.

Contoh 2: Form Beli dengan Tiga Jenis Tombol

<form action="/beli" method="post">
  <input type="hidden" name="produk_id" value="42" />
  <input type="hidden" name="csrf_token" value="a1b2c3d4" />
  <p>Jumlah: <input type="number" name="jumlah" value="1" min="1" /></p>
  <p>
    <button type="submit">Beli Sekarang</button>
    <button type="reset">Ulangi</button>
    <button type="button" onclick="alert('Fitur favorit segera hadir!')">Favorit</button>
  </p>
</form>

Tiga tombol, tiga perilaku: submit mengirim form, reset mengembalikan semua input ke nilai awal, dan button tidak melakukan apa-apa sendiri (di sini ia menunggu perintah JavaScript). Kelebihan <button> dibanding <input type="submit">: isinya boleh HTML, bukan cuma teks polos, jadi kamu bisa menaruh ikon atau gambar di dalamnya.

Kesalahan Umum

1. Tombol tanpa type yang tidak disengaja. <button> polos di dalam form otomatis menjadi type="submit". Tombol "batal" atau "tutup" yang lupa diberi type="button" akan mengirim form secara misterius dan membingungkan pengguna.

<!-- SALAH: tombol Batal malah mengirim form -->
<button>Batal</button>

<!-- BENAR: eksplisit tidak mengirim -->
<button type="button">Batal</button>

2. Menaruh data sensitif di hidden. Hidden bukan berarti aman. Siapa pun bisa membuka DevTools, melihat value-nya, bahkan mengubahnya sebelum dikirim. Jangan pernah menaruh harga, diskon, atau hak akses di hidden input tanpa verifikasi ulang di server. Harga yang benar harus diambil dari database, bukan dari kiriman pengguna.

3. Memakai reset sembarangan. Satu klik type="reset" menghapus seluruh isian form tanpa konfirmasi. Di form panjang seperti pendaftaran, ini mimpi buruk. Kalau butuh jalan keluar, sediakan tombol "kembali" ke halaman sebelumnya, jauh lebih aman.

Catatan teknis: Token CSRF di contoh di atas adalah pola keamanan standar: server menanam token acak di hidden input, lalu memeriksa token itu saat form dikirim. Ini memastikan form benar-benar dikirim dari halamanmu, bukan dari situs jahat yang meniru. Detail implementasinya dibahas di materi backend.