Etiket–Alan İlişkisi

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.

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

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

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

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