Name, Value, dan Form Data

Ketika tombol submit ditekan, browser tidak mengirim halaman form yang kita lihat; browser menyusun daftar pasangan name=value dari kontrol-kontrol di dalamnya. Daftar itulah yang benar-benar berpindah ke server, ditulis sebagai query string pada GET atau body request pada POST. Memahami cara daftar ini tersusun membuat kita mampu memprediksi data yang masuk sebelum satu baris kode server ditulis. Chapter ini menutup section Forms sekaligus membedah jebakan paling umum: kontrol yang tidak ikut terkirim.

Name sebagai Kunci Data #

Setiap kontrol yang ikut terkirim harus memiliki atribut name, karena atribut inilah kunci pasangan datanya. Kontrol tanpa name tidak dikirim sama sekali, betapapun pengunjung telah mengisinya; kesalahan ini yang paling sering membuat data form “hilang” di server. Jangan tertukar antara name dan id: id dipakai untuk menghubungkan label serta menjadi sasaran CSS dan JavaScript, sedangkan name dipakai saat pengiriman. Beberapa kontrol juga boleh berbagi name yang sama, dan perilakunya kita lihat pada radio serta checkbox.

Value sebagai Nilai yang Dikirim #

Pasangan name=value memuat atribut value atau isi terkini kontrol. Untuk input type="text" dan email, nilainya adalah teks yang diketik pengunjung, dan atribut value awal hanya berlaku bila kotak tidak diubah. Untuk checkbox, radio, dan option, nilai terkirim berasal dari atribut value yang kita tuliskan di markup, bukan dari teks yang tampak di layar. Inilah alasan teks tampilan boleh panjang dan deskriptif, sementara nilai terkirim tetap singkat dan konsisten.

Cara Kontrol Menyusun Data #

Setiap jenis kontrol menyumbang pasangan data dengan caranya masing-masing:

• Kotak teks dan textarea: nilai terkirim adalah isi yang diketik pengunjung saat itu.
• Checkbox: hanya yang tercentang yang terkirim; tanpa atribut value, nilainya menjadi on.
• Radio: satu grup berbagi name yang sama; hanya pilihan terpilih yang menyumbang satu pasangan.
• Select: pasangan berasal dari option terpilih; bila option tidak punya value, teks option dipakai.
• Select multiple atau beberapa checkbox dengan name sama: terkirim sebagai beberapa pasangan dengan kunci yang sama.
• Tombol submit yang diberi name: pasangannya ikut terkirim, tetapi hanya dari tombol yang benar-benar menekan pengiriman.

Tabel Kontrol dan Data Terkirim #

Tabel berikut merangkum hubungan kontrol dengan data yang sampai di server:

Contoh: Membaca Data Terkirim dari URL #

File berikut memuat form pencarian katalog dengan empat jenis kontrol. Simpan sebagai contoh-form-data.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>Pencarian Katalog</title>
</head>
<body>
  <h1>Pencarian Katalog Kedai</h1>
  <form action="www.example.com/cari" method="get">
    <p>
      <label for="kata">Kata kunci</label><br>
      <input type="text" id="kata" name="kata">
    </p>
    <p>
      <label for="kategori">Kategori</label><br>
      <select id="kategori" name="kategori">
        <option value="makanan">Makanan</option>
        <option value="minuman">Minuman</option>
      </select>
    </p>
    <p>
      <input type="radio" id="urut-murah" name="urut" value="murah">
      <label for="urut-murah">Harga termurah</label><br>
      <input type="radio" id="urut-baru" name="urut" value="baru">
      <label for="urut-baru">Terbaru</label>
    </p>
    <p>
      <input type="checkbox" id="stok" name="stok" value="ya">
      <label for="stok">Hanya yang tersedia</label>
    </p>
    <p><button type="submit">Cari</button></p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Budi mengetik "soto ayam", memilih kategori Makanan, memilih radio
"Harga termurah", dan mencentang kotak stok. Setelah tombol Cari ditekan,
bilah alamat menampilkan:

www.example.com/cari?kata=soto+ayam&kategori=makanan&urut=murah&stok=ya

Mari kita telaah bagaimana setiap kontrol menyumbang pasangan di atas:

1. Baris 13 (input name="kata"): teks “soto ayam” mengandung spasi, sehingga disandikan menjadi soto+ayam pada query string.
2. Baris 17-20 (select name="kategori"): option terpilih menyumbang kategori=makanan, diambil dari atribut value, bukan dari teks “Makanan”.
3. Baris 23-26 (grup radio name="urut"): hanya radio terpilih yang terkirim, menghasilkan urut=murah.
4. Baris 29 (checkbox name="stok"): karena tercentang dan membawa value="ya", muncul pasangan stok=ya; tanpa atribut value, pasangannya menjadi stok=on.
5. Baris 32 (button): tombol ini tidak membawa name, sehingga tidak menyumbang pasangan data apa pun.

Dengan memahami susunan data form, section Forms tuntas dengan fondasi yang lengkap: struktur, kontrol, pengelompokan, pengiriman, hingga isi datanya. Section berikutnya, Form Validation, membahas cara browser memeriksa kelengkapan dan format data sebelum dikirim, dimulai dari atribut required dan placeholder.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen form
• WHATWG — HTML Living Standard: Forms
• 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>Pencarian Katalog</title>
</head>
<body>
  <h1>Pencarian Katalog Kedai</h1>
  <form action="www.example.com/cari" method="get">
    <p>
      <label for="kata">Kata kunci</label><br>
      <input type="text" id="kata" name="kata">
    </p>
    <p>
      <label for="kategori">Kategori</label><br>
      <select id="kategori" name="kategori">
        <option value="makanan">Makanan</option>
        <option value="minuman">Minuman</option>
      </select>
    </p>
    <p>
      <input type="radio" id="urut-murah" name="urut" value="murah">
      <label for="urut-murah">Harga termurah</label><br>
      <input type="radio" id="urut-baru" name="urut" value="baru">
      <label for="urut-baru">Terbaru</label>
    </p>
    <p>
      <input type="checkbox" id="stok" name="stok" value="ya">
      <label for="stok">Hanya yang tersedia</label>
    </p>
    <p><button type="submit">Cari</button></p>
  </form>
</body>
</html>