HTML textarea Etiketi: rows, cols, wrap, maxlength ve dirname

Temel kullanım: değer etiketlerin arasında

textarea ile input arasındaki en önemli fark, başlangıç değerinin nerede durduğudur. HTML içinde textarea öğesinin ilk içeriği açılış ve kapanış etiketlerinin arasına yazılır; value özniteliği kullanılmaz. Teknik özete göre bu öğe yalnızca metin içerik alır ve iki etiket de zorunludur. JavaScript tarafında ise value özelliği alanın o anki metnini okur ya da değiştirir, defaultValue özelliği de başlangıç değerini (öğenin metin içeriğini) verir.

<label for="mesaj">Mesajınız</label>
<textarea id="mesaj" name="mesaj" rows="5" cols="40">Merhaba,</textarea>

Bu örnekteki id, alanı bir etikete bağlamak için; name ise gönderilecek verinin adı içindir. MDN, tarayıcıların varsayılan boyutları farklı olabileceğinden rows ve cols değerlerini açıkça yazmanın tutarlılık sağladığını belirtir. textarea ifade içeriği kabul eden her öğenin içine konabilir, örtük ARIA rolü textbox olur ve üzerine başka bir role yazılmasına izin verilmez.

rows ve cols: görünen boyut

rows, alanda aynı anda görünen metin satırı sayısıdır; yazılmazsa 2 olur. cols, alanın görünen genişliğidir ve ortalama karakter genişliği cinsinden ölçülür; yazılmazsa 20 olur. İkisi de pozitif tam sayı olmalıdır. Bu öznitelikler yalnızca görünümü belirler, kullanıcının yazabileceği metin miktarını sınırlamaz. Çoğu tarayıcıda alanın köşesinde bir sürükleme tutamacı bulunur ve kullanıcı alanı büyütebilir; bu davranış CSS resize özelliğiyle değiştirilir. MDN'in temel örneğinde ayrıca CSS max-width ve max-height ile kullanıcının alanı belirli bir boyutun ötesine büyütmesi sınırlanır; yani bu örnekte HTML başlangıç boyutunu, CSS ise sınırları belirler. Unutmayın ki wrap="hard" kullanacaksanız cols özniteliğini yazmanız MDN'e göre şarttır.

wrap: gönderimde satır kırma

wrap özniteliği, metnin form gönderimi için nasıl kırılacağını belirler. Kullanıcı ekranda uzun bir satır yazdığında tarayıcı onu görsel olarak alt satıra taşır; asıl soru, sunucuya giden değerde bu görsel kırılmaların gerçek satır sonuna dönüşüp dönüşmeyeceğidir.

<label for="siir">Şiiriniz (satır uzunluğu korunur)</label>
<textarea id="siir" name="siir" rows="8" cols="40" wrap="hard"></textarea>

hard değerinin cols olmadan bir etkisi yoktur; MDN bunu açıkça şart koşar. Çoğu yorum ve mesaj formunda varsayılan soft en doğru seçimdir, çünkü sunucuya kullanıcının gerçekten bastığı satır sonları gider.

maxlength ve minlength

maxlength kullanıcının girebileceği en uzun dizeyi, minlength en kısa dizeyi belirler. İkisi de 0 veya daha büyük bir tam sayı olmalıdır ve uzunluk UTF-16 kod birimi cinsinden ölçülür. MDN bu ölçünün çoğu zaman ama her zaman değil karakter sayısına eşit olduğunu not eder; yani sınıra yakın değerlerde sayaç ile tarayıcının sonucu farklı olabilir. maxlength yazılmazsa ya da geçersizse sınır yoktur. maxlength değeri minlength değerinden küçük olursa alan hiçbir zaman geçerli olamaz.

<label for="ozet">Kısa özet (10 ile 200 karakter arası)</label>
<textarea id="ozet" name="ozet" rows="4" cols="50"
          minlength="10" maxlength="200" required></textarea>

Tarayıcı genellikle maxlength sınırını aşan yazıya izin vermez; değer bir şekilde uzun kalırsa ValidityState nesnesinin tooLong özelliği true olur. minlength ise kullanıcının karakter silmesini engellemez, yalnızca değeri geçersiz kılar ve tooShort bayrağını kaldırır.

Burada iki uç durumu bilmek gerekir. Birincisi, minlength alanı zorunlu yapmaz: boş bir textarea, required yoksa geçerli sayılır ve gönderilebilir. Yukarıdaki örnekte required bu yüzden var. İkincisi, MDN Constraint validation rehberine göre bu iki uzunluk kuralı yalnızca kullanıcının girdiği değerde denetlenir; değer betikle atandıysa checkValidity() çağrılsa bile denetlenmez. Doğrulamanın tamamı için form doğrulama yazısına bakın.

placeholder

placeholder, alan boşken görünen kısa bir ipucudur. input türlerinden farklı olarak textarea içinde yer tutucu metindeki satır başı ve satır sonu karakterleri, ipucu çizilirken gerçek satır sonu olarak gösterilir. MDN yine de yer tutucunun yalnızca beklenen veri için örnek göstermek amacıyla kullanılmasını, etiketin yerine geçmemesini ister (label yazısı).

<label for="adres">Teslimat adresi</label>
<textarea id="adres" name="adres" rows="3"
          placeholder="Mahalle, sokak, numara
İlçe / il"></textarea>

readonly ve disabled farkı

İki öznitelik de kullanıcının metni değiştirmesini engeller, ama davranışları çok farklıdır. readonly alan odaklanabilir, kullanıcı içine tıklayıp metin seçebilir ve değeri formla gönderilir. disabled alan odaklanamaz, olay almaz ve değeri gönderilmez. İkisi de doğrulamaya katılmaz; bu yüzden MDN, required özniteliğinin readonly veya disabled bir alanla birlikte yazılmasına izin verilmediğini belirtir.

<label for="sozlesme">Sözleşme metni</label>
<textarea id="sozlesme" name="sozlesme" rows="6" readonly>Bu metin okunabilir ve gönderilir.</textarea>

<label for="eski">Eski not</label>
<textarea id="eski" name="eski" rows="2" disabled>Bu metin gönderilmez.</textarea>

Bir textarea, içinde bulunduğu <fieldset disabled> nedeniyle de devre dışı kalabilir; öznitelik öğenin kendisinde yazılmamış olsa bile durum üst öğeden gelir.

dirname: yazı yönünü sunucuya göndermek

dirname özniteliği, gönderim sırasında alandaki metnin yönünü ikinci bir alan olarak forma ekler. Değer olarak bu ikinci alanın adını alır; gönderilen değer ltr (soldan sağa) veya rtl (sağdan sola) olur. Böylece sunucu, Arapça gibi sağdan sola yazılan metinlerin de gelebileceği formlarda her girdinin yönünü ayrıca tahmin etmek zorunda kalmaz.

<form method="get" action="/yorum">
  <label for="yorum">Yorum</label>
  <textarea id="yorum" name="comment" dir="auto" dirname="comment-direction"></textarea>
  <button type="submit">Gönder</button>
</form>
<!-- "Hello" yazılırsa: /yorum?comment=Hello&comment-direction=ltr -->

Bu örnekteki dir="auto", yönün kullanıcının yazdığı metne göre belirlenmesini sağlar; MDN'in örneğinde Arapça bir metin rtl olarak gönderilir. Alanda dir yoksa yön, formu içeren üst öğeden kalıtılır; orada da yoksa tarayıcının varsayılan yönü kullanılır. Yön öznitelikleri lang ve dir yazısında anlatılıyor.

autocomplete, spellcheck, autocorrect ve autocapitalize

• autocomplete: off, on veya otomatik doldurma belirteçlerinden oluşan bir liste alır. Yazılmazsa formun autocomplete değerini kalıtır (autocomplete yazısı).
• spellcheck: true yazım ve dil bilgisi denetimini açar, false kapatır, default üst öğenin ayarına bırakır. Kod veya kullanıcı adı listesi gibi alanlarda kapatmak mantıklıdır.
• autocorrect: on veya off ile otomatik yazım düzeltmesini ve metin değiştirmeyi denetler; tarayıcı desteği için MDN uyumluluk tablosuna bakın.
• autocapitalize: girilen metnin otomatik olarak büyük harfle başlayıp başlamayacağını belirler.
• autofocus: sayfa açılınca alana odak verir; belgede yalnızca bir öğede bulunmalıdır.

form özniteliği

textarea bir formun içinde değilse form özniteliğine formun id değerini yazarak o forma bağlanabilir. Böylece alan sayfanın başka bir yerinde durduğu hâlde formla birlikte gönderilir. Bu teknik form etiketi yazısında örneklerle anlatılıyor.

<form id="destek" action="/destek" method="post">
  <button type="submit">Talebi gönder</button>
</form>
<label for="aciklama">Sorunu anlatın</label>
<textarea id="aciklama" name="aciklama" form="destek" rows="6"></textarea>

textarea formun içinde nasıl davranır?

MDN içerik kategorileri rehberi textarea öğesini birkaç form alt kategorisine birden yerleştirir. "Listed" olduğu için formun elements koleksiyonunda görünür; "submittable" olduğu için değeri form verisine girer; "resettable" olduğu için form sıfırlandığında etkilenir ve başlangıç metnine döner; "labelable" olduğu için bir <label> ile adlandırılabilir. Ayrıca autocapitalize ve autocorrect ayarlarını form sahibinden kalıtan öğeler arasındadır.

Gönderim kuralları input ile aynıdır: name yoksa değer gönderilmez, disabled ise gönderilmez, readonly ise gönderilir. Kullanıcının bastığı satır sonları değerin parçasıdır ve varsayılan wrap="soft" ayarında tarayıcı bunların hepsini CR+LF çifti olarak gönderir. Sunucu tarafında metni gösterirken bu satır sonlarını nasıl işleyeceğinize ve gelen metni HTML olarak değil düz metin olarak ele almaya dikkat edin (XSS ve CSP yazısı).

Uygulamalı örnek: geri bildirim formu

Aşağıdaki form bu yazıda anlatılan öznitelikleri bir araya getiriyor. Mesaj alanı zorunlu ve 20 ile 1000 karakter arasında olmalı; boyut açıkça verilmiş, yer tutucu yalnızca örnek gösteriyor ve beklenen uzunluk görünür bir ipucu olarak etiketin yakınında yazıyor. Sipariş numarası kullanıcının değiştirmemesi ama sunucuya gitmesi gereken bir bilgi olduğu için readonly.

<form action="/geri-bildirim" method="post">
  <label for="gb-siparis">Sipariş numarası</label>
  <input type="text" id="gb-siparis" name="siparis" value="A-10293" readonly />

  <label for="gb-mesaj">Görüşünüz</label>
  <p id="gb-ipucu">En az 20, en fazla 1000 karakter.</p>
  <textarea id="gb-mesaj" name="mesaj" rows="6" cols="60"
            minlength="20" maxlength="1000" required
            aria-describedby="gb-ipucu"
            placeholder="Örneğin: Kargo beklediğimden hızlı geldi."></textarea>

  <button type="submit">Gönder</button>
</form>

Kullanıcı 10 karakterlik bir mesajla gönder düğmesine basarsa tarayıcı gönderimi durdurur ve alanı geçersiz sayar, çünkü değer kullanıcı tarafından girildiği için minlength denetlenir. Alan boş bırakılırsa bu kez required kuralı devreye girer. aria-describedby ile bağlanan ipucu, ekran okuyucunun etiketten sonra uzunluk kuralını da okumasını sağlar (aria-describedby yazısı).

Biçimle ilgili kısa notlar

Bu yazı HTML ile sınırlı, ama iki davranışı bilmek işinize yarar. textarea varsayılan olarak inline-block görünür ve diğer form denetimlerine göre CSS ile biçimlemesi kolaydır. HTML belirtimi textarea için bir taban çizgisi tanımlamadığından tarayıcılar onu farklı yerlere koyar; MDN bu öğede vertical-align: baseline kullanmamanızı önerir. Geçerli ve geçersiz değerler :valid ve :invalid sözde sınıflarıyla vurgulanabilir; ayrıntılar CSS yazılarının konusudur.

Sık yapılan hatalar

• value özniteliği yazmak: textarea başlangıç değerini value özniteliğinden okumaz; metni etiketlerin arasına yazın.
• Kapanış etiketini unutmak veya kendini kapatan yazım kullanmak: <textarea /> geçersizdir; textarea boş bir öğe değildir ve teknik özete göre iki etiket de zorunludur.
• minlength ile alanı zorunlu sandığınızı varsaymak: boş alan geçerlidir; required ekleyin.
• wrap="hard" kullanıp cols yazmamak: etkisi olmaz.
• disabled alanın değerinin gideceğini sanmak: gönderilmesi gereken ama değiştirilmemesi gereken metin için readonly kullanın.
• Uzunluk sınırını yalnızca istemcide uygulamak: sunucu, gelen metnin uzunluğunu yeniden denetlemelidir.

Sık Sorulan Sorular

textarea ile input type="text" arasındaki fark nedir?

text türü tek satırdır ve satır sonlarını değerden çıkarır; textarea birden fazla satır alır ve satır sonlarını korur. Başlangıç değeri input için value özniteliğinde, textarea için etiketlerin arasındadır.

textarea içine HTML yazılabilir mi?

Teknik özete göre textarea yalnızca metin alır; zengin metin düzenleyicisi gerekiyorsa farklı bir yaklaşım (örneğin contenteditable ve JavaScript) gerekir.

Karakter sayacı için ne kullanmalıyım?

HTML yalnızca maxlength sınırını sağlar. Kalan karakteri göstermek için input olayını dinleyen kısa bir betik ve sonucu yazmak için bir <output> öğesi kullanabilirsiniz (output yazısı).

Form sıfırlanınca textarea hangi metne döner?

Başlangıç değerine, yani HTML içinde etiketlerin arasına yazdığınız metne döner. JavaScript tarafında bu metin defaultValue özelliğiyle okunur ve değiştirilir; kullanıcının o an yazdığı metin ise value özelliğindedir. Sıfırlama düğmesi kullanmanız gerekiyorsa MDN'in bu düğmelerin kullanıcıları sık sık rahatsız ettiği uyarısını hatırlayın.

Kullanıcının alanı büyütmesini HTML ile engelleyebilir miyim?

HTML ile engellenemez; bu ayar CSS resize özelliğiyle yapılır. rows ve cols yalnızca başlangıç boyutunu belirler.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · form etiketi · input türleri · label ve fieldset · form doğrulama · lang ve dir öznitelikleri · autocomplete