Dua puluh dua chapter sebelumnya membangun potongan demi potongan: form dan method, puluhan type input, label, name, fieldset, autocomplete, sampai alur pengiriman. Chapter penutup section ini merangkai semuanya menjadi satu markup nyata — form pendaftaran kelas kopi untuk kedai milik Siti — lengkap dengan demo yang bisa dicoba langsung di halaman ini, supaya terlihat bagaimana pola-pola kecil saling menopang dalam satu dokumen utuh.

Rencana Form #

Sebelum menulis markup, kita cocokkan kebutuhan dengan alat. Identitas peserta membutuhkan tiga kolom: nama, email, telepon. Pilihan kelas memuat dua keputusan: tingkat (radio, karena satu pilihan) dan jadwal (select, karena daftar tetap), plus satu checkbox opsional untuk penyewaan peralatan. Catatan bebas diakhiri textarea. Data pendaftaran tidak pantas menempel di URL, jadi method-nya post.

Markup Lengkap #

html 
<form action="/daftar-kelas" method="post">
  <fieldset>
    <legend>Identitas peserta</legend>

    <label for="nama">Nama lengkap</label>
    <input type="text" id="nama" name="nama" autocomplete="name" required>

    <label for="email">Alamat email</label>
    <input type="email" id="email" name="email" autocomplete="email" required>

    <label for="telepon">Nomor WhatsApp</label>
    <input type="tel" id="telepon" name="telepon" autocomplete="tel">
  </fieldset>

  <fieldset>
    <legend>Pilihan kelas</legend>

    <label>
      <input type="radio" name="tingkat" value="pemula" checked>
      Pemula — pengenalan biji dan alat
    </label>
    <label>
      <input type="radio" name="tingkat" value="menengah">
      Menengah — teknik seduh manual
    </label>

    <label for="jadwal">Jadwal yang dipilih</label>
    <select id="jadwal" name="jadwal">
      <option value="sabtu-pagi">Sabtu, 09.00–11.00</option>
      <option value="selasa-malam">Selasa, 19.00–21.00</option>
    </select>

    <label>
      <input type="checkbox" name="peralatan" value="sewa">
      Sewa peralatan seduh (+Rp50.000)
    </label>
  </fieldset>

  <label for="catatan">Catatan untuk pengajar</label>
  <textarea id="catatan" name="catatan" rows="4" placeholder="contoh: saya tertarik latte art"></textarea>

  <button type="submit">Daftar Kelas Kopi</button>
</form>

Hasil Render secara naratif: dua kotak bertajuk “Identitas peserta” dan “Pilihan kelas”, masing-masing berisi kolom-kolomnya, lalu area teks catatan dan satu tombol besar di bawah.

Mari kita telaah kode per blok:

  1. <form action="/daftar-kelas" method="post">: satu wadah, satu tujuan, data pendaftaran di badan permintaan — bukan di URL.
  2. <fieldset> Identitas peserta: tiga kolom identitas berlabel for/id, dengan autocomplete="name", email, dan tel agar browser menawarkan isian; required pada nama dan email menjaga dua data inti.
  3. type="email" dan type="tel": keyboard ponsel menyesuaikan — muncul papan ketik email dan nomor — dan validasi format email aktif tanpa JavaScript.
  4. <fieldset> Pilihan kelas dengan radio name="tingkat": dua radio segrup lewat name sama; checked pada pemula menjadikan pilihan awal yang sah; label bungkus membuat seluruh baris bisa diklik.
  5. <select id="jadwal" name="jadwal">: nilai terkirim dari value tiap option, teks panjang di layar tetap nyaman dibaca.
  6. Checkbox name="peralatan": opsional — selama tidak dicentang, pasangan ini tidak terkirim sama sekali.
  7. <textarea id="catatan" name="catatan" rows="4">: catatan opsional dengan placeholder contoh — label tetap memimpin, placeholder hanya menunjukkan gaya isian.
  8. <button type="submit">: satu tombol penutup, type-nya eksplisit sesuai kebiasaan dari chapter Button.

Demo: Lihat Data yang Terkirim #

Demo berikut memakai markup yang sama (tanpa required, supaya kita bisa mengirim form setengah isi dan tetap melihat hasilnya). Isi beberapa kolom lalu tekan tombolnya — ringkasan pasangan yang akan dikirim server tampil di bawah form:

Perhatikan dua perilaku alami form di demo itu: kolom yang dibiarkan kosong tetap terkirim sebagai pasangan bernilai kosong, sementara peralatan tidak hadir sampai dicentang — persis aturan successful controls dari chapter Form Submission. Skrip demo membaca pasangan yang sama persis dengan yang dibaca browser; server menerimanya sebagai satu baris name=value yang dipisah &.

Data yang Akan Terkirim #

Untuk isian contoh — Dewi mendaftar kelas menengah, jadwal Sabtu, tanpa menyewa peralatan — server menerima pasangan berikut:

text 
nama=Dewi Lestari
[email protected]
telepon=
tingkat=menengah
jadwal=sabtu-pagi
catatan=Mohon kursi dekat jendela

Tiap baris adalah hasil keputusan markup: tingkat=menengah lahir dari name sama pada grup radio, jadwal=sabtu-pagi dari value option terpilih, dan telepon= tetap hadir meski kosong karena kontrolnya punya name.

Checklist: Delapan Tanda Form Sehat #

  1. Satu elemen form sebagai wadah, dengan action jelas dan method="post" untuk data pendaftaran.
  2. Setiap kontrol berlabel — for/id atau pola bungkus.
  3. Setiap kontrol yang datanya dibutuhkan punya name.
  4. Grup radio memakai name sama dan dibingkai fieldset + legend.
  5. type input dipilih dari kebutuhan: email, tel, text, bukan text untuk semuanya.
  6. autocomplete terpasang pada semua kontrol identitas.
  7. Tombol submit ditulis dengan type="submit" eksplisit.
  8. Field wajib diberi required — strategi validasinya kita lanjutkan di Section Form Validation.

Ringkasan #

  • Form utuh adalah gabungan pola kecil: wadah form, label, name, fieldset/legend, type tepat, autocomplete, dan tombol yang benar.
  • Data terkirim selalu berupa daftar pasangan name=value; kontrol tidak aktif tidak ikut.
  • Delapan butir checklist di atas layak dipakai memeriksa form apa pun sebelum diterbitkan.
  • Langkah berikutnya: menghidupkan aturan pengisian dengan required, pattern, dan kawan-kawannya di Section Form Validation.