Çalıştırılabilir HTML Dokümanları: HTML textarea

Q: HTML'de textarea nasıl oluşturulur?

Bir form içine, bir ile birlikte yaz. etiketinden farklı olarak kapanış etiketi vardır ve etiketlerin arasındaki her şey başlangıç metnidir.

Q: Bir textarea'nın varsayılan değeri nasıl ayarlanır?

Metni etiketlerin arasına koy: Hello . HTML'de textarea'nın value özelliği yoktur. JavaScript'te textarea.value değerini oku ve ayarla.

Q: Bir textarea'nın yeniden boyutlandırılmasını nasıl engellerim?

CSS'te resize: none ayarla. resize: vertical genellikle daha kullanıcı dostudur: okur uzun metinler için onu yine uzatabilir, ama yana doğru sürükleyerek yerleşimini bozamaz.

Q: Bir textarea'daki karakter sayısını nasıl sınırlarım?

maxlength="280" ekle. Tarayıcı o uzunlukta girdi almayı durdurur. Okur ne kadar yer kaldığını bilsin diye yanına input olayında güncellenen bir sayaç koy ve uzunluğu sunucuda da kontrol et.

Textarea nasıl yapılır

<textarea> birden fazla satır için bir metin alanıdır: mesajlar, yorumlar, açıklamalar. rows görünür yüksekliğini satır cinsinden belirler. Birkaç satır yaz ve Send'e bas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

<input> etiketinden iki farkı var: textarea'nın kapanış etiketi gerekir ve başlangıç metni bir value özelliği yerine etiketlerin arasına girer. name değeri, satır sonları dahil metin değer olarak gönderilir.

Textarea özellikleri

Özellik	Ne yapar
`name`	Metnin gönderildiği anahtar
`rows`	Satır cinsinden görünür yükseklik (varsayılan 2)
`cols`	Karakter cinsinden görünür genişlik (varsayılan 20); CSS `width` genellikle daha iyidir
`placeholder`	Boşken gösterilen ipucu
`maxlength`, `minlength`	Karakter cinsinden uzunluk sınırları
`required`	Boş olmamalı
`readonly`	Seçilip kopyalanabilir, düzenlenemez; yine de gönderilir
`disabled`	Kullanılamaz; gönderilmez
`wrap`	`soft` (varsayılan) ya da `hard`, aşağıya bak
`spellcheck`	`true` ya da `false`

Varsayılan metin etiketlerin arasına girer

<textarea> ile </textarea> arasındaki her şey, boşluklar, tab'lar ve satır sonları dahil, tam olarak yazıldığı gibi başlangıç metnidir. Yalnızca açılış etiketinden hemen sonraki tek bir satır sonu yok sayılır. Bu da girintiyi bir tuzağa çevirir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

İkinci textarea dört boşlukla başlar ve bir satır sonu ile iki boşluk daha ile biter; okurun hepsini silmesi gerekir. Varsayılan metni etiketlere bitişik yaz.

Bir textarea içindeki HTML işlenmez; etiketlerin arasındaki <b>hi</b> olduğu gibi bu metin olarak görünür.

Genişlik, yeniden boyutlandırma ve otomatik büyüme

Tarayıcılar okurun bir textarea'yı köşesinden sürükleyerek yeniden boyutlandırmasına izin verir. CSS resize bunu sınırlar, box-sizing: border-box ile width: 100% de onun kapsayıcısını tam olarak doldurmasını sağlar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

Sonuncusu her tuş vuruşunda yüksekliğini sıfırlar ve sonra onu scrollHeight (içeriğinin ve padding'inin yüksekliği) artı kenarlıklarına ayarlar. İçine birkaç satır yaz: hiçbir zaman kaydırma çubuğu göstermez. En kullanıcı dostu varsayılan resize: vertical olur: uzun cevaplar yer bulur ve kimse alanı yerleşimden daha geniş sürükleyemez.

Chromium tarayıcıları otomatik büyümeyi yalnızca CSS ile field-sizing: content kullanarak yapabilir. Bunu desteklemeyen tarayıcılar satırı yok sayar ve normal boyutu korur, bu yüzden eklemek güvenlidir; ama her okurun büyüyen kutuyu alması gerekiyorsa script'i tut.

maxlength ve karakter sayacı

maxlength girdiyi belirli bir karakter sayısında durdurur. Tek başına hiçbir uyarı vermez, yani okur bunu ancak yazma çalışmayı bıraktığında fark eder. Bir sayaç bunu çözer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby ekran okuyucuların sayacı alanla birlikte okumasını sağlar, aria-live="polite" de tuş vuruşları arasında sayaçtaki değişiklikleri duyurur. maxlength yalnızca tarayıcı tarafından uygulanır, bu yüzden sunucunun da uzunluğu kontrol etmesi gerekir.

Gönderilen metindeki satır sonları

Okurun satır sonları metinle birlikte gönderilir. Gönderilen veride her biri bir satır başı ve satır besleme çiftine dönüşür (URL kodlanmış bir formda %0D%0A); çoğu sunucunun beklediği budur. Metni daha sonra bir sayfada satır sonlarıyla göstermek için ya çıktıda onları <br> etiketine çevir ya da elemente white-space: pre-line stili ver.

wrap="hard" (cols gerektirir) daha da ileri gider: metnin görsel olarak kaydığı yerlere de satır sonları ekler, böylece sunucu cols karakterden uzun olmayan satırlar alır. Varsayılan olan wrap="soft" yalnızca okurun yazdığı satır sonlarını gönderir.

Textarea'ya stil vermek

Chrome ve Firefox textarea'lara yaklaşık 13px boyutunda monospace bir yazı tipi verir; bir textarea'nın çoğu zaman sırıtmasının nedeni budur. font: inherit bunu düzeltir. Kenarlığı değiştirirsen görünür bir odak stili bırak:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

Placeholder metni okunabilir bir kontrasta ulaşmalı; birçok tasarımın kullandığı açık gri okunması zordur. Ve her alanda olduğu gibi placeholder bir label değildir: okur yazmaya başladığı anda kaybolur. Label'lar HTML label sayfasında anlatılıyor.

Sık yapılan hatalar

<textarea value="...">. value özelliği yoktur; metni etiketlerin arasına koy.
Varsayılan metne HTML ile birlikte girinti vermek. Boşluklar değerin bir parçası olur.
Kendiliğinden kapanan bir <textarea />. Boş bir element değildir; </textarea> olmadan sayfanın geri kalanı metin olarak onun içine yutulur.
font: inherit olmaması, bu durumda alan küçük monospace bir yazı tipi kullanır.
Küçük sabit bir yükseklikle resize: none. Uzun cevaplar minik, kayan bir kutuda kalır.
Yalnızca maxlength değerine güvenmek. Uzunluğu sunucuda da doğrula.

Sıkça Sorulan Sorular

HTML'de textarea nasıl oluşturulur?

Bir form içine, bir <label> ile birlikte <textarea name="message" rows="4"></textarea> yaz. <input> etiketinden farklı olarak kapanış etiketi vardır ve etiketlerin arasındaki her şey başlangıç metnidir.

Bir textarea'nın varsayılan değeri nasıl ayarlanır?

Metni etiketlerin arasına koy: <textarea name="bio">Hello</textarea>. HTML'de textarea'nın value özelliği yoktur. JavaScript'te textarea.value değerini oku ve ayarla.

Bir textarea'nın yeniden boyutlandırılmasını nasıl engellerim?

CSS'te resize: none ayarla. resize: vertical genellikle daha kullanıcı dostudur: okur uzun metinler için onu yine uzatabilir, ama yana doğru sürükleyerek yerleşimini bozamaz.

Bir textarea'daki karakter sayısını nasıl sınırlarım?

maxlength="280" ekle. Tarayıcı o uzunlukta girdi almayı durdurur. Okur ne kadar yer kaldığını bilsin diye yanına input olayında güncellenen bir sayaç koy ve uzunluğu sunucuda da kontrol et.

Textarea'm neden farklı bir yazı tipi kullanıyor?

Chrome ve Firefox textarea'lara varsayılan olarak yaklaşık 13px boyutunda monospace bir yazı tipi verir. Sayfanın geri kalanıyla eşleşmesi için font: inherit ekle.

İlgili kavramlar