Struktur Form

Delapan isian menunggu kita, dan semuanya berangkat lewat satu elemen form. Bagian ini menulis kerangka src/index.html — head lengkap, header berisi estimasi waktu, pengantar, form dengan action dan method, serta tiga fieldset kosong — sekaligus keputusan paling menentukan proyek: ke mana data dikirim, dan dengan moda apa.

Head dan Header Halaman #

Ketik baris berikut sebagai awal src/index.html — sama persis dengan baris 1-13 berkas final:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Survei Kepuasan — Dapur Siti</title>
  <meta name="description" content="Survei kepuasan pelanggan Dapur Siti: lima menit untuk menceritakan kunjungan Anda, dari frekuensi berkunjung sampai saran perbaikan.">
</head>
<body>
  <header>
    <p><strong>Dapur Siti</strong> — warung masakan rumahan</p>
    <p><small>Survei kepuasan pelanggan, kurang lebih 5 menit</small></p>
  </header>

Mari kita bedah baris demi baris:

1. title (baris 6): jenis halaman dulu, pemiliknya kemudian — “Survei Kepuasan — Dapur Siti”. Tab browser menyebut halaman ini berbeda dari tab lain yang dibuka pengguna.
2. meta description (baris 7): ringkasan isi untuk cuplikan hasil pencarian; durasi lima menit ikut disebut sebagai janji waktu kepada calon responden.
3. Nama usaha, bukan heading (baris 11): nama warung dan jenis usahanya dibungkus p ber-strong — pola proyek sebelumnya; satu-satunya h1 disimpan untuk judul isi di main.
4. Tujuan dan estimasi waktu (baris 12): baris kedua menyebut apa yang diminta dan berapa lama — keputusan yang dibedah di bagian akhir halaman ini.

Form, Pengantar, dan Tiga Fieldset #

Sisa halaman tinggal satu main. Ketik kerangka berikut — komentar di dalam tiap fieldset penanda kerja yang diganti kontrol sungguhan mulai Bagian 2:

  <main>
    <h1>Survei Kepuasan Pelanggan</h1>
    <p>Terima kasih sudah makan di Dapur Siti. Lima menit waktu Anda membantu kami menentukan menu pekan depan dan memperbaiki layanan. Sebagian kolom wajib diisi; browser akan menandai kolom yang terlewat saat tombol kirim ditekan.</p>
    <form action="https://example.com/survei" method="post">
      <fieldset>
        <legend>Identitas</legend>
        <!-- kontrol identitas diisi pada Bagian 2 -->
      </fieldset>
      <fieldset>
        <legend>Kebiasaan berkunjung</legend>
        <!-- pertanyaan survei diisi pada Bagian 3 -->
      </fieldset>
      <fieldset>
        <legend>Umpan balik</legend>
        <!-- saran dan persetujuan diisi pada Bagian 4 -->
      </fieldset>
      <button type="submit">Kirim Survei</button>
    </form>
    <p><small>Data survei hanya dipakai untuk memperbaiki layanan Dapur Siti, tidak dibagikan ke pihak lain, dan tidak dipakai untuk kiriman promosi.</small></p>
  </main>

Bedah potongan ini:

1. h1 tunggal (baris 2): judul isi satu-satunya — nama warung sudah menjadi teks header, tidak perlu diulang sebagai judul.
2. Paragraf pengantar (baris 3): menyebut durasi lagi beserta aturan mainnya — sebagian kolom wajib, browser menandai yang terlewat; instruksi di muka mencegah kejutan pesan galat.
3. form ber-action dan method (baris 4): alamat tujuan fiktif https://example.com/survei; method="post" mengirim data di badan permintaan — alasannya di bagian “Mengapa post, bukan get” di bawah.
4. Tiga fieldset ber-legend (baris 5-17): tiap kelompok satu fieldset dengan legend anak pertama, urutannya sengaja — identitas (siapa), kebiasaan berkunjung (fakta), umpan balik (pendapat). Komentarnya hanya penanda kerja.
5. Tombol kirim (baris 18): button type="submit" — type ditulis eksplisit sesuai kebiasaan chapter Button.
6. Catatan privasi (baris 20): p ber-small di bawah form, di luar form — janji kepada responden, bukan data yang ikut terkirim.

Mengapa post, bukan get #

Chapter Action dan Method membedah dua moda pengiriman; untuk survei ini pilihan jatuh ke post:

Survei mengumpulkan nama dan email — data pribadi. Dengan get, keduanya menempel pada URL dan tercatat di riwayat browser serta bookmark; post menutup pintu itu. Jawaban juga tidak selalu pendek — saran bisa 500 karakter, dan URL sepanjang itu rentan terpotong. Dua alasan itulah form pengumpulan data nyaris selalu post.

Jujur Menyebut Durasi #

Estimasi “kurang lebih 5 menit” tercantum di header dan diulang di pengantar — dua tempat yang pasti dibaca sebelum pengguna menyentuh satu pun kontrol: responden memutuskan mengisi atau tidak justru pada detik itu. Survei tanpa estimasi terasa seperti komitmen terbuka; survei yang lebih panjang dari janjinya ditinggalkan di tengah. Delapan isian — tiga kolom identitas, tiga pertanyaan pilihan, satu kolom teks, satu persetujuan — memang cukup ditempuh lima menit; angka itu dihitung dari isi form, bukan ditebak.

Hasil pada Browser #

Tab menampilkan judulnya; di halaman tampak nama warung, estimasi waktu, judul, pengantar, tiga kotak kelompok (masih kosong), tombol kirim, dan catatan privasi. Tekan tombolnya: belum ada required di mana pun, jadi browser langsung mengirim dan membuka example.com — penahan pengiriman baru muncul mulai Bagian 2.

Inilah keadaan halaman pada akhir Bagian 1 — kerangka berdiri utuh dengan tiga fieldset kosong; tekan tombol Kirim Survei-nya dan lihat sendiri bahwa tidak ada satu pun penahan:

Ringkasan Bagian 1 #

• Kerangka berdiri: head lengkap, header berisi tujuan dan estimasi waktu, main berisi satu form dengan tiga fieldset ber-legend.
• Data dikirim ke action fiktif memakai method="post" — data pribadi tidak menempel di URL.
• Estimasi waktu disebut jujur dua kali: di header dan di paragraf pengantar.

Bagian berikutnya mengisi fieldset Identitas dengan tiga kontrol pertama: nama, email, dan usia.