M.AIM.AISoloLabsUI Sözlüğü · Girdi

← UI Sözlüğü

Form alanı form field

bilinen diğer adları girdi alanı · form kontrolü · text field · input field

Böyle diyorsan: "etiketli girdi" · "hata yazısı çıkan kutu" → bunun adı form alanı.

Etiket + girdi + hata/yardım satırından oluşan üçlü — formların yapı taşı.

Form alanı tek bir kutu değil, beş parçadan oluşan bir bütündür: etiket, zorunluluk işareti, ipucu (placeholder), yardım satırı ve hata satırı. Her parçanın kendi işaretlemesi vardır ve asıl mesele kozmetik değil BAĞLANTIDIR — etiket girdiye `for`/`id` ile, yardım ve hata satırı `aria-describedby` ile bağlanır. Bağlantı kurulmadığında alan gözle doğru görünür ama ekran okuyucu kullanan biri için kutunun adı yoktur. Yeni başlayanın en sık yaptığı hata da burada: etiketi silip yerine placeholder koymak.

Kapsam: Bu madde alanın YAPISINI ve bağlantılarını kapsar. Kutunun kendisinin türleri (metin, çok satırlı, seçim, tarih) ayrı maddelerdir; buradaki kurallar hepsinin üstünde geçerlidir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
▸ kendi kendine yazıyor: hatayı ve düzelmeyi izle — ya da sen yaz
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
E-posta form alanı ekle: üstte girdiye bağlı label (tıklayınca kutu odaklansın), placeholder gerçek bir örnek olsun (etiketin yerine geçmesin), zorunlu alan yıldızla işaretli. Boş ya da geçersizse kutunun altında kırmızı tek satır hata görünsün ve gönderim engellensin; hata satırının yeri önceden ayrılmış olsun ki yerleşim zıplamasın.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Form alanım bozuk; şu klasik hataları sırayla ele: (1) label input'a bağlanmamış (for/id eşleşmiyor), tıklayınca odaklanmıyor; (2) doğrulama ya hiç tetiklenmiyor ya da daha yazarken bağırıyor (alan terk edilmeden hata basılıyor); (3) hata satırı belirince yerleşim aşağı zıplıyor (yer rezervasyonu yok); (4) placeholder etiket yerine kullanılmış, yazmaya başlayınca bağlam kayboluyor; (5) tarayıcı otomatik doldurması stil/etiketi bozuyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Etiket<label for>

    Girdinin adı; girdiye bağlanır — tıklayınca kutuyu odaklar, ekran okuyucu adıyla okur.

  • 2Girdi<input id>

    Verinin girildiği kutu; hata durumunda kenarlığı hata rengine döner.

  • 3Hata / yardım satırıaria-describedby

    Kutunun ALTINDA sabit yeri olan tek satır; hata yokken yardım metni taşıyabilir.

  • 4Zorunlu işaretirequired + *

    Etiketin yanındaki yıldız; görsel işaretin yanında doğrulama kuralı da tanımlanır.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ABoş / varsayılan:placeholder-shown

    Henüz yazılmamış hâl. Placeholder görünür ama etiket de görünür durumdadır — ikisi birbirinin yerine geçmez.

  • BOdaklı:focus-visible

    Klavye ya da tıklamayla seçili hâl. Odak halkası kenarlıktan AÇIKÇA farklı olmalı; kaldırılamaz.

  • CDolu:not(:placeholder-shown)

    Kullanıcı yazdı. Bu hâlde placeholder kaybolur, o yüzden orada duran bilgi kalıcı olamaz.

  • DGeçersizaria-invalid + :user-invalid

    Hata var. `:user-invalid` kullanıcı alandan çıktıktan SONRA tetiklenir — yazarken bağırmamanın standart yolu budur.

  • EDevre dışı / salt okunurdisabled, readonly

    İkisi aynı şey değil: `disabled` alan gönderilmez ve odaklanılamaz, `readonly` gönderilir ve odaklanılabilir.

KODDAKİ ADLARI
HTML<label for> + <input id>etiket-girdi bağı
HTMLrequired, type="email"yerleşik doğrulama
ARIAaria-describedbyhata satırını girdiye bağlar
ARIAaria-invalid="true"geçersiz durumu ekran okuyucuya bildirir
CSS:user-invalidyalnız kullanıcı ETKİLEŞTİKTEN sonra hata stili
CSS::placeholderipucu metninin stili — etiketin yerine geçmez
ERİŞİLEBİLİRLİK & SIK HATA
  • Etiket GERÇEK bir <label> olmalı ve for/id eşleşmeli. Görsel olarak etiket gibi duran bir <div>, ekran okuyucu için etiket değildir.
  • Placeholder etiketin yerine geçemez: kullanıcı yazmaya başlayınca kaybolur ve alanın ne olduğu bilgisi uçar. Placeholder yalnızca ÖRNEK verir.
  • Hata ve yardım metnini aria-describedby ile girdiye bağla; bağlanmayan hata metni ekran okuyucuda hiç okunmaz — kullanıcı neyi düzelteceğini bilemez.
  • Hata satırının yerini önceden ayır. Hata belirince yerleşim zıplarsa kullanıcı tıklamak üzere olduğu şeyi kaçırır.
  • Zorunluluğu yalnız yıldızla anlatma: görsel yıldızın yanında girdide `required` da bulunsun, yoksa işaret sadece süs olur.
SIK KARIŞTIRILANLAR

Metin kutusundan farkı. Metin kutusu <input>'un KENDİSİDİR; form alanı ise o kutunun etiketi, yardım satırı, hata satırı ve zorunluluk işaretiyle birlikte oluşturduğu bütündür. 'Metin kutusu ekledim' demek, alanın yarısını yaptım demektir — ekran okuyucu için asıl iş bağlantılarda.

Metin kutusu sayfasına git →

Uyarı şeridinden farkı. Form alanının hata satırı O ALANA aittir ve girdiye aria-describedby ile bağlıdır. Uyarı şeridi ise sayfaya ya da forma bütün olarak seslenir. Alan bazlı hatayı sayfa üstünde tek bir şeride toplarsan kullanıcı hangi alanı düzelteceğini aramak zorunda kalır.

Uyarı şeridi sayfasına git →

KAYNAKLAR
Bu parçayı 12 ayrı stilde gör. Tam sayfa stil örneklerindeki landing bu parçadan da kurulu; stilin parçayı nasıl giydirdiğini yan yana karşılaştırabilirsin — stil parçayı değiştirmez, giydirir.

Tam sayfa örneğini aç →üstteki şeritten stil atlayabilirsin

İLGİLİ PARÇALAR

Metin kutusu inputOnay kutusu checkboxSeçim kutusu selectUyarı şeridi alert / banner

AYNI AİLEDE · GIRDI