HTML тег <textarea>

Значение и применение

Тег <textarea> представляет собой поле формы для создания области многострочного ввода (текстовая область). Основное отличие от тега <input> (пользовательское поле для ввода информации) заключается в том, что допускаются переносы строк (они сохраняются при отправке данных на сервер).

Попробуйте textarea в тренажёре HTML-форм: настройте поле, проверьте ввод и разберите результат.

Текстовая область может содержать неограниченное количество символов, как правило, текст внутри нее отображается браузерами моноширинным шрифтом Courier (курьер).

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (4) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьhtml.elements.textarea
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
textarea✓1✓12✓1

Версия 1 выпущена в 2004 г.

Примечание MDN (англ.)

Before Firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.

A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.

Before Firefox 89, manipulating the content of <textarea> elements using Document.execCommand() commands requires workarounds (see bug 1220696).

✓≤12.1✓≤4✓18✓4

Версия 4 выпущена в 2011 г.

Примечание MDN (англ.)

Before Firefox for Android 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.

A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.

Before Firefox for Android 89, manipulating the content of <textarea> elements using Document.execCommand() commands requires workarounds (see bug 1220696).

✓≤12.1✓≤3

Поддержка появилась не позднее версии 3 (2009 г.)

Примечание MDN (англ.)

Unlike other major browsers, a default style of opacity: 0.4 is applied to disabled <textarea> elements.

✓1.0✓4.4✓≤3

Поддержка появилась не позднее версии 3 (2009 г.)

Примечание MDN (англ.)

Unlike other major browsers, a default style of opacity: 0.4 is applied to disabled <textarea> elements.

autocomplete✓66✓79✓59✓53✓9.1✓66✓59✓47✓9.3✓9.0✓66✓9.3
new-password××✓67×××✓67×××××
one-time-code✓93✓93✓109✓79✓12✓84✓109✓60✓12✓14.0×✓12
webauthn✓108✓108×✓94×✓108×✓73×✓21.0✓108×
cols✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
dirname✓17✓79✓116✓≤12.1✓6✓18✓116✓≤12.1✓6✓1.0✓4.4✓6
disabled✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
form✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
maxlength✓4✓12✓4✓≤12.1✓5

Версия 5 выпущена в 2010 г.

Примечание MDN (англ.)

Before Safari 17, newline characters counted as two characters instead of one. See bug 249916.

✓18✓4✓≤12.1✓4.2

Версия 4.2 выпущена в 2010 г.

Примечание MDN (англ.)

Before Safari on iOS 17, newline characters counted as two characters instead of one. See bug 249916.

✓1.0✓4.4✓4.2

Версия 4.2 выпущена в 2010 г.

Примечание MDN (англ.)

Before WebView on iOS 17, newline characters counted as two characters instead of one. See bug 249916.

minlength✓40✓17✓51✓27✓10.1✓40✓51✓27✓10.3✓4.0✓40✓10.3
name✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
placeholder✓4✓12✓4✓≤12.1✓5✓18✓4✓≤12.1✓5✓1.0✓4.4✓5
Line breaks in placeholder✓36✓12✓59✓23✓16✓36✓59✓24✓16✓3.0✓37✓16
readonly✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
required✓4✓12✓4✓≤12.1✓5✓18✓4✓≤12.1✓5✓1.0✓4.4✓5
rows✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
wrap✓16✓12✓4✓≤12.1✓6✓18✓4✓≤12.1✓6✓1.0✓4.4✓6
hard✓16✓12×✓15×✓18×✓14×✓1.0✓4.4×

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут Значение Описание
autocomplete on
off 		Этот атрибут определяет, может ли значение элемента быть автоматически дополнено браузером (помощь пользователям в заполнении формы).
autofocus autofocus Указывает, что текстовая область должна автоматически получать фокус при загрузке страницы.
cols number Определяет видимую ширину текстовой области (в символах). Значение по умолчанию 20 символов.
dirname textareaname.dir Определяет специальное имя поля формы, которое используется, чтобы указать направление текста в текстовой области, оно будет подставлено браузером автоматически и отправлено на сервер вместе с формой отправки.
disabled disabled Логический атрибут, который указывает, что текстовая область должна быть отключена.
form form_id Задает одну или несколько форм к которым элемент принадлежит.
maxlength number Указывает максимальное количество символов, которое может содержаться в текстовой области (при достижении заданного числа символов дальнейший ввод невозможен).
minlength number Указывает минимальное количество символов, которое может содержаться в текстовой области.
name text Определяет имя для текстовой области.
placeholder text Указывает текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.
readonly readonly Указывает, что текстовая область доступна только для чтения.
required required Логический атрибут, который указывает, что текстовая область должна быть заполнена перед тем как форма будет отправлена.
rows number Определяет видимое количество строк в текстовой области (в символах). Значение по умолчанию 2 символа.
wrap hard
soft 		Определяет, как текст в текстовой области, должен быть перенесён, когда отправляется форма.

Примеры, попробуйте сами

Многострочный ввод

Измените текст между тегами, затем введите несколько строк в поле.

index.html
HTML
<label for="message">Сообщение</label
><textarea id="message" name="message" rows="4" cols="24">Начальный текст.</textarea>

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлены 6 новых атрибутов.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".