Name dan Value

Saat form dikirim, browser tidak mengirim “form utuh” — ia mengirim daftar pasangan kecil name=value, satu per kontrol yang berhasil diisi. Atribut name adalah kunci pasangan itu; value adalah nilainya. Dua kata kecil ini adalah seluruh muatan data sebuah form, dan kegagalan memahaminya adalah sumber bug klasik: form terlihat benar, isian terasa terkirim, server tidak menerima apa-apa.

Kita bedah mekanismenya lewat satu form yang sengaja berisi kontrol tanpa name.

Tanpa name, Tidak Ada Data #

<form action="/daftar" method="get">
  <label for="nama">Nama</label>
  <input type="text" id="nama" name="nama" value="Siti">

  <label for="telepon">Nomor telepon</label>
  <input type="tel" id="telepon">

  <label for="kota">Kota</label>
  <input type="text" id="kota" name="kota">

  <button type="submit">Kirim</button>
</form>

Siti mengisi kolom telepon dengan “0812-3456-7890” lalu mengirim. Permintaan yang sampai ke server:

GET /daftar?nama=Siti&kota=

Isi ketiga kolom pada demo — termasuk nomor telepon — lalu tekan Kirim: URL lengkap yang diminta browser tampil di bawah form. Nomor telepon tidak pernah muncul di URL karena kontrolnya tidak punya name; ubah isi kotak dan kirim lagi untuk melihat pasangan mengikuti isian.

Skrip kecil pada demo menahan perpindahan agar URL yang diminta tetap terlihat di halaman — isinya persis seperti hasil GET di atas; pada halaman sungguhan tanpa skrip, browser membuka alamat itu apa adanya.

Mari kita telaah hasilnya:

1. nama=Siti terkirim: kontrol punya name="nama" dan value="Siti" — nilai awal dari atribut value ikut sebagai isi.
2. telepon tidak muncul sama sekali: kolomnya terisi “0812-3456-7890”, id-nya lengkap, tapi tanpa name kontrol ini transparan bagi proses pengiriman. Data paling sering hilang di titik ini.
3. kota= terkirim kosong: kontrol punya name, hanya tidak diisi — pasangannya tetap dikirim dengan nilai string kosong.
4. id tidak berperan dalam pengiriman: id untuk DOM — label, CSS, JavaScript. Server tidak pernah melihat id.

id dan name: Dua Dunia Berbeda #

Kedua atribut ini sering bernilai sama dan mudah tertukar perannya:

name Sama, Kontrol Banyak #

Untuk radio button, name yang sama justru syarat: kontrol-kontrol name="ukuran" membentuk satu grup — memilih satu otomatis melepas pilihan lain, dan yang terkirim hanya ukuran=besar dari pilihan terpilih. Di sisi server, beberapa backend juga lazim memakai pola name="topping[]" agar beberapa nilai checkbox terkumpul menjadi satu array — detail parsingnya urusan server, markup HTML-nya tetap polos.

Dua Peran value #

Atribut value memainkan dua peran bergantung jenis kontrol. Pada input teks, value adalah nilai awal yang tampil dan bisa diubah pengguna. Pada checkbox dan radio, teks yang tampil justru berasal dari label — value baru terpakai sebagai nilai yang dikirim saat kontrol terpilih. Karena itu radio di atas bernilai value="besar" meski yang tampak di layar adalah label “Besar (350 ml)”.

Ringkasan #

• Form mengirim daftar pasangan name=value; name adalah kunci wajib.
• Kontrol tanpa name tidak terkirim sama sekali; kontrol dengan name tapi kosong tetap terkirim bernilai kosong.
• id melayani DOM dan label; name melayani pengiriman — keduanya beda peran.
• name sama membentuk grup radio; pola topping[] dipakai untuk kumpulan checkbox.