Çalıştırılabilir HTML Dokümanları: HTML label

Q: Bir label'daki for özelliği nedir?

for, label'ın ait olduğu alanın id değerini tutar: Email . name ile değil, tam olarak id ile eşleşmelidir.

Q: Bir label'ı nasıl gizler ama ekran okuyucular için korurum?

elementini tut ve onu, ekran okuyuculardan da gizleyen display: none yerine, 1 piksele küçülten ve kırpan bir class ile görsel olarak gizle. Hiçbir label'a yer olmayan bir alan için alternatif, alanın üzerindeki aria-label olur.

label elementi ne yapar

<label> bir form alanına adını verir. Onu alanın id değerine ayarlanmış for ile bağla, iki şey olur: alan odaklandığında ekran okuyucular label'ı duyurur ve label metnine tıklamak alanı odaklar. Aşağıdaki iki metne de tıkla:

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

"City" metnine tıklamak imleci alanına koyar. "Country" metnine tıklamak hiçbir şey yapmaz ve o ikinci alana odaklanan bir ekran okuyucu adsız bir "edit text" duyar. İkisi aynı görünür; yalnızca birinin label'ı var.

Bir label'ı bağlamanın iki yolu

for ve id kullan ya da alanı label'ın içine koy:

<!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` ve `id`	Sarma
`id` gerekir	Evet, sayfada benzersiz	Hayır
Label ve alan ayrı durabilir	Evet (bir tablo hücresi, bir grid)	Hayır, alan içindedir
Kolay bozulur	Bir yazım hatası ya da tekrarlanan bir `id` ile	Tek bir label'a iki alan koyarak

for, alanın name değeriyle değil, id değeriyle eşleşmelidir. İkisi çoğunlukla aynı kelimedir, bu da biri birini değiştirene kadar hatayı gizler. İkisini birden yapmak (sarmak ve for) sorun değildir ve yaygındır.

Bir label <input> (type="hidden" hariç), <select>, <textarea>, <button>, <meter>, <output> ve <progress> elementlerine bağlanabilir. Bir label bir alanı adlandırır. Bir alanın birden fazla label'ı olabilir, ama tek ve net bir label herkes için daha kolaydır.

Checkbox ve radio'lar için daha büyük tıklama alanı

Küçük kontroller için label en çok önemi taşır: üzerinde herhangi bir yere tıklamak kutuyu değiştirir, yani hedef 13 piksellik bir kare değil, bütün metin satırıdır. Label'a stil vermek hedefi daha da büyütebilir:

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

Her satırın padding'ine, kutudan uzakta bir yere tıkla. İlk satır değişir; ikincisi, kutunun kendisine denk getirmedikçe hiçbir şey yapmaz. Checkbox'lar hakkında daha fazlası HTML checkbox sayfasında.

İpuçları ve hata mesajları

Bir label kısa olmalı: alanın adı. Ek talimatlar ve hata mesajları, ekran okuyucular önce label'ı, sonra açıklamayı okusun diye aria-describedby ile bağlanan ayrı elementlere girer:

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

Alan boşken Create'e bas, sonra AB ile, sonra ada99 ile. aria-describedby sayesinde bir ekran okuyucu "Username, required, edit text, 3 to 16 lowercase letters or digits, Enter a username." gibi bir şey duyurur. Yıldız aria-hidden durumundadır, çünkü required özelliği zaten "required" der; "star" duymak bir şey katmaz.

Gizli label'lar

Bazı alanların, örneğin bir Search butonunun yanındaki bir arama kutusunun, metin label dışında görünür bir ipucu vardır. Label yine de gereklidir; onu görsel olarak gizle ama ekran okuyucular için sayfada tut:

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

Onu display: none ya da visibility: hidden ile gizleme: bunlar onu ekran okuyuculardan da gizler ve her tarayıcı ve ekran okuyucu gizli bir label'ı hâlâ ad olarak kullanmaz. Diğer seçenek, input üzerindeki aria-label="Search courses" olur; bu, onu hiçbir label elementi olmadan adlandırır. Yer olduğunda görünür bir label yine de en iyi seçimdir: bir alanın ne için olduğunu görmek herkesin işine yarar.

Sık yapılan hatalar

id yerine name değerini gösteren for. Hiçbir şey bağlanmaz.
Tekrarlanan id'ler. for o id'ye sahip ilk elemente bağlanır; bu da sayfadaki başka bir formda bir alan olabilir.
Label yerine placeholder. Yazınca kaybolur ve güvenilir bir ad değildir.
Tek bir label içinde iki alan. Bir label bir alanı adlandırır; ikincisi label'sız kalır.
Bir checkbox label'ının içinde link, örneğin "terms" kelimesinin link olduğu "I accept the terms". Satırın bir kısmı kutuyu değiştirir, bir kısmı bir sayfa açar; yanlışlıkla denk getirmek kolaydır. Linki label'ın dışına koy.
Label'ı display: none ile gizlemek. Görsel olarak gizleyen bir class kullan.
Bir alanın yanında <label> olmayan metin. Aynı görünür ve hiçbir şey yapmaz. Alanlarının çevresindeki form için HTML form sayfasına bak.

Sıkça Sorulan Sorular

HTML'de label etiketi ne işe yarar?

Bir form alanını adlandırır. Alan odaklandığında ekran okuyucular label'ı okur, label'a tıklamak da alanı odaklar ya da bir checkbox veya radio buton ise işaretini değiştirir.

Bir label'daki for özelliği nedir?

for, label'ın ait olduğu alanın id değerini tutar: <label for="email">Email</label> <input id="email">. name ile değil, tam olarak id ile eşleşmelidir.

input'u label'ın içine mi koymalıyım yoksa for mu kullanmalıyım?

İkisi de güncel tarayıcılarda ve ekran okuyucularda çalışır. Sarmak id gerektirmez; for ve id ise label ile alanın işaretlemede farklı yerlerde, örneğin ayrı tablo hücrelerinde durmasına izin verir. Birçok ekip sarar ve ayrıca for da ekler.

Placeholder label'ın yerini tutabilir mi?

Hayır. Placeholder okur yazmaya başladığı anda kaybolur, çoğunlukla düşük kontrastlıdır ve alanın adı olarak güvenilir şekilde duyurulmaz. Görünür bir <label> kullan, placeholder'ı da kullanacaksan örnek bir değer için tut.

Bir label'ı nasıl gizler ama ekran okuyucular için korurum?

<label> elementini tut ve onu, ekran okuyuculardan da gizleyen display: none yerine, 1 piksele küçülten ve kırpan bir class ile görsel olarak gizle. Hiçbir label'a yer olmayan bir alan için alternatif, alanın üzerindeki aria-label olur.

İlgili kavramlar