Metin kutusu input

bilinen diğer adları text input · girdi kutusu · text field

Böyle diyorsan: "yazı yazılan kutu" · "e-posta girilen alan" → bunun adı metin kutusu.

Tek satırlık yazı alanı; tür belirtilebilir (e-posta, sayı, şifre).

Metin kutusu tek satırlık yazı alanıdır, ama asıl kararı görünüşü değil TÜRÜ belirler. type doğru seçildiğinde tarayıcı ve işletim sistemi bedava iş yapar: mobilde doğru klavye açılır (e-postada @, telefonda rakam tuşları), yerleşik doğrulama devreye girer, şifre yöneticileri alanı tanır. autocomplete özniteliği bunun ikinci yarısıdır — alanın NE olduğunu söyler, böylece kullanıcının kayıtlı bilgisi tek dokunuşla dolar. İkisi de yazılmadığında alan gözle birebir aynı görünür ama kullanıcıya her seferinde elle yazdırır; bu, arayüzde görünmeyen ama en çok hissedilen kalite farklarından biridir.

Kapsam: Bu madde tek satırlık girdinin kendisini kapsar. Etiket, yardım ve hata satırıyla oluşturduğu bütün Form Alanı maddesindedir; uzun metin Çok Satırlı Kutu, listeden seçim Seçim Kutusu maddesinde.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı

Ad Soyad

Kartınızdaki haliyle yazın

Aşama aşama gezmek için okları ya da numaraları kullan.

YAPIM PROMPTU — AJANINA YAPIŞTIR

E-posta alanı ekle: label kutuya bağlı, type=email (mobilde @ klavyesi), placeholder gerçek bir örnek, autocomplete=email açık; doğrulama alan terk edilince çalışsın, hata kutunun altındaki sabit satırda kırmızı görünsün ve düzeltilince anında temizlensin.

DEBUG PROMPTU — HUYSUZLANIRSA

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

Metin kutum huysuz; klasikleri sırayla ele: (1) type=text bırakılmış — mobilde e-posta/rakam klavyesi açılmıyor; (2) placeholder etiket yerine kullanılmış, yazınca bağlam kayboluyor; (3) autocomplete kapalı — tarayıcı dolduramıyor; (4) doğrulama her tuşta bağırıyor (blur beklemiyor); (5) maxlength yok, DB kolonundan uzun değer kırpılıyor. Belirti şu:

ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)

1Etiket<label for>
Girdinin adı; kutuya bağlıdır — tıklayınca odaklar, ekran okuyucu adıyla okur.
2Girdi kutusutype=email/tel/number
Tür doğru seçilirse mobil DOĞRU klavyeyi açar: e-postada @, telefonda rakamlar.
3Placeholdergerçek örnek
Soluk örnek metin; ETİKET DEĞİLDİR — yazmaya başlayınca kaybolur, bağlam etikette kalmalı.
4Hata satırıaria-describedby
Kutunun altında sabit yeri olan tek satır; alan terk edilince (blur) tetiklenir, her tuşta bağırmaz.

DURUMLAR — HANGİ HÂLDE NE OLUR

ABoş:placeholder-shown
Henüz yazılmadı. Placeholder gerçek bir ÖRNEK olmalı ('ornek@site.com'), etiketin kopyası değil.
BYazılıyor:focus + input olayı
Kullanıcı yazıyor. Bu sırada hata basma: doğrulama alan terk edilince (blur) tetiklenir, her tuşta bağıran form yazmayı zorlaştırır.
COtomatik dolduruldu:autofill
Tarayıcı kayıtlı bilgiyi bastı. Tarayıcılar bu hâle kendi arka plan rengini uygular ve tasarımını ezer — beklenmedik sarı kutunun sebebi budur, :autofill ile ele al.
DGeçersizaria-invalid + :user-invalid
Hata var ve girdiye bağlı satırda yazılı. Kenarlığı kırmızıya çevirmek tek başına yetmez; renk körlüğünde hiçbir şey söylemez.
ESalt okunur / devre dışıreadonly, disabled
Aynı şey değil: readonly seçilebilir, kopyalanabilir ve form ile GÖNDERİLİR; disabled odaklanılamaz ve gönderilmez.

KODDAKİ ADLARI

HTML	type=email/tel + inputmode	doğru mobil klavye
HTML	autocomplete=email	tarayıcı otomatik doldurma
ARIA	aria-invalid + aria-describedby	hata bağı
CSS	:autofill	tarayıcının doldurduğu hâli biçimlendirir

ERİŞİLEBİLİRLİK & SIK HATA

Türü doğru seç: type="email", "tel", "url", "number". Bu yalnız doğrulama değil, mobilde doğru klavyeyi açan şeydir — yanlış tür kullanıcıya her seferinde klavye değiştirtir.
autocomplete özniteliğini yaz (WCAG 1.3.5). Kişisel bilgi alanlarında bu bir kolaylık değil erişilebilirlik şartıdır: motor güçlüğü olan kullanıcı için tek dokunuşla dolan alan ile elle yazılan alan arasında büyük fark vardır.
Placeholder etiket yerine geçmez; yazmaya başlayınca kaybolur ve alanın ne olduğu bilgisi uçar.
maxlength ile sessizce kesme yapma: kullanıcı neden yazamadığını anlamaz. Sınır varsa kalan karakteri göster.
Tarayıcının otomatik doldurma stilini tamamen ezme; ezersen kullanıcı alanın doldurulduğunu fark etmeyebilir.

SIK KARIŞTIRILANLAR

Çok satırlı kutudan farkı. Ayrım uzunlukta değil ENTER DAVRANIŞINDA. Tek satırlı kutuda Enter formu gönderir; çok satırlı kutuda yeni satır açar. Bu yüzden 'kısa bir açıklama' alanını tek satırlı yaparsan kullanıcı Enter'a bastığında formu istemeden gönderir. Uzunluk beklentisi de kutunun boyutuyla söylenir: tek satır kısa cevap vaat eder.

Çok satırlı kutu sayfasına git →

Form alanından farkı. Metin kutusu girdinin KENDİSİDİR; form alanı ise o kutunun etiketi, yardım satırı, hata satırı ve zorunluluk işaretiyle oluşturduğu bütündür. 'Input ekledim' demek işin yarısıdır — ekran okuyucu için asıl iş bağlantılarda biter.

Form alanı sayfasına git →

KAYNAKLAR

standartMDN — input type="text" ↗
Temel davranış ve öznitelikler.
standartMDN — autocomplete özniteliği ↗
Hangi alan için hangi değerin yazılacağının tam listesi.
standartW3C — WCAG 2.2, Identify Input Purpose (1.3.5) ↗
Kişisel bilgi alanlarında amacın koda yazılması şartı — autocomplete'in erişilebilirlik gerekçesi.
birincilWHATWG HTML — Forms ↗
Tür ve doğrulama davranışını tanımlayan standardın kendisi.

İLGİLİ PARÇALAR

Form alanı form field Çok satırlı kutu textarea Arama çubuğu search bar Seçim kutusu select

AYNI AİLEDE · GIRDI