Исполняемые доки HTML: Textarea

Q: Как сделать textarea в HTML?

Напишите внутри формы, с . В отличие от , у него есть закрывающий тег, и все, что между тегами, это начальный текст.

Q: Как задать значение textarea по умолчанию?

Напишите текст между тегами: Hello . Атрибута value у textarea в HTML нет. В JavaScript читайте и задавайте textarea.value.

Q: Как запретить изменение размера textarea?

Задайте в CSS resize: none. Обычно удобнее resize: vertical: читатель по-прежнему может сделать поле выше для длинного текста, но не сломает раскладку, растянув его в ширину.

Q: Как ограничить количество символов в textarea?

Добавьте maxlength="280". На этой длине браузер перестает принимать ввод. Покажите рядом счетчик, который обновляется по событию input, чтобы читатель знал, сколько места осталось, и проверяйте длину также на сервере.

Как сделать textarea

<textarea> это текстовое поле на несколько строк: сообщения, комментарии, описания. rows задает его видимую высоту в строках. Напишите несколько строк и нажмите 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>

От <input> отличаются две вещи: textarea нужен закрывающий тег, а начальный текст пишется между тегами, а не в атрибуте value. Его name отправляется с текстом в качестве значения, вместе с переносами строк.

Атрибуты textarea

Атрибут	Что делает
`name`	Ключ, под которым отправляется текст
`rows`	Видимая высота в строках (по умолчанию 2)
`cols`	Видимая ширина в символах (по умолчанию 20); обычно лучше CSS `width`
`placeholder`	Подсказка, видимая, пока поле пустое
`maxlength`, `minlength`	Ограничения длины в символах
`required`	Поле не должно быть пустым
`readonly`	Текст можно выделить и скопировать, но не редактировать; все равно отправляется
`disabled`	Полем нельзя пользоваться; не отправляется
`wrap`	`soft` (по умолчанию) или `hard`, см. ниже
`spellcheck`	`true` или `false`

Текст по умолчанию пишется между тегами

Все, что между <textarea> и </textarea>, это начальный текст точно в том виде, как написан: вместе с пробелами, табуляциями и переносами строк. Игнорируется только один перенос строки сразу после открывающего тега. Из-за этого отступы становятся ловушкой:

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

Второй textarea начинается с четырех пробелов и заканчивается переносом строки и еще двумя пробелами, и все это читателю придется удалять. Пишите текст по умолчанию вплотную к тегам.

HTML внутри textarea не отображается как разметка; <b>hi</b> между тегами показывается как этот буквальный текст.

Ширина, изменение размера и автоматический рост

Браузеры позволяют читателю менять размер textarea, потянув за угол. CSS resize это ограничивает, а width: 100% вместе с box-sizing: border-box заставляет поле точно заполнить контейнер:

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

Последнее поле при каждом нажатии клавиши сбрасывает высоту, а затем задает ее равной scrollHeight (высота содержимого и внутренних отступов) плюс рамки. Напишите в него несколько строк: полоса прокрутки так и не появится. resize: vertical это самый удобный вариант по умолчанию: длинные ответы получают место, и никто не может растянуть поле шире раскладки.

Браузеры на Chromium умеют автоматически увеличивать высоту одним CSS через field-sizing: content. Браузеры без поддержки игнорируют эту строку и сохраняют обычный размер, поэтому ее безопасно добавлять, но оставьте скрипт, если растущее поле должно быть у всех читателей.

maxlength и счетчик символов

maxlength останавливает ввод на заданном количестве символов. Сам по себе он не предупреждает, поэтому читатель замечает ограничение, только когда ввод перестает работать. Счетчик это исправляет:

<!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 заставляет программы чтения с экрана зачитывать счетчик вместе с полем, а aria-live="polite" объявляет его изменения между нажатиями клавиш. maxlength соблюдается только браузером, поэтому сервер тоже должен проверять длину.

Переносы строк в отправленном тексте

Переносы строк, сделанные читателем, отправляются вместе с текстом. В отправленных данных каждый становится парой «возврат каретки и перевод строки» (%0D%0A в форме, закодированной для URL), и это то, что ожидает большинство серверов. Чтобы позже показать текст на странице с переносами, либо преобразуйте их в <br> при выводе, либо задайте элементу white-space: pre-line.

wrap="hard" (ему нужен cols) идет дальше: он также вставляет переносы строк там, где текст визуально перенесся, так что сервер получает строки не длиннее cols символов. Значение по умолчанию, wrap="soft", отправляет только переносы, которые ввел читатель.

Оформление textarea

Chrome и Firefox дают textarea моноширинный шрифт размером около 13px, поэтому textarea часто выглядит чужеродно. font: inherit это исправляет. Если меняете рамку, сохраните видимый стиль фокуса:

<!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 должен быть достаточно контрастным для чтения; светло-серый, который используют многие дизайны, читается с трудом. И, как у любого поля, placeholder не является подписью: он исчезает, как только читатель начинает печатать. Подписи описаны на странице label в HTML.

Частые ошибки

<textarea value="...">. Атрибута value нет; пишите текст между тегами.
Текст по умолчанию с отступами, как у остального HTML. Пробелы становятся частью значения.
Самозакрывающийся <textarea />. Это не пустой элемент; без </textarea> вся оставшаяся страница проглатывается в него как текст.
Нет font: inherit, и поле использует мелкий моноширинный шрифт.
resize: none с маленькой фиксированной высотой. Длинные ответы оказываются в крошечном поле с прокруткой.
Только maxlength. Проверяйте длину и на сервере.

Часто задаваемые вопросы

Как сделать textarea в HTML?

Напишите <textarea name="message" rows="4"></textarea> внутри формы, с <label>. В отличие от <input>, у него есть закрывающий тег, и все, что между тегами, это начальный текст.

Как задать значение textarea по умолчанию?

Напишите текст между тегами: <textarea name="bio">Hello</textarea>. Атрибута value у textarea в HTML нет. В JavaScript читайте и задавайте textarea.value.

Как запретить изменение размера textarea?

Задайте в CSS resize: none. Обычно удобнее resize: vertical: читатель по-прежнему может сделать поле выше для длинного текста, но не сломает раскладку, растянув его в ширину.

Как ограничить количество символов в textarea?

Добавьте maxlength="280". На этой длине браузер перестает принимать ввод. Покажите рядом счетчик, который обновляется по событию input, чтобы читатель знал, сколько места осталось, и проверяйте длину также на сервере.

Почему у textarea другой шрифт?

Chrome и Firefox по умолчанию дают textarea моноширинный шрифт размером около 13px. Добавьте font: inherit, чтобы он совпадал с остальной страницей.

Связанные концепции

Textarea в HTML: rows, resize, maxlength и начальный текст