Tidak semua data yang dikirim form berasal dari pengguna. Saat mengedit profil peserta, server perlu tahu peserta mana yang diedit; saat mengirim ulang form, sistem perlu tahu konteks halamannya. Data semacam ini tidak perlu dilihat apalagi diubah pengguna — di situlah peran <input type="hidden">: tidak tampil di layar, tetap terkirim ke server.

Ia adalah kontrol form paling pendek sekaligus paling sering disalahpahami.

Tak Terlihat, Tetap Terkirim #

Form penyuntingan data peserta dengan identitas barisnya tersembunyi:

html 
<form action="/peserta/perbarui" method="post">
  <input type="hidden" name="id" value="42">

  <label for="nama">Nama peserta</label>
  <input type="text" id="nama" name="nama" value="Siti">

  <button type="submit">Simpan Perubahan</button>
</form>

Siti mengubah namanya menjadi “Siti Rahma” lalu mengirim. Data yang sampai ke server:

text 
id=42&nama=Siti Rahma

Ubah nama pada demo lalu tekan Simpan Perubahan — pasangan id=42 tetap hadir pada URL meski kotaknya tidak pernah terlihat di form. Itulah seluruh pekerjaan hidden input: mengangkut data teknis tanpa campur tangan pengguna.

Pada demo, method diganti get dan action diarahkan ke https://example.com/peserta/perbarui agar nilai yang terkirim terlihat pada URL; skrip kecil menahan perpindahan supaya URL tetap tampil. Markup kontrolnya sama persis dengan contoh di atas.

Mari kita telaah kode di atas:

  1. type="hidden" + pasangan name/value: kontrol tidak dirender apa pun di layar, tapi mengikuti semua aturan pengiriman — pasangan id=42 terkirim seperti kontrol biasa.
  2. value="42" statis: nilainya tertulis di markup, bukan hasil ketikan pengguna; server yang menuliskannya saat merender halaman (misalnya lewat templating).
  3. Kontrol terlihat tetap normal: nama berperilaku biasa — hidden input hanya menumpang satu data teknis tanpa mengubah apa pun bagi pengguna.
  4. Tanpa name, sama saja tidak ada: aturan lama tetap berlaku — kontrol hidden tanpa name tidak terkirim.

Kegunaan yang Lazim #

Tiga kebutuhan paling umum: identitas baris yang diedit (id record, seperti contoh di atas), token keamanan seperti CSRF token yang menyertai setiap pengiriman untuk membuktikan asal form, dan konteks proses — kode langkah checkout, sumber halaman, atau cap waktu yang dicantumkan sistem.

Pola umumnya selalu sama: server menaruh nilai di markup, browser mengangkutnya kembali tanpa campur tangan pengguna, server membacanya saat data tiba.

Bukan Tempat Data Sensitif #

Ringkasan #

  • input type="hidden" tidak tampil di layar namun pasangan name/value-nya terkirim seperti kontrol biasa.
  • Kegunaan utamanya: identitas record, token keamanan seperti CSRF, dan konteks proses dari server.
  • Nilainya statis di markup — terlihat di page source dan bisa diubah pengguna, jadi server wajib memverifikasi ulang.
  • Hidden input mengangkut data teknis; ia bukan tempat menyembunyikan data sensitif.