Dokumentacja HTML z przykładami: Textarea

Q: Jak utworzyć textarea w HTML?

Napisz wewnątrz formularza, z elementem . W odróżnieniu od ma znacznik zamykający, a wszystko między znacznikami to tekst początkowy.

Q: Jak ustawić domyślną wartość textarea?

Umieść tekst między znacznikami: Hello . Textarea nie ma w HTML atrybutu value. W JavaScript odczytuj i ustawiaj textarea.value.

Q: Jak zablokować zmianę rozmiaru textarea?

Ustaw resize: none w CSS. Zwykle przyjaźniejsze jest resize: vertical: czytelnik nadal może powiększyć pole w pionie dla długiego tekstu, ale nie zepsuje układu, rozciągając je wszerz.

Q: Jak ograniczyć liczbę znaków w textarea?

Dodaj maxlength="280". Przeglądarka przestaje przyjmować tekst po osiągnięciu tej długości. Pokaż obok licznik aktualizowany przy zdarzeniu input, żeby czytelnik wiedział, ile miejsca zostało, i sprawdzaj długość również na serwerze.

Jak zrobić textarea

<textarea> to pole tekstowe na więcej niż jedną linię: wiadomości, komentarze, opisy. rows ustawia jego widoczną wysokość w liniach. Wpisz kilka linii i naciśnij Send:

<!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>

Dwie rzeczy różnią się od <input>: textarea wymaga znacznika zamykającego, a jej tekst początkowy trafia między znaczniki, a nie do atrybutu value. Jej name jest wysyłany z tekstem jako wartością, łącznie z podziałami linii.

Atrybuty textarea

Atrybut	Działanie
`name`	Klucz, pod którym wysyłany jest tekst
`rows`	Widoczna wysokość w liniach (domyślnie 2)
`cols`	Widoczna szerokość w znakach (domyślnie 20); zwykle lepsze jest `width` w CSS
`placeholder`	Podpowiedź widoczna, gdy pole jest puste
`maxlength`, `minlength`	Limity długości w znakach
`required`	Nie może być puste
`readonly`	Można zaznaczyć i skopiować, ale nie edytować; nadal jest wysyłane
`disabled`	Nie da się go użyć; nie jest wysyłane
`wrap`	`soft` (domyślnie) albo `hard`, zobacz niżej
`spellcheck`	`true` albo `false`

Tekst domyślny trafia między znaczniki

Wszystko między <textarea> a </textarea> to tekst początkowy, dokładnie tak, jak został zapisany: łącznie ze spacjami, tabulatorami i podziałami linii. Ignorowany jest tylko jeden podział linii bezpośrednio po znaczniku otwierającym. Przez to wcięcia są pułapką:

<!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>

Druga textarea zaczyna się od czterech spacji i kończy podziałem linii oraz dwiema kolejnymi spacjami, a czytelnik musi to wszystko usunąć. Pisz tekst domyślny tuż przy znacznikach.

HTML wewnątrz textarea nie jest renderowany; <b>hi</b> między znacznikami wyświetla się jako dosłowny tekst.

Szerokość, zmiana rozmiaru i automatyczne rośnięcie

Przeglądarki pozwalają czytelnikowi zmieniać rozmiar textarea przez przeciąganie rogu. CSS resize to ogranicza, a width: 100% z box-sizing: border-box sprawia, że pole dokładnie wypełnia kontener:

<!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>

Ostatnia resetuje swoją wysokość, a potem przy każdym naciśnięciu klawisza ustawia ją na scrollHeight (wysokość treści i paddingu) plus obramowanie. Wpisz do niej kilka linii: nigdy nie pokaże paska przewijania. resize: vertical to najprzyjaźniejsza wartość domyślna: długie odpowiedzi dostają miejsce, a nikt nie może rozciągnąć pola szerzej niż układ.

Przeglądarki oparte na Chromium potrafią zrobić automatyczne rośnięcie w samym CSS przez field-sizing: content. Przeglądarki bez tej obsługi ignorują tę linię i zachowują zwykły rozmiar, więc można ją bezpiecznie dodać, ale zostaw skrypt, jeśli rosnące pole ma dostać każdy czytelnik.

maxlength i licznik znaków

maxlength blokuje wpisywanie po określonej liczbie znaków. Sam w sobie nie daje żadnego ostrzeżenia, więc czytelnik zauważa go dopiero wtedy, gdy pisanie przestaje działać. Licznik to naprawia:

<!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 sprawia, że czytniki ekranu czytają licznik razem z polem, a aria-live="polite" ogłasza jego zmiany między naciśnięciami klawiszy. maxlength egzekwuje tylko przeglądarka, więc serwer też musi sprawdzać długość.

Podziały linii w wysłanym tekście

Podziały linii wpisane przez czytelnika są wysyłane razem z tekstem. W wysłanych danych każdy z nich staje się parą znaków powrotu karetki i nowej linii (%0D%0A w formularzu zakodowanym jak URL), czego oczekuje większość serwerów. Żeby później pokazać tekst na stronie z podziałami linii, zamień je na <br> przy wyświetlaniu albo nadaj elementowi white-space: pre-line.

wrap="hard" (wymaga cols) idzie dalej: wstawia podziały linii także tam, gdzie tekst zawinął się wizualnie, więc serwer dostaje linie nie dłuższe niż cols znaków. Domyślne wrap="soft" wysyła tylko podziały wpisane przez czytelnika.

Stylowanie textarea

Chrome i Firefox dają polom textarea czcionkę o stałej szerokości, około 13px, dlatego textarea często nie pasuje do reszty strony. font: inherit to naprawia. Jeśli zmieniasz obramowanie, zostaw widoczny styl fokusu:

<!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>

Tekst placeholdera powinien mieć czytelny kontrast; jasnoszary kolor z wielu projektów trudno odczytać. I jak w każdym polu, placeholder nie jest etykietą: znika, gdy tylko czytelnik zacznie pisać. Etykiety opisuje strona label w HTML.

Częste błędy

<textarea value="...">. Nie ma atrybutu value; umieść tekst między znacznikami.
Wcinanie tekstu domyślnego razem z HTML. Spacje stają się częścią wartości.
Samozamykająca się <textarea />. To nie jest element pusty; bez </textarea> reszta strony zostaje w niej połknięta jako tekst.
Brak font: inherit, więc pole używa małej czcionki o stałej szerokości.
resize: none z małą stałą wysokością. Długie odpowiedzi lądują w malutkim przewijanym polu.
Poleganie wyłącznie na maxlength. Sprawdzaj długość także na serwerze.

Najczęściej zadawane pytania

Jak utworzyć textarea w HTML?

Napisz <textarea name="message" rows="4"></textarea> wewnątrz formularza, z elementem <label>. W odróżnieniu od <input> ma znacznik zamykający, a wszystko między znacznikami to tekst początkowy.

Jak ustawić domyślną wartość textarea?

Umieść tekst między znacznikami: <textarea name="bio">Hello</textarea>. Textarea nie ma w HTML atrybutu value. W JavaScript odczytuj i ustawiaj textarea.value.

Jak zablokować zmianę rozmiaru textarea?

Ustaw resize: none w CSS. Zwykle przyjaźniejsze jest resize: vertical: czytelnik nadal może powiększyć pole w pionie dla długiego tekstu, ale nie zepsuje układu, rozciągając je wszerz.

Jak ograniczyć liczbę znaków w textarea?

Dodaj maxlength="280". Przeglądarka przestaje przyjmować tekst po osiągnięciu tej długości. Pokaż obok licznik aktualizowany przy zdarzeniu input, żeby czytelnik wiedział, ile miejsca zostało, i sprawdzaj długość również na serwerze.

Dlaczego moja textarea używa innej czcionki?

Chrome i Firefox domyślnie dają polom textarea czcionkę o stałej szerokości, około 13px. Dodaj font: inherit, żeby dopasować ją do reszty strony.

Powiązane zagadnienia