Dokumentasi HTML interaktif: Label

Q: Apa itu atribut for di label?

for berisi id dari field yang menjadi pemilik label itu: Email . Nilainya harus sama persis dengan id, bukan dengan name.

Q: Bagaimana cara menyembunyikan label tapi tetap ada untuk screen reader?

Pertahankan dan sembunyikan secara visual dengan class yang mengecilkannya menjadi 1 piksel dan memotongnya, bukan dengan display: none, yang juga menyembunyikannya dari screen reader. Untuk field yang sama sekali tidak punya ruang untuk label, aria-label di field itu adalah alternatifnya.

Label HTML: Atribut for dan Cara Memberi Label Field Form

Cara elemen <label> memberi nama field form: menghubungkannya dengan for dan id atau dengan membungkus, area klik yang lebih besar untuk checkbox dan radio, petunjuk dan pesan error, label tersembunyi, dan kesalahan yang memutus hubungannya.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Fungsi elemen label

<label> memberi nama sebuah field form. Hubungkan dengan for yang diisi id field-nya, dan dua hal terjadi: screen reader mengumumkan label saat field difokus, dan mengklik teks label akan memfokuskan field itu. Klik kedua teks di bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Label</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { margin: 0 0 12px; }
  </style>
</head>
<body>
  <p>
    <label for="city">City (a label)</label>
    <input id="city" name="city">
  </p>
  <p>
    <span>Country (plain text)</span>
    <input name="country">
  </p>
</body>
</html>

Mengklik "City" menaruh kursor di field-nya. Mengklik "Country" tidak melakukan apa-apa, dan screen reader yang memfokuskan field kedua itu hanya mengucapkan "edit text", tanpa nama. Keduanya terlihat sama; hanya satu yang punya label.

Dua cara menghubungkan label

Pakai for dan id, atau taruh field di dalam label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>for vs wrapping</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { margin-bottom: 12px; }
    label { font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <!-- 1. for + id: label and field can be anywhere -->
    <div class="row">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </div>

    <!-- 2. wrapping: no id needed -->
    <div class="row">
      <label>Phone <input type="tel" name="phone"></label>
    </div>

    <button type="submit">Save</button>
  </form>
</body>
</html>

	`for` dan `id`	Membungkus
Butuh `id`	Ya, unik di halaman	Tidak
Label dan field bisa terpisah	Ya (sel tabel, grid)	Tidak, field ada di dalamnya
Mudah rusak oleh	Salah ketik atau `id` ganda	Menaruh dua field di satu label

for harus cocok dengan id field, bukan name-nya. Keduanya sering berupa kata yang sama, yang menyembunyikan kesalahan itu sampai seseorang mengubah salah satunya. Memakai keduanya (membungkus dan for) tidak masalah dan umum dilakukan.

Label bisa dihubungkan ke <input> (kecuali type="hidden"), <select>, <textarea>, <button>, <meter>, <output> dan <progress>. Satu label menamai satu field. Satu field bisa punya lebih dari satu label, walaupun satu label yang jelas lebih mudah bagi semua orang.

Area klik yang lebih besar untuk checkbox dan radio

Untuk kontrol yang kecil, label paling penting: mengklik di mana saja pada label akan mengubah kotaknya, jadi area kliknya adalah seluruh baris teks, bukan persegi 13 piksel. Memberi gaya pada label bisa membuat areanya lebih besar lagi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click target</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .option {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 320px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
    }
    .option:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <form>
    <label class="option">
      <input type="checkbox" name="alerts" value="email"> Email me about new courses
    </label>
    <span class="option">
      <input type="checkbox" name="alerts" value="sms"> Not a label: only the box works
    </span>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Klik padding di setiap baris, jauh dari kotaknya. Baris pertama berubah; baris kedua tidak melakukan apa-apa kecuali kamu mengenai kotaknya langsung. Penjelasan lebih lanjut tentang checkbox ada di checkbox HTML.

Petunjuk dan pesan error

Label sebaiknya pendek: nama field-nya. Instruksi tambahan dan pesan error ditaruh di elemen terpisah, yang dihubungkan dengan aria-describedby, supaya screen reader membaca label lebih dulu lalu deskripsinya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hints and errors</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; font-weight: 600; }
    .hint { display: block; color: #4b5563; font-size: 14px; margin: 2px 0 6px; }
    .error { color: #b91c1c; font-size: 14px; margin: 4px 0 0; }
    input { font: inherit; padding: 4px 8px; }
    .req { color: #b91c1c; }
  </style>
</head>
<body>
  <form novalidate>
    <label for="user">Username <span class="req" aria-hidden="true">*</span></label>
    <span class="hint" id="user-hint">3 to 16 lowercase letters or digits</span>
    <input id="user" name="username" required pattern="[a-z0-9]{3,16}"
      aria-describedby="user-hint user-error">
    <p class="error" id="user-error"></p>
    <button type="submit">Create</button>
  </form>

  <script>
    const form = document.querySelector('form');
    const user = document.querySelector('#user');
    form.addEventListener('submit', (event) => {
      const error = document.querySelector('#user-error');
      if (!user.checkValidity()) {
        event.preventDefault();
        error.textContent = user.value ? 'Use 3 to 16 lowercase letters or digits.' : 'Enter a username.';
        user.setAttribute('aria-invalid', 'true');
        user.focus();
      } else {
        error.textContent = '';
        user.removeAttribute('aria-invalid');
      }
    });
  </script>
</body>
</html>

Tekan Create dengan field kosong, lalu dengan AB, lalu dengan ada99. Dengan aria-describedby, screen reader mengumumkan sesuatu seperti "Username, required, edit text, 3 to 16 lowercase letters or digits, Enter a username." Tanda bintangnya aria-hidden karena atribut required sudah menyatakan "required"; mendengar "star" tidak menambah apa-apa.

Label tersembunyi

Beberapa field punya petunjuk visual selain teks label, seperti kotak pencarian di samping tombol Search. Label tetap dibutuhkan; sembunyikan secara visual tapi tetap simpan di halaman untuk screen reader:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden label</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    input, button { font: inherit; padding: 6px 10px; }
  </style>
</head>
<body>
  <form role="search">
    <label for="q" class="visually-hidden">Search courses</label>
    <input type="search" id="q" name="q" placeholder="e.g. Python">
    <button type="submit">Search</button>
  </form>
</body>
</html>

Jangan sembunyikan dengan display: none atau visibility: hidden: keduanya juga menyembunyikannya dari screen reader, dan tidak semua browser dan screen reader masih memakai label yang tersembunyi sebagai nama. Pilihan lainnya adalah aria-label="Search courses" di input, yang memberinya nama tanpa elemen label sama sekali. Label yang terlihat tetap pilihan terbaik setiap kali ada ruang: semua orang terbantu dengan melihat untuk apa sebuah field.

Kesalahan umum

for yang menunjuk ke name, bukan ke id. Tidak ada yang terhubung.
id ganda. for terhubung ke elemen pertama dengan id itu, yang bisa jadi field di form lain di halaman yang sama.
Placeholder sebagai pengganti label. Placeholder hilang saat mengetik dan bukan nama yang bisa diandalkan.
Dua field di dalam satu label. Satu label menamai satu field; field kedua jadi tidak punya label.
Link di dalam label checkbox, seperti "I accept the terms" dengan "terms" sebagai link. Sebagian baris mengubah kotaknya dan sebagian lagi membuka halaman, yang mudah tertekan tanpa sengaja. Taruh link-nya di luar label.
Menyembunyikan label dengan display: none. Pakai class visually-hidden.
Teks di samping field yang bukan <label>. Tampilannya sama tapi tidak melakukan apa-apa. Untuk form di sekeliling field-mu, lihat form HTML.

Pertanyaan yang sering diajukan

Apa fungsi tag label di HTML?

Tag ini memberi nama sebuah field form. Screen reader membacakan label saat field difokus, dan mengklik label akan memfokuskan field-nya, atau mengubah keadaannya untuk checkbox atau radio button.

Apa itu atribut for di label?

for berisi id dari field yang menjadi pemilik label itu: <label for="email">Email</label> <input id="email">. Nilainya harus sama persis dengan id, bukan dengan name.

Sebaiknya input ditaruh di dalam label atau pakai for?

Keduanya berfungsi di browser dan screen reader saat ini. Membungkus tidak butuh id; for dan id membuat label dan field bisa berada di tempat yang berbeda di markup, seperti di sel tabel yang terpisah. Banyak tim membungkus dan juga menambahkan for.

Bisakah placeholder menggantikan label?

Tidak. Placeholder hilang begitu pembaca mengetik, sering kontrasnya rendah, dan tidak selalu diumumkan sebagai nama field. Pakai <label> yang terlihat dan simpan placeholder untuk contoh nilai saja, kalau memang perlu.

Bagaimana cara menyembunyikan label tapi tetap ada untuk screen reader?

Pertahankan <label> dan sembunyikan secara visual dengan class yang mengecilkannya menjadi 1 piksel dan memotongnya, bukan dengan display: none, yang juga menyembunyikannya dari screen reader. Untuk field yang sama sekali tidak punya ruang untuk label, aria-label di field itu adalah alternatifnya.

Konsep terkait