Pengenalan Form

Sejauh ini halaman yang kita tulis bersifat satu arah: kita menyajikan teks, gambar, dan tabel, lalu pengguna cukup membaca. Banyak kebutuhan nyata bekerja dua arah — pengguna perlu mencari menu, masuk ke akun, mendaftar kelas kopi, atau mengirim pesan. HTML menyediakan satu mekanisme pusat untuk semuanya: form.

Chapter ini memperkenalkan form sebagai jembatan data dari pengguna ke server: anatomi dasarnya, alur perjalanan datanya, dan demo yang bisa langsung dicoba di halaman ini.

Form sebagai Jembatan Data #

Aturannya ringkas: form adalah kumpulan kontrol masukan yang datanya dikirim bersama-sama ke server untuk diproses. Mekanismenya berjalan dalam empat tahap:

1. Pengguna mengisi kontrol — mengetik teks, memilih tanggal, mencentang kotak.
2. Pengguna menekan tombol submit.
3. Browser mengumpulkan setiap kontrol yang punya atribut name, lalu membentuk pasangan name=value.
4. Pasangan itu dikirim ke alamat tujuan; server memprosesnya dan mengirim respons.

Server bisa dibangun dengan PHP, Node.js, atau teknologi lain — dari sisi HTML semuanya menerima pasangan name=value yang sama. Selama kita memahami apa yang dikirim, sisanya menjadi urusan sisi server.

Anatomi Dasar #

Empat komponen membentuk hampir setiap form yang kita tulis:

Contoh pendaftaran kelas kopi paling ringkas — keempat komponen bekerja bersama:

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

Mari kita telaah kode di atas:

1. Baris 1 (<form ...>): wadah — action menentukan URL tujuan data, method menentukan cara pengirimannya; keduanya dibahas tuntas pada chapter Action dan Method.
2. Baris 2–3 (label dan input): pasangan nama dan kotak isian — for="nama" pada label menautkan ke id="nama" pada input.
3. Baris 3 (name="nama"): kunci data — nama yang diketik pengguna terkirim sebagai pasangan nama=Dewi.
4. Baris 5 (type="email"): tipe input mengubah perilaku — alamat email mendapat validasi format bawaan browser.
5. Baris 6 (type="submit"): tombol pemicu — menekannya membuat browser mengumpulkan dan mengirim seluruh data form.

Mencoba Form Langsung #

Demo berikut memakai struktur yang sama dengan contoh di atas. Isi nama dan email, lalu tekan tombolnya:

Perilaku sungguhan tombol submit adalah menavigasi ke URL pada action. Demo di atas tidak berpindah halaman karena skrip kecil memanggil preventDefault() pada event submit, lalu membaca kedua nilai dan menampilkannya sebagai ringkasan — persis pasangan name=value yang akan diterima server. Di halaman produksi tanpa skrip, data mengalir apa adanya menuju alamat tujuan.

Ringkasan #

• Form adalah jembatan dua arah antara pengguna dan server; alurnya: isi → submit → pasangan name=value → server memproses.
• Empat komponen inti: form (wadah), label (nama), input (nilai), button (pemicu).
• Atribut name menjadi kunci data; nilai diambil dari isi pengguna.
• Validasi format seperti type="email" sudah bekerja tanpa satu baris JavaScript.

Chapter berikutnya membuka peralatan itu satu per satu, dimulai dari wadahnya: elemen form.