Form pesanan toko biasanya meminta alamat pengiriman, alamat tagihan, dan metode pengiriman sekaligus. Tanpa pengelompokan, belasan kotak isian tampil berderet tanpa konteks, dan pengunjung perlu menebak data mana yang berkaitan satu sama lain. HTML menyediakan elemen fieldset untuk membungkus kontrol yang satu kelompok, dengan legend sebagai judul grup tersebut. Pada Chapter ini kita mempelajari keduanya, manfaat aksesibilitas yang menyertainya, serta atribut disabled yang mampu menonaktifkan satu grup sekaligus.

Mengelompokkan Kontrol dengan Fieldset #

Elemen fieldset membungkus sekumpulan kontrol yang berhubungan, misalnya seluruh isian alamat. Secara visual, browser menggambar garis batas dan memberi jarak di sekeliling grup secara default, sehingga batas antargrup langsung terlihat tanpa CSS. Secara semantik, fieldset menyatakan bahwa kontrol di dalamnya membentuk satu kesatuan data, dan informasi inilah yang dimanfaatkan browser serta teknologi bantu. Elemen ini termasuk form-associated, artinya dapat terhubung ke sebuah form meskipun ditulis di luar elemen form, tetapi penempatan paling umum tetap di dalam form.

Legend sebagai Judul Grup #

Setiap fieldset sebaiknya diawali satu elemen legend sebagai anak pertama, berisi judul yang mendeskripsikan grup. Browser merender teks legend menembus garis batas di bagian atas grup, mirip label yang tertempel pada kotak. Aturan model kontennya tegas: legend wajib menjadi anak pertama, dan bila kita menaruh kontrol sebelum legend, validator menandai dokumen tersebut sebagai tidak valid. Satu fieldset cukup memiliki satu legend, dan judul grup tidak perlu diulang pada tiap label kontrol di dalamnya.

Manfaat untuk Aksesibilitas #

Manfaat terbesar fieldset dan legend dirasakan pengguna screen reader. Ketika pengguna berpindah ke sebuah kontrol di dalam grup, screen reader membacakan legend terlebih dahulu sebelum label kontrolnya. Perilaku ini penting untuk kelompok radio button yang pilihannya tidak bermakna sendirian; label “Kilat” baru jelas ketika dibacakan bersama judul “Metode Pengiriman”. Aturan praktisnya sederhana: kelompokkan kontrol yang satu topik dalam satu fieldset, beri legend yang ringkas, dan biarkan label tiap kontrol tetap spesifik.

Menonaktifkan Satu Grup dengan Disabled #

Atribut disabled ketika dituliskan pada fieldset menonaktifkan seluruh kontrol turunannya sekaligus; atribut yang sama juga berlaku per kontrol, tetapi pada fieldset cakupannya meliputi satu grup penuh. Kontrol yang dinonaktifkan tidak dapat menerima fokus dan nilainya tidak ikut terkirim saat form dikirim. Pola yang lazim adalah menonaktifkan grup alamat tagihan selama pengunjung membiarkan tanda centang “Alamat tagihan sama dengan alamat pengiriman”; mengubah status itu secara dinamis membutuhkan JavaScript. Untuk sekarang kita menuliskan disabled secara statis agar efeknya terlihat jelas.

Contoh: Alamat Pengiriman dan Tagihan #

File berikut memuat tiga grup: alamat pengiriman yang aktif, alamat tagihan yang dinonaktifkan, dan metode pengiriman berupa radio button. Simpan sebagai contoh-fieldset.html lalu buka di browser:

html contoh-fieldset.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Data Pengiriman Pesanan</title>
</head>
<body>
  <h1>Data Pengiriman Pesanan</h1>
  <form action="www.example.com/pesanan" method="post">
    <fieldset>
      <legend>Alamat Pengiriman</legend>
      <p>
        <label for="nama-penerima">Nama penerima</label><br>
        <input type="text" id="nama-penerima" name="nama-penerima">
      </p>
      <p>
        <label for="jalan">Jalan dan nomor rumah</label><br>
        <input type="text" id="jalan" name="jalan">
      </p>
      <p>
        <label for="kota">Kota</label><br>
        <input type="text" id="kota" name="kota">
      </p>
    </fieldset>
    <fieldset disabled>
      <legend>Alamat Tagihan</legend>
      <p>
        <label for="jalan-tagihan">Jalan dan nomor rumah</label><br>
        <input type="text" id="jalan-tagihan" name="jalan-tagihan">
      </p>
      <p>
        <label for="kota-tagihan">Kota</label><br>
        <input type="text" id="kota-tagihan" name="kota-tagihan">
      </p>
    </fieldset>
    <fieldset>
      <legend>Metode Pengiriman</legend>
      <p>
        <input type="radio" id="kurir-reguler" name="pengiriman" value="reguler">
        <label for="kurir-reguler">Kurir Reguler (3-5 hari)</label>
      </p>
      <p>
        <input type="radio" id="kurir-kilat" name="pengiriman" value="kilat">
        <label for="kurir-kilat">Kurir Kilat (1 hari)</label>
      </p>
    </fieldset>
    <p><button type="submit">Kirim Pesanan</button></p>
  </form>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Grup "Alamat Pengiriman" berisi tiga kotak isian di dalam garis batas,
    dengan judul grup tertempel pada garis atasnya
  - Grup "Alamat Tagihan" memiliki garis batas, tetapi kedua isian berwarna
    pudar dan tidak dapat diklik karena atribut disabled
  - Grup "Metode Pengiriman" berisi dua radio button Kurir Reguler dan Kilat

Mari kita telaah peran setiap baris pentingnya:

  1. Baris 11-25 (fieldset pertama): grup alamat pengiriman; legend pada baris 12 menjadi anak pertama sesuai aturan model konten.
  2. Baris 26-36 (fieldset disabled): grup alamat tagihan dinonaktifkan utuh; kedua isian berwarna pudar, tidak menerima fokus, dan tidak ikut terkirim.
  3. Baris 37-47 (fieldset ketiga): kelompok radio dengan name="pengiriman" yang sama; pola ini paling diuntungkan oleh legend karena tiap pilihan dibacakan bersama judul grupnya.
  4. Baris 48 (button): tombol submit mengirim seluruh kontrol aktif; isian pada grup yang disabled dikesampingkan.

Grup yang rapi membuat form panjang tetap mudah dipindai. Berikutnya kita menambahkan jenis kontrol yang berbeda dari isian teks: input type="file" untuk mengunggah berkas seperti foto profil atau lampiran dokumen.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

contoh-fieldset.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>Data Pengiriman Pesanan</title>
</head>
<body>
  <h1>Data Pengiriman Pesanan</h1>
  <form action="www.example.com/pesanan" method="post">
    <fieldset>
      <legend>Alamat Pengiriman</legend>
      <p>
        <label for="nama-penerima">Nama penerima</label><br>
        <input type="text" id="nama-penerima" name="nama-penerima">
      </p>
      <p>
        <label for="jalan">Jalan dan nomor rumah</label><br>
        <input type="text" id="jalan" name="jalan">
      </p>
      <p>
        <label for="kota">Kota</label><br>
        <input type="text" id="kota" name="kota">
      </p>
    </fieldset>
    <fieldset disabled>
      <legend>Alamat Tagihan</legend>
      <p>
        <label for="jalan-tagihan">Jalan dan nomor rumah</label><br>
        <input type="text" id="jalan-tagihan" name="jalan-tagihan">
      </p>
      <p>
        <label for="kota-tagihan">Kota</label><br>
        <input type="text" id="kota-tagihan" name="kota-tagihan">
      </p>
    </fieldset>
    <fieldset>
      <legend>Metode Pengiriman</legend>
      <p>
        <input type="radio" id="kurir-reguler" name="pengiriman" value="reguler">
        <label for="kurir-reguler">Kurir Reguler (3-5 hari)</label>
      </p>
      <p>
        <input type="radio" id="kurir-kilat" name="pengiriman" value="kilat">
        <label for="kurir-kilat">Kurir Kilat (1 hari)</label>
      </p>
    </fieldset>
    <p><button type="submit">Kirim Pesanan</button></p>
  </form>
</body>
</html>