Struktur Form

Selama course ini kita membangun halaman yang menyajikan: teks, link, gambar, tabel, hingga struktur semantik. Seluruh halaman tersebut bekerja satu arah — halaman menampilkan, pengunjung membaca. Begitu sebuah situs meminta nama pengguna untuk login, alamat untuk pengiriman, atau pertanyaan untuk kotak saran, kita membutuhkan mekanisme penerimaan data. HTML menyediakan elemen form sebagai wadah seluruh kontrol masukan, dan chapter ini membedah anatomi serta perilaku dasarnya.

Mengapa Form Berbeda dari Elemen Lain #

Elemen yang kita pelajari sejauh ini — p, table, img, article — berperan menyajikan konten, dan tanggung jawab mereka berakhir pada tampilan. Elemen form memikul peran tambahan: mengumpulkan nilai dari kontrol yang berada di dalamnya, lalu mengirimkan kumpulan nilai tersebut ketika form dikirim (submit). Perbedaan peran ini menjadikan form satu-satunya elemen HTML yang mengubah halaman dari pembaca informasi menjadi penerima masukan.

Di balik layar, saat pengunjung mengaktifkan pengiriman, browser menghimpun pasangan name dan value dari setiap kontrol ber-nama, kemudian mengirimnya ke penerima yang dituju. Mekanisme lengkap pengiriman — atribut action, atribut method, dan bentuk data yang dihasilkan — kita bahas tuntas pada chapter Form Action dan Method. Untuk saat ini, fokus kita adalah wadah dan isinya.

Anatomi Form Minimal #

Bentuk form paling kecil hanya membutuhkan elemen form dan satu kontrol di dalamnya:

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

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Satu kolom isian satu baris
  - Teks "Kota" sebagai label di sisi kiri kolom isian
  - Tanpa tombol, karena form ini belum memiliki kontrol kirim

Mari kita telaah peran setiap baris kode di atas:

1. Baris 1 (<form>): wadah yang memberi tahu browser bahwa elemen di dalamnya adalah kontrol form yang nilainya dikumpulkan saat pengiriman.
2. Baris 2 (label): teks petunjuk yang menjelaskan kontrol; pasangan for dan id mengikat label ke kontrol tersebut.
3. Baris 3 (input type="text"): kontrol isian satu baris — kontrol form pertama kita.
4. Atribut name: identitas data kontrol; nilai yang diisi pengunjung berpasangan dengan nama ini saat form dikirim.

Contoh: Form Login Mini #

Toko Budi membutuhkan halaman masuk akun sederhana. Simpan file berikut sebagai form-login-sederhana.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>Form Login Mini</title>
</head>
<body>
  <h1>Masuk ke Akun Toko Budi</h1>
  <form>
    <p>
      <label for="username">Nama pengguna</label>
      <input type="text" id="username" name="username">
    </p>
    <p>
      <label for="sandi">Kata sandi</label>
      <input type="password" id="sandi" name="sandi">
    </p>
    <p>
      <input type="submit" value="Masuk">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Masuk ke Akun Toko Budi" di atas form
  - Kolom isian "Nama pengguna" dan kolom "Kata sandi"
    dengan karakter yang disembunyikan
  - Tombol "Masuk" di bagian bawah

Berikut peran setiap bagian kode:

1. Baris 9 (h1): judul halaman yang menjelaskan tujuan form.
2. Baris 10 (form): wadah yang membungkus seluruh kontrol login.
3. Baris 12-13: pasangan label dan input type="text" pertama; label menyebut username melalui atribut for, dan input menjawab dengan id yang sama.
4. Baris 16-17: pasangan kedua dengan input type="password", yaitu kontrol yang menyembunyikan karakter ketikan; jenis input ini kita bahas pada chapter Text dan Password Input.
5. Baris 20 (input type="submit"): kontrol yang dirender sebagai tombol; saat diaktifkan, tombol ini memicu pengiriman form. Keluarga tombol kita bedah khusus pada chapter Button.

Apa yang Terjadi Saat Form Dikirim #

Ketika tombol kirim diaktifkan, browser menjalankan dua pekerjaan secara berurutan. Pertama, browser menghimpun data: setiap kontrol ber-nama menyumbangkan pasangan name dan value miliknya. Kedua, browser mengirimkan paket data tersebut ke tujuan yang ditetapkan form, kemudian merespons hasilnya — biasanya dengan memuat halaman baru.

Dua atribut form yang mengatur proses ini adalah action (ke mana data dikirim) dan method (bagaimana data dikirim). Keduanya cukup panjang untuk dibahas sendiri, sehingga kita tunda sampai chapter Form Action dan Method. Chapter berikutnya memperdalam pasangan yang tampil di setiap form: label dan input.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen form
• MDN Web Docs — Learn: Web forms
• WHATWG — HTML Living Standard: Forms

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Login Mini</title>
</head>
<body>
  <h1>Masuk ke Akun Toko Budi</h1>
  <form>
    <p>
      <label for="username">Nama pengguna</label>
      <input type="text" id="username" name="username">
    </p>
    <p>
      <label for="sandi">Kata sandi</label>
      <input type="password" id="sandi" name="sandi">
    </p>
    <p>
      <input type="submit" value="Masuk">
    </p>
  </form>
</body>
</html>