Langsung ke konten

Label dan Fieldset: Meningkatkan Aksesibilitas Form HTML

Pelajari cara menggunakan label dan fieldset di HTML untuk meningkatkan aksesibilitas form. Pahami juga legend dan best practice form layout.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami form validation, kita bahas cara membuat form yang lebih accessible dan terstruktur dengan <label>, <fieldset>, dan <legend>.

<label>: Label untuk Input

Tag <label> memberi label pada elemen form. Ini penting untuk aksesibilitas dan UX.

Cara Menggunakan Label

Ada dua cara menggunakan label:

1. Menggunakan attribute for dan id:

<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" />

2. Membungkus input dengan label:

<label>
  Nama:
  <input type="text" name="nama" />
</label>

Cara pertama lebih disarankan karena lebih fleksibel untuk styling.

Manfaat Label

  • Klik label langsung fokus ke input — Memudahkan pengguna
  • Screen reader membaca label — Tunanetra tahu fungsi setiap input
  • SEO — Mesin pencari memahami struktur form

<fieldset>: Pengelompokan Elemen Form

Tag <fieldset> membungkus elemen-elemen form yang saling berkaitan:

<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>

  <fieldset>
    <legend>Alamat</legend>

    <label for="jalan">Jalan:</label>
    <input type="text" id="jalan" name="jalan" />

    <label for="kota">Kota:</label>
    <input type="text" id="kota" name="kota" />
  </fieldset>
</form>

Browser akan menampilkan border di sekitar setiap fieldset.

<legend>: Judul Fieldset

Tag <legend> jadi judul untuk fieldset. Letakkan langsung di dalam <fieldset>:

<fieldset>
  <legend>Informasi Pembayaran</legend>
  <!-- Elemen form di sini -->
</fieldset>

<legend> biasanya ditampilkan di tepi border fieldset.

Contoh Form dengan Fieldset

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Form dengan Fieldset</title>
    <style>
      fieldset {
        margin-bottom: 20px;
        padding: 15px;
        border: 2px solid #ccc;
        border-radius: 8px;
      }
      legend {
        font-weight: bold;
        font-size: 1.1em;
        padding: 0 10px;
      }
      .form-group {
        margin-bottom: 12px;
      }
      label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }
      input,
      select {
        width: 300px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      button {
        padding: 10px 20px;
        background-color: #2196f3;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>Form Pendaftaran</h1>

    <form action="/daftar" method="POST">
      <!-- Fieldset: Data Pribadi -->
      <fieldset>
        <legend>Data Pribadi</legend>

        <div class="form-group">
          <label for="nama">Nama Lengkap:</label>
          <input type="text" id="nama" name="nama" required />
        </div>

        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required />
        </div>

        <div class="form-group">
          <label for="ttl">Tanggal Lahir:</label>
          <input type="date" id="ttl" name="ttl" required />
        </div>

        <div class="form-group">
          <label for="jk">Jenis Kelamin:</label>
          <input type="radio" name="jk" value="laki-laki" id="lk" />
          <label for="lk">Laki-laki</label>
          <input type="radio" name="jk" value="perempuan" id="pr" />
          <label for="pr">Perempuan</label>
        </div>
      </fieldset>

      <!-- Fieldset: Kontak -->
      <fieldset>
        <legend>Informasi Kontak</legend>

        <div class="form-group">
          <label for="telepon">Nomor Telepon:</label>
          <input type="tel" id="telepon" name="telepon" required />
        </div>

        <div class="form-group">
          <label for="alamat">Alamat:</label>
          <input type="text" id="alamat" name="alamat" />
        </div>

        <div class="form-group">
          <label for="kota">Kota:</label>
          <select id="kota" name="kota">
            <option value="">-- Pilih --</option>
            <option value="jakarta">Jakarta</option>
            <option value="bandung">Bandung</option>
            <option value="surabaya">Surabaya</option>
          </select>
        </div>
      </fieldset>

      <!-- Fieldset: Akun -->
      <fieldset>
        <legend>Informasi Akun</legend>

        <div class="form-group">
          <label for="username">Username:</label>
          <input type="text" id="username" name="username" minlength="3" required />
        </div>

        <div class="form-group">
          <label for="password">Password:</label>
          <input type="password" id="password" name="password" minlength="8" required />
        </div>

        <div class="form-group">
          <label for="konfirmasi">Konfirmasi Password:</label>
          <input type="password" id="konfirmasi" name="konfirmasi" minlength="8" required />
        </div>
      </fieldset>

      <div class="form-group">
        <button type="submit">Daftar Sekarang</button>
        <button type="reset">Reset</button>
      </div>
    </form>
  </body>
</html>

Best Practice Label dan Fieldset

Label

  • Gunakan for yang sama dengan id input
  • Jangan sembunyikan label dengan display: none
  • Tempatkan label di atas atau di samping input
  • Gunakan CSS untuk styling, bukan menghapus label

Fieldset

  • Gunakan fieldset untuk mengelompokkan data yang berkaitan
  • Beri <legend> yang jelas untuk setiap fieldset
  • Hindari fieldset terlalu dalam (nested)
  • Gunakan fieldset untuk form panjang agar lebih terstruktur

Contoh tanpa dan dengan Label

Tanpa label (tidak baik):

<!-- ❌ Tidak accessible -->
<input type="text" placeholder="Nama" />
<input type="email" placeholder="Email" />

Dengan label (baik):

<!-- ✅ Accessible -->
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" placeholder="Nama" />

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Email" />

Aksesibilitas Form

Beberapa tips untuk form yang accessible:

  1. Gunakan <label> untuk semua input — Screen reader membutuhkan ini
  2. Gunakan <fieldset> untuk grup terkait — Membantu navigasi
  3. Berikan required yang jelas — Tandai input wajib
  4. Gunakan pesan error yang informatif — Jangan hanya ubah warna
  5. Pastikan form bisa diklik dengan keyboard — Tab navigation

Ringkasan

  • <label> memberi label pada input, penting untuk aksesibilitas
  • Gunakan for = id untuk menghubungkan label dan input
  • <fieldset> mengelompokkan elemen form yang berkaitan
  • <legend> jadi judul fieldset
  • Fieldset memudahkan navigasi dan memahami struktur form
  • Selalu gunakan label, jangan sembunyikan dengan CSS

Penutup

Kamu sudah memahami cara membuat form yang accessible dan terstruktur. Dengan menguasai form dasar, input types, validasi, label, dan fieldset, kamu sudah punya bekal yang cukup untuk membuat form interaktif di HTML.

Di modul selanjutnya, kita akan belajar tentang Semantic HTML, cara menulis kode yang lebih bermakna dan SEO-friendly.