Semua kontrol yang kita bahas di section ini — input, textarea, select, button — pada akhirnya menempel pada satu wadah: elemen form. Wadah inilah yang menentukan ke mana data pergi dan bagaimana cara pengirimannya. Kontrol yang ditulis di luar form tidak ikut serta dalam pengiriman data.

Chapter ini mengupas peran form sebagai wadah, aturan pemakaian lebih dari satu form dalam satu halaman, dan satu larangan keras: form tidak boleh bersarang.

Form sebagai Wadah #

Aturannya: seluruh kontrol masukan yang saling berhubungan ditempatkan di antara tag pembuka dan tag penutup form. Dua atribut inti melekat pada wadah ini — action (URL tujuan data) dan method (cara pengiriman) — dan keduanya dibahas tuntas pada chapter Action dan Method.

Mekanismenya: saat tombol submit ditekan, browser memindai kontrol di dalam wadah, mengumpulkan nilai yang punya name, lalu mengirimkannya sesuai action dan method. Dari sini terlihat bahwa form bukan sekadar blok visual — elemen ini memegang peran pengiriman data, bukan sekadar mengelilingi kontrol dengan garis atau warna latar.

Kerangka paling ringkas:

html 
<form action="/daftar-kelas" method="post">
  <label for="nama">Nama peserta</label>
  <input type="text" id="nama" name="nama">
  <button type="submit">Daftar</button>
</form>

Hasil Render:

  • Satu kotak isian bertuliskan label “Nama peserta” di atasnya.
  • Satu tombol “Daftar” yang siap ditekan.

Mari kita telaah kode di atas:

  1. Baris 1 (<form ...>): wadah — action="/daftar-kelas" dan method="post" hanya berlaku untuk kontrol di dalam elemen ini.
  2. Baris 2–3 (label dan input): kontrol ditulis berada di dalam wadah — keduanya ikut terkirim saat tombol ditekan.
  3. Baris 4 (type="submit"): tombol juga berada di dalam — penempatan ini membuat tombol memicu pengiriman form yang memuatnya.

Lebih dari Satu Form per Halaman #

Satu halaman boleh memuat beberapa form. Halaman depan Kedai Kopi Siti bisa saja memuat form pencarian di atas dan form buletin di bawah; masing-masing punya action dan method sendiri. Saat tombol salah satu form ditekan, hanya kontrol di dalam form itu yang ikut terkirim — form lain tidak tersentuh.

html 
<form action="/cari" method="get">
  <label for="kata">Cari menu</label>
  <input type="search" id="kata" name="kata">
  <button type="submit">Cari</button>
</form>

<form action="/buletin" method="post">
  <label for="surel">Email buletin</label>
  <input type="email" id="surel" name="surel">
  <button type="submit">Berlangganan</button>
</form>

Mari kita telaah kode di atas:

  1. Baris 1–5 (form pencarian): mengirim kata kunci dengan get — pasangan kata=... ditempel ke URL /cari.
  2. Baris 7–11 (form buletin): mengirim alamat email dengan post ke /buletin — dua form ini tidak saling mencampur data.
  3. Kedua tombol: masing-masing hanya mengirim form miliknya — tombol “Cari” tidak pernah menyertakan field email.

Form Tidak Boleh Bersarang #

Membuka form baru di dalam form yang sedang terbuka adalah markup yang tidak sah. Browser menolaknya dengan cara yang mengejutkan: tag pembuka kedua diabaikan, dan tag penutup pertama yang ditemui menutup form terluar — struktur akhirnya berbeda dari yang kita tulis.

html 
<form action="/a" method="post">
  <label for="x">Data A</label>
  <input type="text" id="x" name="x">
  <form action="/b" method="post">
    <label for="y">Data B</label>
    <input type="text" id="y" name="y">
  </form>
</form>

Satu catatan penutup tentang makna wadah ini: form bukan alat tata letak. Membungkus separuh halaman dengan form hanya demi memberi bingkai visual berarti memasang tombol submit dan alur pengiriman pada tempat yang tidak membutuhkannya — penataan visual adalah pekerjaan CSS.

Ringkasan #

  • form adalah wadah seluruh kontrol; hanya kontrol di dalamnya yang ikut terkirim.
  • Dua atribut inti form adalah action dan method; keduanya diatur per form.
  • Satu halaman boleh memuat banyak form yang saling mandiri.
  • form tidak boleh bersarang — pecah menjadi form berdampingan bila tujuan pengiriman berbeda.

Chapter berikutnya mengupas dua atribut inti wadah ini secara mendalam: action dan method.