Chapter sebelumnya memperkenalkan fieldset dan legend sebagai pasangan elemen. Chapter ini melatih seni memakainya: kapan sebuah form perlu dipecah menjadi kelompok, bagaimana urutan kelompok yang nyaman, dan bagaimana legend bekerja sama dengan heading halaman tanpa saling mengambil peran.

Prinsip dasarnya: satu kelompok, satu topik yang bisa dinamai dengan satu frasa pendek.

Form Panjang, Fieldset per Topik #

Form yang menjalar lebih dari satu layar harus dipecah menurut alam pikir pengguna, bukan menurut kebiasaan menumpuk kolom. Pola lazimnya tiga kelompok: identitas (siapa mengisi), preferensi atau detail (apa yang diminta), lalu pembayaran atau persetujuan (bagaimana penyelesaiannya). Urutan kelompok mengikuti urutan pertanyaan yang wajar dalam percakapan — kita jarang menanyakan metode pembayaran sebelum tahu siapa pemesannya.

Contoh: Form Survei Dua Kelompok #

Survei singkat untuk peserta kelas kopi Siti:

html 
<form action="/survei" method="post">
  <fieldset>
    <legend>Identitas peserta</legend>
    <label for="nama">Nama</label>
    <input type="text" id="nama" name="nama" autocomplete="name">

    <label for="email">Email</label>
    <input type="email" id="email" name="email" autocomplete="email">
  </fieldset>

  <fieldset>
    <legend>Preferensi kelas</legend>
    <label for="jadwal">Jadwal yang cocok</label>
    <select id="jadwal" name="jadwal">
      <option value="sabtu">Sabtu pagi</option>
      <option value="minggu">Minggu sore</option>
    </select>

    <label for="catatan">Catatan untuk pengajar</label>
    <textarea id="catatan" name="catatan" rows="3"></textarea>
  </fieldset>

  <button type="submit">Kirim Survei</button>
</form>

Hasil Render secara naratif: dua kotak bertumpuk — kotak atas berjudul “Identitas peserta” berisi dua kolom isian, kotak bawah berjudul “Preferensi kelas” berisi menu pilihan dan area teks — lalu satu tombol di bawah semuanya.

Mari kita telaah kode di atas:

  1. Dua fieldset sejajar, bukan bersarang: identitas dan preferensi adalah dua topik setara; struktur datar lebih mudah dipindai mata maupun alat bantu.
  2. Tiap legend memfrasakan satu topik: “Identitas peserta” dan “Preferensi kelas” — keduanya pendek, keduanya menggambarkan seluruh isi kelompoknya.
  3. Urutan mengikuti logika percakapan: siapa dulu, keinginan kemudian, tombol kirim di akhir.
  4. autocomplete pada kontrol identitas: kelompok identitas adalah tempat atribut ini paling membayar — dibedah tuntas di chapter Autocomplete.

Legend Bukan Heading Halaman #

Peran h1–h6 dan legend berbeda dan tidak saling menggantikan. Heading membangun struktur halaman — judul halaman “Survei Kelas Kopi” memberi tahu pembaca di bagian mana situs dia berada. Legend milik form: ia hanya diumumkan bersama kontrol dalam kelompoknya, jadi ia harus spesifik (“Preferensi kelas”), bukan generik seperti “Data” atau berulang menyalin judul halaman.

Praktik yang sehat memakai keduanya: heading halaman atau bagian menuliskan konteks luas di luar form, lalu legend menamai tiap kelompok di dalamnya. Kalimat seperti “Isi form di bawah ini” di sebuah legend hanya memboroskan pengumuman pembaca layar.

Fieldset Bersarang: Hampir Tidak Pernah Perlu #

Secara markup, fieldset boleh berisi fieldset lain. Dalam praktiknya, bersarang berarti topik yang belum dipecah dengan tuntas — kotak dalam kotak membingungkan mata, dan pengumuman legend bertumpuk-tumpuk melelahkan alat bantu. Sebelum menyarangkan, coba pecah dulu menjadi dua kelompok sejajar; itu hampir selalu lebih jernih.

Ringkasan #

  • Pecah form panjang menjadi fieldset per topik: identitas, preferensi, pembayaran.
  • Urutan kelompok mengikuti logika percakapan; satu kelompok satu topik bernama pendek.
  • Heading halaman membangun struktur halaman; legend menamai kelompok dalam form; keduanya saling melengkapi.
  • Sarang fieldset nyaris selalu tanda topik yang belum dipecah; dua kelompok sejajar lebih baik.