<textarea>
- 25 января 2023
Что делает тег
Тег <textarea>
создаёт многострочное поле для ввода текста.
Синтаксис тега <textarea>
<textarea rows="4" cols="50">
Введите текст здесь
</textarea>
Атрибуты rows
и cols
определяют высоту и ширину поля. Текст, заключённый между открывающим и закрывающим тегами, задаёт начальное содержимое поля.
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <textarea>
не считается семантическим, так как не придаёт никакого конкретного значения содержимому.
Примеры использования
Поле для ввода отзыва:
<label for="feedback">Оставьте отзыв:</label>
<textarea id="feedback" name="feedback" rows="6" cols="40">></textarea>
Поле для ввода адреса:
<label for="address">Введите адрес:</label>
<textarea id="address" name="address" rows="3" cols="30">></textarea>
Для чего использовать тег <textarea>
- Создать форму обратной связи.
- Добавить поле для ввода комментария к посту на форуме.
- Добавить поле ввода текста в веб-почте.
Атрибуты тега <textarea>
cols
— ширина поля в символах.
rows
— высота поля в строках.
disabled
— блокирует доступ и изменение элемента пользователем.
readonly
— Блокирует изменение содержимого элемента, но позволяет отправлять данные на сервер.
name
— уникальное имя элемента.
required
— поле обязательно для заполнения.
wrap
— как обрабатывать переносы строк.
autocomplete
— включает или выключает автозаполнение.
maxlength
— максимальная длина текста.
minlength
— минимальная длина текста.
placeholder
— текст-подсказка для пользователей.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <textarea>
не может быть использован внутри тегов <button>
и <progress>
.
Нюансы
Если необходимо, чтобы текстовая область имела значение по умолчанию, добавьте контент между открывающим и закрывающим тегами <textarea>
.
<textarea>
Текст по умолчанию
</textarea>
Поддержка браузерами
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Для ввода текста можно использовать тег <input>
с подходящими атрибутами, например, type="text"
или type="password"
.
Чем заменить тег
Тег <textarea>
можно заменить тегом <input>
. Также можно использовать сторонние редакторы текста, например, CKEditor.
Актуальность
Тег <textarea>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023