Bagian pertama proyek ini membangun kerangka dasar formulir: kumpulan kontrol yang benar jenisnya, dikelompokkan dengan jelas, dan disebutkan namanya dengan tepat. Kita sengaja menahan diri dari atribut validasi dan gaya visual — keduanya masuk pada Bagian 2 dan Bagian 3. Fokus tahap ini adalah memastikan setiap kolom punya label yang menempel, setiap kelompok punya judul, dan data yang terkirim nanti punya nama yang jelas.

Rancangan Formulir #

Acara fiktif kita adalah Seminar Web Komunitas. Formulir pendaftarannya memuat empat kelompok isian:

  • Data diri: nama lengkap, tanggal lahir, dan kota domisili (select).
  • Kategori peserta: pilihan tunggal berupa radio — pelajar, mahasiswa, atau profesional.
  • Akun: email dan kata sandi.
  • Persetujuan: satu checkbox wajib sebelum data boleh dikirim.

Pemetaan ini menentukan jenis kontrol setiap isian: teks bebas memakai input type="text", pilihan dari daftar memakai select, pilihan tunggal dari beberapa opsi memakai radio dengan atribut name yang sama, dan persetujuan memakai satu checkbox.

File formulir.html #

Simpan file berikut sebagai formulir.html di folder bagian-1/:

html formulir.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pendaftaran Seminar Web Komunitas</title>
</head>
<body>
  <main>
    <h1>Pendaftaran Seminar Web Komunitas</h1>
    <p><img src="../assets/logo-acara.svg" alt="Logo Seminar Web Komunitas" width="96" height="96"></p>
    <p>Isi formulir berikut untuk mengikuti acara pada Sabtu, 8 Maret 2025, di Gedung Belajar Kota.</p>
    <form action="www.example.com/daftar" method="post">
      <fieldset>
        <legend>Data diri</legend>
        <p>
          <label for="nama">Nama lengkap</label>
          <input type="text" id="nama" name="nama">
        </p>
        <p>
          <label for="tanggal-lahir">Tanggal lahir</label>
          <input type="date" id="tanggal-lahir" name="tanggal-lahir">
        </p>
        <p>
          <label for="kota">Kota domisili</label>
          <select id="kota" name="kota">
            <option value="">-- Pilih kota --</option>
            <option value="bandung">Bandung</option>
            <option value="jakarta">Jakarta</option>
            <option value="surabaya">Surabaya</option>
            <option value="yogyakarta">Yogyakarta</option>
          </select>
        </p>
      </fieldset>
      <fieldset>
        <legend>Kategori peserta</legend>
        <p>
          <input type="radio" id="kategori-pelajar" name="kategori" value="pelajar">
          <label for="kategori-pelajar">Pelajar</label>
        </p>
        <p>
          <input type="radio" id="kategori-mahasiswa" name="kategori" value="mahasiswa">
          <label for="kategori-mahasiswa">Mahasiswa</label>
        </p>
        <p>
          <input type="radio" id="kategori-profesional" name="kategori" value="profesional">
          <label for="kategori-profesional">Profesional</label>
        </p>
      </fieldset>
      <fieldset>
        <legend>Akun</legend>
        <p>
          <label for="email">Email</label>
          <input type="email" id="email" name="email">
        </p>
        <p>
          <label for="kata-sandi">Kata sandi</label>
          <input type="password" id="kata-sandi" name="kata-sandi">
        </p>
      </fieldset>
      <p>
        <input type="checkbox" id="persetujuan" name="persetujuan" value="setuju">
        <label for="persetujuan">Saya menyetujui penggunaan data untuk keperluan acara ini</label>
      </p>
      <button type="submit">Kirim pendaftaran</button>
    </form>
  </main>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Logo acara dan judul halaman di atas formulir
  - Tiga kotak berbingkai berjudul "Data diri", "Kategori peserta", dan "Akun"
  - Kolom nama, pemilih tanggal, daftar kota, tiga radio, email, dan kata sandi
  - Satu checkbox persetujuan dan tombol "Kirim pendaftaran"

Mari kita bedah keputusan strukturnya:

  1. Baris 13 (<form action="www.example.com/daftar" method="post">): alamat tujuan pengiriman berupa domain fiktif, dengan method="post" karena data pendaftaran mengubah keadaan di server. Pada halaman nyata nilai action ditulis sebagai alamat absolut lengkap dengan skema.
  2. Baris 14-31 (fieldset Data diri): pasangan fieldset dan legend memberi judul pada kelompok; pembaca layar membacakan judul ini bersama setiap kolom di dalamnya, sehingga label “Nama lengkap” terdengar sebagai “Data diri, Nama lengkap”.
  3. Baris 16-17 (pasangan label for dan input id): nilai for harus sama persis dengan id kontrol. Kaitan inilah yang membuat klik pada label memfokuskan kolom dan membuat pembaca layar menyebut nama kolom dengan benar.
  4. Baris 23-28 (select kota): opsi pertama bernilai kosong (value="") berfungsi sebagai penanda “belum memilih”; nilainya akan berguna pada validasi di Bagian 2.
  5. Baris 33-44 (radio kategori): ketiga radio berbagi name="kategori" sehingga browser menganggapnya satu grup — memilih satu otomatis membatalkan pilihan lain. Atribut value pada tiap radio adalah nilai yang terkirim ke server.
  6. Baris 58-60 (checkbox persetujuan): kontrol tunggal di luar fieldset karena tidak termasuk kelompok mana pun; labelnya berupa kalimat pernyataan yang sedikit panjang, dan itu wajar untuk persetujuan.
  7. Baris 62 (<button type="submit">): tombol pengiriman dengan label berbahasa perintah yang jelas; type="submit" adalah nilai bawaan, tetapi menuliskannya eksplisit mencegah kebingungan saat tombol lain ditambahkan kelak.

Perhatikan juga src="../assets/logo-acara.svg": logo berada di folder assets/ pada akar proyek, satu tingkat di atas folder penyimpan file ini, sehingga path memakai awalan ../.

Langkah Pemeriksaan #

Tuntaskan Bagian ini dengan urutan berikut:

  1. Unduh formulir.html beserta folder pendukung, lalu buka di browser. Pastikan logo tampil dan seluruh kontrol dapat diketik, dipilih, serta dicentang.
  2. Klik teks label “Nama lengkap”: fokus harus berpindah ke kolom nama. Ulangi pada label lain — bila ada yang tidak memfokuskan, pasangan for/id-nya keliru.
  3. Jalankan ../tests/cek-struktur.html dari folder tests/, lalu centang butir-butir kelompok Struktur form dan Label dan fieldset yang telah terpenuhi.

Struktur berdiri dengan seluruh labelnya menempel. Bagian 2 menambahkan aturan main untuk setiap isian: validasi HTML native yang memeriksa data sebelum form dikirim.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

formulir.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pendaftaran Seminar Web Komunitas</title>
</head>
<body>
  <main>
    <h1>Pendaftaran Seminar Web Komunitas</h1>
    <p><img src="../assets/logo-acara.svg" alt="Logo Seminar Web Komunitas" width="96" height="96"></p>
    <p>Isi formulir berikut untuk mengikuti acara pada Sabtu, 8 Maret 2025, di Gedung Belajar Kota.</p>
    <form action="www.example.com/daftar" method="post">
      <fieldset>
        <legend>Data diri</legend>
        <p>
          <label for="nama">Nama lengkap</label>
          <input type="text" id="nama" name="nama">
        </p>
        <p>
          <label for="tanggal-lahir">Tanggal lahir</label>
          <input type="date" id="tanggal-lahir" name="tanggal-lahir">
        </p>
        <p>
          <label for="kota">Kota domisili</label>
          <select id="kota" name="kota">
            <option value="">-- Pilih kota --</option>
            <option value="bandung">Bandung</option>
            <option value="jakarta">Jakarta</option>
            <option value="surabaya">Surabaya</option>
            <option value="yogyakarta">Yogyakarta</option>
          </select>
        </p>
      </fieldset>
      <fieldset>
        <legend>Kategori peserta</legend>
        <p>
          <input type="radio" id="kategori-pelajar" name="kategori" value="pelajar">
          <label for="kategori-pelajar">Pelajar</label>
        </p>
        <p>
          <input type="radio" id="kategori-mahasiswa" name="kategori" value="mahasiswa">
          <label for="kategori-mahasiswa">Mahasiswa</label>
        </p>
        <p>
          <input type="radio" id="kategori-profesional" name="kategori" value="profesional">
          <label for="kategori-profesional">Profesional</label>
        </p>
      </fieldset>
      <fieldset>
        <legend>Akun</legend>
        <p>
          <label for="email">Email</label>
          <input type="email" id="email" name="email">
        </p>
        <p>
          <label for="kata-sandi">Kata sandi</label>
          <input type="password" id="kata-sandi" name="kata-sandi">
        </p>
      </fieldset>
      <p>
        <input type="checkbox" id="persetujuan" name="persetujuan" value="setuju">
        <label for="persetujuan">Saya menyetujui penggunaan data untuk keperluan acara ini</label>
      </p>
      <button type="submit">Kirim pendaftaran</button>
    </form>
  </main>
</body>
</html>