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

← UI Sözlüğü

Çok satırlı kutu textarea

bilinen diğer adları textarea · çok satırlı girdi · uzun metin alanı

Böyle diyorsan: "büyük yazı kutusu" · "mesaj yazılan geniş alan" → bunun adı çok satırlı kutu.

Birden çok satır alabilen uzun metin alanı.

Çok satırlı kutu, birden fazla satır kabul eden yazı alanıdır. Tek satırlıdan ayrıldığı asıl yer uzunluk değil ENTER DAVRANIŞIDIR: burada Enter yeni satır açar, formu göndermez. Bu yüzden çok satırlı kutuda gönderme işini ayrı bir buton üstlenir. İkinci mesele boyuttur — kutunun yüksekliği kullanıcıya ne kadar yazması beklendiğini SÖYLER: iki satırlık bir kutu kısa cevap ister, sekiz satırlık kutu hikâye davet eder. Yanlış boyut, kullanıcının yazdığını silip kısaltmasına ya da tam tersine gereğinden fazla yazmasına yol açar.

Kapsam: Bu madde uzun serbest metin alanını kapsar. Tek satırlık girdi Metin Kutusu, zengin biçimlendirme (kalın, liste, link) sunan editörler ise ayrı bir sınıftır ve bu sözlükte yer almaz.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Mesajınız
Merhaba, siparişim hakkında bilgi almak istiyorum...
52/500
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Mesaj alanı ekle: label bağlı textarea (4 satır başlangıç, içerikle büyüyen), altında canlı 0/500 sayacı (maxlength=500 ile senkron, son 50'de sarı), resize yalnız dikey; Ctrl+Enter gönderme kısayolu olsun ama tek başına Enter formu GÖNDERMESİN.
DEBUG PROMPTU — HUYSUZLANIRSA

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

Textarea'm huysuz; klasikleri sırayla ele: (1) rows tanımsız — tek satır boyunda açılıyor; (2) sayaç 500 diyor ama maxlength yok, 800 karakter yazılıp kayıtta kırpılıyor; (3) resize serbest — yatay büyütünce yerleşim patlıyor; (4) Enter formu gönderiyor, kullanıcı satır atlayamıyor; (5) içerik büyüyünce kutu büyümüyor, minicik pencerede kaydırma çilesi. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Etiket<label>

    Alanın adı; textarea'ya bağlı.

  • 2Çok satırlı kutu<textarea rows>

    Uzayan metnin evi; başlangıç yüksekliği rows ile, içerikle büyümesi field-sizing ile.

  • 3Karakter sayacı128/500

    Limitin canlı göstergesi; maxlength ile AYNI sayıyı konuşmalı, limite yaklaşınca renk değiştirir.

  • 4Boyutlandırmaresize-y

    Kullanıcının kutuyu büyütme tutamacı; yalnız dikeye sınırlanır — yataya izin yerleşimi kırar.

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

    Yükseklik beklentiyi anlatır. Placeholder yönerge yeri değildir; 'en az 50 karakter' gibi kural yardım satırına yazılır, yazmaya başlayınca kaybolmasın.

  • BYazılıyorinput olayı

    Karakter sayacı varsa canlı güncellenir. Sayaç ile maxlength AYNI sayı olmalı; farklı olduklarında kullanıcı sayaca güvenip yazar ve kesilir.

  • CBüyüyorfield-sizing: content

    İçerikle birlikte uzayan kutu. Sınırsız büyüme sayfayı bozar; makul bir üst sınır koy, sonrasında kendi içinde kaydırsın.

  • DSınıra yaklaştıkalan karakter

    Uyarı sınıra VARMADAN gelmeli. Yazarken kesilmek, en can sıkıcı form deneyimlerinden biridir.

  • EDevre dışı / salt okunurdisabled, readonly

    readonly metnin seçilip kopyalanmasına izin verir ve gönderilir; disabled ikisini de yapmaz.

KODDAKİ ADLARI
HTML<textarea rows maxlength>temel + limit
CSSresize: vertical / field-sizing: contentkontrollü büyüme
UXsayaç = maxlength senkronutek doğru limit
ERİŞİLEBİLİRLİK & SIK HATA
  • Etiketi <label> ile bağla; çok satırlı kutularda etiket sık sık başlık gibi yazılıp bağlanmadan bırakılıyor.
  • maxlength ile sessizce kesme. Sınır varsa kalan karakteri göster ve sınıra yaklaşırken uyar; kullanıcı neden yazamadığını anlamalı.
  • resize'ı tamamen kapatma. Kullanıcının kutuyu büyütebilmesi bir erişilebilirlik kolaylığıdır; kısıtlaman gerekiyorsa yalnız dikey büyümeye izin ver.
  • Otomatik büyüyen kutuda odak kaybolmasın: içerik uzarken imleç görünür alanda kalmalı.
  • Uzun metin girişinde otomatik kaydetme yapıyorsan bunu söyle; sessiz kaydetme kullanıcıyı 'kayboldu mu' endişesinde bırakır.
SIK KARIŞTIRILANLAR

Metin kutusundan farkı. Ayrım uzunlukta değil ENTER DAVRANIŞINDA: burada Enter yeni satır açar, tek satırlıda formu gönderir. Bu yüzden 'kısa açıklama' alanını tek satırlı yaparsan kullanıcı Enter'a bastığında formu istemeden gönderir. Kutunun yüksekliği de bir vaattir: iki satır kısa cevap ister, sekiz satır hikâye davet eder.

Metin kutusu sayfasına git →

Form alanından farkı. Çok satırlı kutu girdinin kendisidir; form alanı ise onun etiketi, yardım satırı ve hata satırıyla oluşturduğu bütündür. Karakter sayacı da yardım satırının bir türüdür ve girdiye aria-describedby ile bağlanmalıdır — bağlanmazsa ekran okuyucu kullanıcısı sınırı hiç öğrenemez.

Form alanı sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Metin kutusu inputForm alanı form fieldİskelet yükleme skeleton

AYNI AİLEDE · GIRDI