Тег textarea (от английского text area, «текстовая область») создаёт многострочное поле ввода. Начальный текст записывают между открывающим и закрывающим тегами, а не в атрибуте value. Закрывающий </textarea> обязателен. Размер поля задают атрибуты rows и cols или CSS, а на сервер текст уходит, если у поля есть name.
Поле работает внутри тега form, а однострочный вариант описан на странице про тег input. Основы многострочного поля разобраны в уроке «Многострочное поле в HTML: textarea».
<label for="comment">Комментарий</label>
<textarea id="comment" name="comment" rows="4" cols="40">Здравствуйте!</textarea>В этой статье
- Тег textarea в HTML: что это и чем отличается от input
- Текст внутри textarea: начальное значение, value и defaultValue
- Теги внутри textarea: почему разметка не работает
- Размеры textarea: rows, cols, CSS и resize
- Автоматическая высота textarea: field-sizing и scrollHeight
- Атрибут name у textarea: что уходит на сервер
- Атрибут wrap у textarea: soft, hard и off
- Ограничения textarea: maxlength и minlength
- Тег textarea: readonly, disabled и required
- Тег textarea и JavaScript: value, выделение и события
- CSS для textarea: шрифт, рамка и псевдоклассы
- Доступность textarea: роль textbox и название поля
- Атрибуты тега textarea
- Вопросы про тег textarea: вывод текста и переносы строк
- Частые ошибки с тегом textarea
Тег textarea в HTML: что это и чем отличается от input
Многострочное поле нужно там, где текст длиннее одной строки: комментарий, отзыв, сообщение. От input оно отличается тремя особенностями. Тег парный, текст хранится в содержимом, а не в value, а перевод строки считается обычным символом. Клавиша Enter в нём добавляет перевод строки и не отправляет форму. Записывать поле можно в любом месте, где допустим текст страницы.
<input type="text" name="title">
<textarea name="message" rows="3"></textarea>Пример: input и textarea
Выберите тег, введите текст и нажмите Enter: под результатом число строк, значение и число отправок формы.
Текст внутри textarea: начальное значение, value и defaultValue
Текст между тегами становится начальным значением. Первый перевод строки сразу после открывающего тега отбрасывается, поэтому код можно записывать с новой строки. В скрипте два свойства: defaultValue хранит начальный текст, а value текущий. Пока поле не правили, они совпадают, после правки value становится самостоятельным значением. Сброс формы возвращает значение к defaultValue. Атрибут value у textarea не работает, а проверка HTML сообщает об ошибке.
<textarea name="c">
Первая
Вторая</textarea>Пример: начальный текст, value и сброс формы
Выберите запись и нажмите кнопки: под результатом value, defaultValue, textContent и данные формы.
Теги внутри textarea: почему разметка не работает
Содержимое textarea браузер читает как обычный текст. Теги внутри не разбираются: <b> остаётся символами в значении, а дочерних элементов нет. Сущности, наоборот, раскрываются: < становится знаком <. Поле заканчивается на первом </textarea>, поэтому закрывающий тег внутри текста пишут сущностями. Поэтому форматировать текст в textarea нельзя. Для жирного шрифта и списков нужен редактор на contenteditable или готовая библиотека.
<textarea name="c"><b>Жирный</b> текст</textarea>Пример: что браузер делает с тегами и сущностями
Выберите запись: под результатом значение поля и число дочерних элементов.
Размеры textarea: rows, cols, CSS и resize
Размер задают rows (строки, по умолчанию 2) и cols (символы по ширине, по умолчанию 20). Значения должны быть положительными целыми: rows="0" и cols="-5" проверка HTML считает ошибками. В вёрстке чаще используют CSS: width и height перебивают атрибуты, а max-width: 100% не даёт полю выйти за контейнер на узком экране. Угол изменения размера включён по умолчанию, им управляет resize: none, vertical, horizontal или both.
textarea {
width: 100%;
max-width: 100%;
resize: vertical;
}Пример: rows, cols, CSS-размеры и resize
Выберите запись и потяните угол поля: под результатом размеры и значение resize.
Автоматическая высота textarea: field-sizing и scrollHeight
Поле, которое растёт вместе с текстом, делают двумя способами. Современный: field-sizing: content, он поддерживается не везде, поэтому для старых браузеров нужен запасной способ. Пустое поле при этом сжимается почти в точку, поэтому задают min-width и min-height. Старый способ работает везде: на событии input сначала сбрасывают высоту в auto, а затем присваивают ей scrollHeight. Предел роста задаёт max-height, выше него появляется прокрутка.
textarea {
field-sizing: content;
min-width: 12em;
min-height: 2lh;
}Пример: рост поля вместе с текстом
Выберите способ и добавляйте строки: под результатом высота поля и scrollHeight.
Атрибут name у textarea: что уходит на сервер
Поле участвует в отправке, если у него задан name: в данные уходит пара из этого значения и текста. Переводы строк остаются в тексте, а при отправке браузер приводит их к паре \r\n. Поле без name в данные не попадает, даже если в нём есть текст. Атрибут dirname добавляет второе поле с направлением текста, например c.dir=ltr. Куда и каким методом уйдёт форма, определяет тег form.
<textarea name="message" dirname="message.dir"></textarea>Пример: что уходит в данные формы
Выберите запись и измените текст: под результатом данные формы.
Атрибут wrap у textarea: soft, hard и off
Атрибут wrap управляет переносами строк. Значение soft (по умолчанию): строки переносятся на экране, а в данные уходит текст без добавленных переносов. Значение hard: переносы, видимые на экране, добавляются и в отправляемый текст, а cols при этом обязателен, иначе проверка HTML сообщает об ошибке. Значение off: переносы по ширине выключены, поле прокручивается по горизонтали, как при white-space: pre.
<textarea name="c" rows="3" cols="12" wrap="hard"></textarea>Пример: soft, hard и off
Выберите значение: под результатом wrap, white-space и данные формы с переносами.
Ограничения textarea: maxlength и minlength
Атрибут maxlength не даёт набрать больше указанного числа символов, а minlength требует минимум. Длина считается в единицах UTF-16: перевод строки занимает одну единицу, эмодзи две. Скрипт ограничение обходит: значение, записанное через value, может быть длиннее лимита, а tooShort срабатывает только для текста, который набрал пользователь. Поэтому длину проверяют ещё и на сервере. Счётчик символов делают на событии input по value.length.
<textarea name="c" maxlength="200" minlength="10"></textarea>Пример: лимит, минимум и значение из скрипта
Выберите запись, наберите текст и нажмите кнопку: под результатом длина и состояние проверки.
Тег textarea: readonly, disabled и required
Атрибут readonly запрещает правку, но текст можно выделить и скопировать, а поле отправляется. Атрибут disabled отключает поле целиком: оно серое, не получает фокус и в данные не попадает. Атрибут required делает поле обязательным: пустое не пройдёт проверку формы. Для readonly и disabled проверка не выполняется, поэтому required рядом с ними ничего не проверяет. Поле внутри отключённого fieldset тоже отключено.
<textarea name="a" readonly>Только чтение</textarea>
<textarea name="b" disabled>Отключено</textarea>
<textarea name="c" required></textarea>Пример: что отправляется и что проверяется
Выберите запись и нажмите «Проверить форму»: под результатом проверка и данные формы.
Тег textarea и JavaScript: value, выделение и события
Текущий текст хранит свойство value, а длину отдаёт textLength. Выделением управляют selectionStart, selectionEnd и метод setSelectionRange(). Метод setRangeText() заменяет часть текста и сам переносит курсор, поэтому им удобно добавлять текст в позицию курсора. Событие input приходит на каждую правку, change только когда поле теряет фокус после правки, а select при выделении текста.
const ta = document.querySelector("textarea");
ta.setRangeText("Hello", 8, 11, "select");
ta.addEventListener("input", () => {
console.log(ta.value.length);
});Пример: чтение, выделение и события
Выберите запись и нажмите «Выполнить»: под результатом ответ скрипта.
CSS для textarea: шрифт, рамка и псевдоклассы
Браузер рисует поле моноширинным шрифтом с тонкой рамкой и угловым маркером изменения размера. Оформляется оно как обычный блок: font, padding, border, border-radius. Шрифт страницы подключают через font: inherit. Состояния описывают псевдоклассы :invalid, :valid, :placeholder-shown и :read-only, а :user-invalid включается только после правки пользователем. Подсказку оформляет ::placeholder.
textarea {
box-sizing: border-box;
font: inherit;
padding: 8px 10px;
border: 1px solid #1c9e93;
border-radius: 8px;
}
textarea:user-invalid {
border-color: #c0392b;
}Пример: шрифт, рамка и псевдоклассы
Выберите вариант и наберите текст: под результатом шрифт, рамка и состояния поля.
Доступность textarea: роль textbox и название поля
У textarea роль textbox, и менять её через role не следует: проверка HTML считает это ошибкой. Название задают через label (атрибутом for или оборачиванием) либо через aria-label. Если нет ни того, ни другого, браузер использует placeholder. Подсказка исчезает при вводе и не заменяет label.
<label for="comment">Комментарий</label>
<textarea id="comment" name="comment"></textarea>Пример: откуда берётся название поля
Выберите запись: под результатом роль и название поля.
Атрибуты тега textarea
Поле принимает глобальные атрибуты и те, что собраны в таблице. Несуществующие атрибуты отмечены отдельно: часть из них знакома по input, но у textarea браузер их игнорирует, а проверка HTML сообщает об ошибке.
| Атрибут | Статус | Что делает | Пример записи |
|---|---|---|---|
name | актуален | Значение для отправки. Без него поле в данные не попадает | name="message" |
rows | актуален | Высота в строках, по умолчанию 2 | rows="5" |
cols | актуален | Ширина в символах, по умолчанию 20 | cols="40" |
wrap | актуален | soft (по умолчанию), hard или off; для hard нужен cols | wrap="hard" cols="40" |
maxlength | актуален | Максимальная длина в единицах UTF-16 | maxlength="200" |
minlength | актуален | Минимальная длина, проверяется после правки пользователем | minlength="10" |
placeholder | актуален | Подсказка в пустом поле, переносы строк в ней работают | placeholder="Ваш отзыв" |
readonly | актуален | Запрещает правку, поле отправляется | readonly |
disabled | актуален | Отключает поле, в данные оно не попадает | disabled |
required | актуален | Делает поле обязательным | required |
form | актуален | id формы, если поле записано вне неё | form="order" |
dirname | актуален | Добавляет в данные поле с направлением текста | dirname="msg.dir" |
autocomplete | актуален | Разрешает или запрещает автозаполнение | autocomplete="off" |
spellcheck | актуален | Включает или выключает проверку орфографии | spellcheck="false" |
value | не существует | Начальный текст записывают между тегами | value="Текст" |
type | не существует | У поля нет типов, это отдельный тег | type="text" |
pattern | не существует | Шаблон проверки у textarea не работает | pattern="[a-z]+" |
size | не существует | Ширину задают cols или CSS | size="30" |
list | не существует | Подсказок из datalist у textarea нет | list="x" |
Вопросы про тег textarea: вывод текста и переносы строк
Как сохранить переносы строк и почему нельзя выводить ответ через innerHTML.
Как показать введённый текст на странице с переносами строк?
В HTML перевод строки внутри блока сворачивается в пробел, поэтому текст из поля сливается в одну строку. Переносы сохраняет стиль white-space. Значение pre-line сохраняет переносы и сжимает пробелы, а pre-wrap сохраняет и переносы, и пробелы, при этом длинная строка всё равно переносится. Заменять переводы строк тегами br не нужно.
.output {
white-space: pre-wrap;
}Пример: три значения white-space
Выберите значение и измените текст: под результатом стиль и число строк.
Можно ли выводить введённый текст через innerHTML?
Нет, если текст набрал посетитель. Всё набранное станет разметкой страницы: сломается вёрстка, а в чужом тексте может оказаться и скрипт. Для вывода используют textContent, а на сервере экранируют символы <, > и &.
out.textContent = ta.value;Пример: textContent и innerHTML
Выберите способ и измените текст: под результатом число элементов в выводе.
Частые ошибки с тегом textarea
Ошибки с этим полем в основном про начальный текст, теги и ожидания от ограничений.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Начальный текст записан в атрибуте value | Поле остаётся пустым, проверка HTML сообщает об ошибке | Записать текст между тегами |
Тег записан как <textarea /> | Закрывающего тега нет, и остаток страницы до ближайшего </textarea> становится текстом поля | Всегда писать парный тег |
| Теги внутри поля ради форматирования | Разметка остаётся обычным текстом | Использовать редактор на contenteditable или библиотеку |
wrap="hard" без cols | Запись недопустима, проверка HTML сообщает об ошибке | Задать cols |
maxlength как единственная защита | Скрипт и прямая отправка обходят ограничение | Проверять длину и на сервере |
Атрибуты type, pattern, size, list от input | Атрибуты не работают, проверка HTML сообщает об ошибке | Использовать maxlength, minlength, required и скрипт |
Вместо надписи только placeholder | Подсказка пропадает при вводе, а название поля ненадёжное | Добавить label |
field-sizing: content без min-width и min-height | Пустое поле сжимается почти в точку | Задать минимальные размеры |
| Ожидание, что первый перенос после открывающего тега попадёт в значение | Он отбрасывается, значение начинается со второй строки | Записать два переноса подряд |
