<fieldset> mengelompokkan beberapa kolom isian yang saling berkaitan di dalam form, dan <legend> adalah judul kelompok itu. Bayangin formulir kertas yang dibagi jadi kotak-kotak bergaris, dan tiap kotak punya judul: "Data Diri", "Alamat". Browser menggambar fieldset persis kayak gitu: bingkai bergaris, dengan judul legend menempel di garis atasnya.
🧪 Tebakan cepat: ada tiga pilihan radio, S, M, dan L. Pengguna screen reader (program yang membacakan halaman buat pengguna tunanetra) mendengar "S, radio button". Dari mana dia tahu S itu ukuran kaos? Tebak dulu, jawabannya ada di bagian "Pilihan radio butuh judul".
Kelompokkan kolom dengan fieldset
<form>
<fieldset>
<legend>Data Diri</legend>
<label for="nama">Nama</label>
<input type="text" id="nama" name="nama">
<label for="email">Email</label>
<input type="email" id="email" name="email">
</fieldset>
</form>
Dari luar ke dalam:
<form>tetap jadi pembungkus paling luar. Fieldset ditulis di dalam form.<fieldset>adalah pembungkus kelompoknya. Semua kolom milik kelompok ini ditulis di antara<fieldset>dan</fieldset>.<legend>Data Diri</legend>adalah judul kelompoknya. Tulis tepat sesudah<fieldset>, sebagai isi pertama, sebelum kolom apa pun.<label>dan<input>ditulis sama persis kayak di pelajaran input dan label. Fieldset gak mengubah cara menulis kolom, cuma membungkusnya.
Jadi urutannya: form, di dalamnya fieldset, di dalamnya legend dulu, baru kolom-kolomnya.
Hasilnya: kotak bergaris dengan tulisan "Data Diri" di garis atasnya, berisi kolom Nama dan Email. Screen reader juga membacakan "Data Diri" waktu pengguna masuk ke kolom di dalamnya. Form yang panjang boleh punya beberapa fieldset, satu per kelompok, misalnya Data Diri, Alamat, dan Pembayaran.
Pilihan radio butuh judul
<fieldset>
<legend>Ukuran kaos</legend>
<label><input type="radio" name="ukuran" value="S"> S</label>
<label><input type="radio" name="ukuran" value="M"> M</label>
<label><input type="radio" name="ukuran" value="L"> L</label>
</fieldset>
Label S, M, dan L cuma menjelaskan tiap tombol, bukan pertanyaannya. Tanpa legend, pengguna screen reader cuma dengar "S, radio button". Dengan legend, yang terdengar "Ukuran kaos, S". Jadi tiap grup radio atau checkbox sebaiknya dibungkus fieldset yang punya legend.
Di contoh ini <label> membungkus input-nya langsung. Cara ini juga menyambungkan label ke input, tanpa perlu for dan id.
Matikan satu kelompok dengan disabled
Tulis <fieldset disabled>, dan semua kolom di dalamnya mati sekaligus: gak bisa diklik, gak bisa diisi, dan isinya gak ikut terkirim. Gak perlu memasang disabled di tiap input satu per satu.
⚠️ Jebakan yang sering ketemu
- Legend di tengah atau di akhir. Aturan HTML-nya, legend jadi isi pertama fieldset. Taruh tepat sesudah
<fieldset>, biar judulnya terbaca sebelum kolom-kolomnya. - Legend di luar fieldset.
<legend>sesudah</fieldset>bukan judul kelompok mana pun. - Input ditulis sesudah
</fieldset>. Input itu jadi di luar kelompok. Cek posisi tag penutupnya. <div>dengan teks tebal sebagai judul. Kelihatannya mirip, tapi screen reader gak tahu itu judul kelompok.- Fieldset dibuang karena bingkainya jelek. Garisnya bisa dihapus pakai CSS (
fieldset { border: 0; }), struktur HTML-nya tetap dipakai.
TL;DR: <fieldset> membungkus kolom-kolom yang berkaitan, dan <legend> jadi judulnya, ditulis sebagai isi pertama fieldset. Semua kolom kelompok itu ditulis sebelum </fieldset>. Grup radio atau checkbox butuh fieldset dan legend biar pertanyaannya ikut terbaca. <fieldset disabled> mematikan semua kolom di dalamnya sekaligus.
