---
title: 'Etiket–Alan İlişkisi'
source: 'https://academia.sh/tr/kurslar/web-temelleri-ve-html/etiket-alan-iliskisi'
course: "Web'in Temelleri ve HTML"
language: tr
updated: '2026-08-17T18:09:32+00:00'
license: 'CC BY-SA 4.0'
---

# Etiket–Alan İlişkisi

Etiketin alana açık ve örtük bağlanması, kimlik ile ad özniteliklerinin ayrımı, bağın kurulmadığı durumların denetimi ve yer tutucunun sınırı.

Alanlar tanımlandı ama her birinin ne istediği yalnızca yanındaki metinden anlaşılıyor.
Bu metnin alana bağlı olduğu belgede bildirilmedikçe alan **adsızdır**.

Adsız bir alanın üç somut sonucu vardır. Etikete tıklandığında odak alana gitmez —
bu, küçük onay kutularında tıklanabilir alanı birkaç kat büyüten bir kolaylıktır. Ekran
okuyucu alanı yalnızca türüyle duyurur: "düzenlenebilir metin". Ve sesle denetim
kullanıcısı alana adıyla başvuramaz.

## İki Bağlama Yolu

**Açık bağ**: `label` ögesinin `for` özniteliği, alanın `id` değerini gösterir.

```html
<p><label for="istasyon">İstasyon kodu</label>
   <input id="istasyon" name="istasyon_kodu" type="text"></p>
```

**Örtük bağ**: `label` ögesi alanı sarar; `for` ve `id` gerekmez.

```html
<p><label>Sıcaklık <input name="sicaklik" type="number"></label></p>
```

İki yol da geçerlidir. Açık bağ, etiketin ve alanın belgede ayrı yerlerde bulunmasına izin
verir; bir tablonun başlık hücresindeki etiketin gövde hücresindeki alana bağlanması ancak
böyle yapılabilir. Örtük bağ daha kısadır ve kimlik üretmeyi gerektirmez, ancak sarılan
alanın etiketin içinde kalmasını zorunlu kılar.

Bir alanın birden çok etiketi olabilir; erişilebilir adı tümünün metninden oluşur. Bir
etiketin ise yalnızca bir alanı olabilir.

## Kimlik ve Ad Ayrı Şeylerdir

İki öznitelik sık karıştırılır ve karışıklık sessiz bir kusur üretir.

`id`, ögenin **belge içindeki** kimliğidir. Belgede tek olmalıdır. Etiket bağı, parça
adresleri ve `aria-describedby` gibi bildirimler bunu kullanır.

`name`, alanın **gönderimdeki** adıdır. Belge içinde tek olması gerekmez — seçenek düğmesi
grupları aynı adı paylaşır. Sunucunun gördüğü ad budur.

İkisi aynı değeri taşıyabilir ama aynı şey değildir. Aşağıdaki betik bir formu tarar ve
her alanın etiket kaynağını bulur.

```js
// etiket.mjs — etiket-alan baginin denetimi
const form = `
<form action="/olcum" method="post">
  <p><label for="istasyon">İstasyon kodu</label>
     <input id="istasyon" name="istasyon_kodu" type="text"></p>
  <p><label>Sıcaklık <input name="sicaklik" type="number"></label></p>
  <p><label for="nem">Bağıl nem</label>
     <input id="bagil-nem" name="nem" type="number"></p>
  <p><input name="not" type="text" placeholder="Açıklama"></p>
  <p><input name="gizli" type="hidden" value="kuzey-yamac"></p>
</form>`;

const acikBaglar = new Map();
for (const e of form.matchAll(/<label for="([^"]+)">([^<]*)<\/label>/g)) {
  acikBaglar.set(e[1], e[2].trim());
}
const ortukBaglar = new Map();
for (const e of form.matchAll(/<label>([^<]*)<input([^>]*)>[^<]*<\/label>/g)) {
  const kimlik = e[2].match(/id="([^"]*)"/)?.[1] ?? null;
  const ad = e[2].match(/name="([^"]*)"/)?.[1] ?? null;
  ortukBaglar.set(kimlik ?? "name:" + ad, e[1].trim());
}

console.log("alan (name)   id            etiket kaynagi   erisilebilir ad");
for (const e of form.matchAll(/<input([^>]*)>/g)) {
  const oz = e[1];
  const ad = oz.match(/name="([^"]*)"/)?.[1] ?? "";
  const kimlik = oz.match(/id="([^"]*)"/)?.[1] ?? "";
  const tur = oz.match(/type="([^"]*)"/)?.[1] ?? "text";
  if (tur === "hidden") {
    console.log(ad.padEnd(14) + kimlik.padEnd(14) + "gerekmez".padEnd(17) + "(gizli alan)");
    continue;
  }
  let kaynak = "YOK";
  let etiketMetni = "";
  if (kimlik && acikBaglar.has(kimlik)) { kaynak = "for/id"; etiketMetni = acikBaglar.get(kimlik); }
  else if (ortukBaglar.has(kimlik) || ortukBaglar.has("name:" + ad)) {
    kaynak = "saran label";
    etiketMetni = ortukBaglar.get(kimlik) ?? ortukBaglar.get("name:" + ad);
  }
  console.log(ad.padEnd(14) + (kimlik || "—").padEnd(14) + kaynak.padEnd(17) + (etiketMetni || "—"));
}

console.log("--- bosa dusen for degerleri ---");
const kimlikler = new Set([...form.matchAll(/id="([^"]*)"/g)].map((e) => e[1]));
for (const hedef of acikBaglar.keys()) {
  if (!kimlikler.has(hedef)) console.log('for="' + hedef + '" -> boyle bir id yok');
}
```

```
alan (name)   id            etiket kaynagi   erisilebilir ad
istasyon_kodu istasyon      for/id           İstasyon kodu
sicaklik      —             saran label      Sıcaklık
nem           bagil-nem     YOK              —
not           —             YOK              —
gizli                       gerekmez         (gizli alan)
--- bosa dusen for degerleri ---
for="nem" -> boyle bir id yok
```

Üçüncü satır, kimlik–ad karışıklığının tipik biçimidir. Etikette `for="nem"` yazılmış,
alanın `name` değeri de `nem`; ancak `id` değeri `bagil-nem`. Bağ `id` üzerinden kurulduğu
için hiç kurulmamıştır. Belgede hiçbir hata görünmez: etiket metni yerinde durur, alan
çalışır, form gönderilir. Yalnızca ad kaybolmuştur.

Birinci satır tersini gösterir: `id` ve `name` farklı değerler taşıyabilir ve bu bir sorun
değildir. Bağ `id` üzerinden kurulmuş, gönderimde `name` kullanılmıştır.

Dördüncü satır etiketi hiç yazılmamış bir alandır — yerine `placeholder` konmuştur.

Beşinci satır, gizli alanların etiket gerektirmediğini gösterir: kullanıcıya sunulmazlar.

## Yer Tutucu Etiket Değildir

`placeholder` özniteliği alanın içinde görünen ve yazmaya başlanınca kaybolan metindir.
Etiket yerine kullanılamaz ve bunun birden çok gerekçesi vardır.

Metin, alan doldurulduğu anda kaybolur; kullanıcı ne istendiğini denetlemek istediğinde
bakacağı bir yer kalmaz. Form uzunsa ya da kullanıcı ara verip döndüyse bu somut bir
kayıptır.

Yer tutucu metin tarayıcı varsayılanlarında düşük karşıtlıkla gösterilir; görme gücü
sınırlı kullanıcılar için okunması güçtür ve karşıtlığı yükseltmek onu girilmiş bir
değerle karıştırılır duruma getirir.

Bazı ekran okuyucu ve tarayıcı birleşimlerinde yer tutucu erişilebilir ad olarak
duyurulur, bazılarında duyurulmaz; davranış tutarlı değildir.

Yer tutucunun yerinde kullanımı, etikete ek olarak bir **biçim örneği** vermektir:
etiket "Ölçüm saati" derken yer tutucu `07:30` yazabilir.

## Etiket Metni Ne Söylemeli

Etiket, alanın **ne istediğini** söyler; nasıl doldurulacağını değil. "Ad" yeterliyse
"Adınızı buraya yazın" yazılmaz: ekran okuyucu bu metni her odaklanmada yeniden duyurur ve
uzun etiketler formu yorucu kılar.

Etiket metnine yazılan ek işaretler de duyurulur. Zorunlu alanları yıldızla göstermek
yaygındır; yıldızın ne anlama geldiği formun başında açıklanmalı ve zorunluluk ayrıca
alanın kendi özniteliğiyle bildirilmelidir. Görsel işaret bir bildirim değildir.

Birim bilgisi etikette taşınabilir — "Ölçülen değer (°C)" gibi — ya da ek açıklamaya
bırakılabilir. Birim değeri yorumlamak için zorunluysa etikette olması yeğlenir; ekran
okuyucu ek açıklamayı bazı kiplerde atlar, adı hiçbir zaman atlamaz.

Etiketin alanın öncesinde mi sonrasında mı yazılacağı bir sunum kararı gibi görünse de
kaynak sırası okuma sırasını belirler. Onay kutusu ve seçenek düğmelerinde etiket alandan
sonra, diğer alanlarda önce yazılır; bu, denetimin durumunun ne için olduğunun sırayla
duyulmasını sağlar.

## Ek Açıklama

Alanla ilgili yardım metni, birim bilgisi ya da biçim kuralı `aria-describedby` ile
bağlanır. Etiket adı verir; açıklama ek bilgi verir ve ekran okuyucuda addan sonra
duyurulur.

```html
<p>
  <label for="deger">Ölçülen değer</label>
  <input id="deger" name="deger" type="number" step="0.1"
         aria-describedby="deger-yardim">
  <span id="deger-yardim">Santigrat derece, ondalık ayıracı nokta.</span>
</p>
```

Öznitelik boşlukla ayrılmış birden çok kimlik alabilir; metinler sırayla birleştirilir. Bu,
sonraki derste hata iletisini alana bağlarken kullanılacaktır.

## Özet

- Etiket alana `for`/`id` ile açık, sarma ile örtük bağlanır; bağ kurulmazsa alan adsız
  kalır ve tıklama, duyurma ve sesle denetim davranışları bozulur.
- `id` belge içindeki kimliktir ve tek olmalıdır; `name` gönderimdeki addır ve
  yinelenebilir. İkisi karıştırıldığında bağ sessizce kurulmaz.
- Bir alanın birden çok etiketi olabilir; bir etiketin yalnızca bir alanı olabilir.
- `placeholder` etiket yerine geçmez: doldurulunca kaybolur, düşük karşıtlıkla gösterilir
  ve ad olarak duyurulması tutarlı değildir.
- Yardım metinleri `aria-describedby` ile bağlanır ve addan sonra duyurulur.

## Sonraki Adım

Alanlar adlandırıldı; sıra girilen değerin kabul edilip edilmeyeceğine geldi. Tarayıcı,
gönderim öncesinde tanımlı kısıtları sınar ve geçersiz bir alan varsa gönderimi durdurur.
Sonraki ders bu kısıtları, ürettikleri geçerlilik durumlarını ve aynı denetimin sunucuda
neden yeniden yapılması gerektiğini ele alır.