Pernah ngisi formulir kertas yang dibagi-bagi sectionnya pake garis kotak besar? Tiap kotak ada judul di pojok atas: "BAGIAN A: DATA PRIBADI", "BAGIAN B: ALAMAT", "BAGIAN C: KONTAK DARURAT". Sekali liat, kamu langsung paham konteks tiap field. <fieldset> + <legend> ngasih efek visual + accessibility yang sama di form HTML — pengelompokan yang dilihat user normal + dibacakan screen reader saat fokus pindah ke section baru.

💡 Wajib untuk radio group. Tanpa <fieldset> + <legend>, screen reader tidak punya cara untuk kasih tau user pertanyaan apa yang sedang dijawab. Dia cuma denger "radio, S, tidak terpilih" — tapi bingung "S itu apa?". Legend kasih konteks: "Ukuran Kaos: radio, S, tidak terpilih".

Sintaks <fieldset> + <legend>

<form>
  <fieldset>
    <legend>Data Diri</legend>
    <label>Nama: <input type="text" name="nama"></label>
    <label>Email: <input type="email" name="email"></label>
  </fieldset>

  <fieldset>
    <legend>Alamat</legend>
    <label>Jalan: <input type="text" name="jalan"></label>
    <label>Kota: <input type="text" name="kota"></label>
  </fieldset>
</form>

• <fieldset> — pembungkus grup field.
• <legend> — judul grup (harus jadi anak pertama fieldset).

Kenapa Bukan Sekadar <div>?

• Screen reader membacakan legend saat user fokus ke field di dalamnya, sehingga user tahu "sekarang saya mengisi bagian Alamat".
• Bisa di-disable serempak: <fieldset disabled> mematikan semua input di dalamnya sekaligus.

Use Case Paling Kuat: Radio Group

<fieldset>
  <legend>Ukuran Kaos</legend>
  <label><input type="radio" name="size" value="s"> S</label>
  <label><input type="radio" name="size" value="m"> M</label>
  <label><input type="radio" name="size" value="l"> L</label>
</fieldset>

💡 Ini adalah pola wajib untuk radio button — tanpa fieldset + legend, screen reader tidak punya cara untuk memberitahu user pertanyaan apa yang sedang dijawab.

🎭 Analogi sehari-hari

Pernah ngisi formulir kertas yang dibagi-bagi sectionnya pake garis kotak besar? Tiap kotak ada judul di pojok atas: "BAGIAN A: DATA PRIBADI", "BAGIAN B: ALAMAT", "BAGIAN C: KONTAK DARURAT". Sekali liat, kamu langsung paham konteks tiap field di dalamnya. <fieldset> + <legend> ngasih efek visual + accessibility yang sama di form HTML. User normal liat pengelompokan jelas. User tunanetra dengar legend dibacain pas fokus pindah ke section baru — gak nyasar tau-tau ngisi PIN tanpa konteks.

⚠️ Jebakan yang sering ditemui

• <legend> HARUS jadi anak PERTAMA <fieldset> — kalau tidak, browser tetap render tapi accessibility broken.
• WAJIB untuk RADIO GROUP — tanpa fieldset+legend, screen reader tidak tahu "pertanyaannya apa".
• <fieldset disabled> disable SEMUA input di dalam sekaligus — pattern handy.
• Default styling jelek (border, padding aneh). Reset CSS: fieldset { border: 0; padding: 0; margin: 0; } legend { padding: 0; }.
• Tidak boleh nested form di dalam fieldset.
• <legend> jadi accessible name untuk semua input di dalam — sangat powerful.
• Mobile UX: legend dibacakan tiap focus pindah ke input baru — bisa berisik. Singkat saja.

TL;DR: <fieldset> + <legend> = grouping field di form panjang. <legend> HARUS anak pertama fieldset. Screen reader bacain legend pas user fokus ke field di dalam — user tau konteks "sekarang isi bagian Alamat". WAJIB buat radio group — tanpa ini, screen reader gak tau pertanyaannya apa. Bonus: <fieldset disabled> disable semua input di dalam sekaligus. Default styling jelek — reset CSS-nya. Legend singkat saja (dibacakan tiap focus pindah).