— HTML — Дока

Кратко

Скопировано

Тег <textarea> используется для создания многострочного поля ввода. Например, поля ввода комментария. При необходимости поле может иметь изменяемый размер.

Пример

Скопировано

<label for="story">Расскажите о себе:</label><textarea name="story" rows="5" cols="33">Frontend-разработчик со стажем</textarea>
          <label for="story">Расскажите о себе:</label>
<textarea name="story" rows="5" cols="33">Frontend-разработчик со стажем</textarea>
Открыть демо в новой вкладке

Как понять

Скопировано

На сайтах часто встречаются формы, где нужно писать многострочный текст. Например, когда нужно оставить комментарий, написать отзыв или статью. Для этих целей используется многострочное поле ввода, которое верстается тегом <textarea>. Нужно отметить, что в этом поле можно писать только чистый текст. Панели стилизации текста, как в Ворде, являются дополнительными надстройками с использованием JavaScript.

Атрибуты

Скопировано

autocomplete Скопировано

Атрибут, указывающий, нужно ли поле заполнять автоматически сохранёнными в браузере значениями. Полезно использовать, если одна и та же форма потенциально будет часто отправляться с одинаковыми значениями.

Значения атрибута:

on — поле будет автоматически заполняться значением, сохранённым в браузере во время предыдущей отправки формы

off — поле не будет заполняться браузером автоматически. Также, это значение нужно использовать, если документ предоставляет собственный метод автозаполнения полей.

Если атрибут не указать совсем, то браузер будет брать значение из атрибута

autocomplete родительского элемента <form>, либо — если родительской формы нет — из той формы, на id которой ссылается атрибуте form.

<textarea autocomplete="off"></textarea>
          <textarea autocomplete="off"></textarea>

autofocus Скопировано

Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён в данное поле ввода.

<textarea autofocus></textarea>
          
 
<textarea autofocus></textarea>

cols Скопировано

Задаёт ширину поля ввода в символах. Если атрибут задан, то должен иметь значением целое положительное число. Если не задан, то по умолчанию берётся как 20

Открыть демо в новой вкладке

disabled Скопировано

Атрибут булевого типа. Если задан, то поле отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например у контейнера <fieldset> или <form>). Если ни у одного предка вверх по дереву этот атрибут не задан, то поле доступно для редактирования.

Открыть демо в новой вкладке

При отправке формы значения из disabled-полей не будут отправлены.

form Скопировано

Атрибут указывает на элемент <form>, с которым связано поле ввода. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то <textarea> обязательно должен находиться внутри тега form>. Но если задать атрибут, то нахождение внутри формы не обязательно и <textarea> может находиться в любом месте страницы.

maxlength Скопировано

Максимальное число символов в поле (включая пробелы и переводы строк), которое может вводить пользователь. Значением должно быть положительное целое число

Открыть демо в новой вкладке

minlength Скопировано

Минимальное число символов, которое должен ввести пользователь. Этот атрибут используется при валидации поля перед отправкой формы.

name Скопировано

Имя поля. При отправке формы значение атрибута name будет ключом в отправляемом объекте

placeholder Скопировано

Подсказка для пользователя, что вводить в этом поле. Если подсказка должна быть многострочной, то можно прямо в HTML-коде переносить строки

Открыть демо в новой вкладке

Плейсхолдер должен давать только подсказку о том, как надо заполнять поле. Но это не полноценная замена тегу <label>. Если на макете у полей ввода есть только плейсхолдер, но нет лейблов, то поговорите с дизайнером 😉

readonly Скопировано

Атрибут булевого типа. Если он задан, то пользователь не может редактировать текст в поле, но по-прежнему может с ним взаимодействовать: кликать, копировать текст. При отправке формы значение поля будет отправлено как обычно.

required Скопировано

Атрибут булевого типа. Указывает, должно ли поле обязательно быть заполнено. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку

rows Скопировано

Задаёт высоту поля ввода в строках. Если атрибут задан, то должен иметь значением целое положительное число. Если не задан, то по умолчанию высота задаётся равной двум строкам.

Открыть демо в новой вкладке

spellcheck Скопировано

Атрибут указывает, должна ли быть включена проверка правописания в поле. Может принимать следующие значения:

true — проверка правописания включена

default — указывает на поведение по умолчанию. При этом значении поле ввода может наследовать значение аналогичного атрибута от родительских элементов.

false — проверка правописания выключена

wrap Скопировано

Атрибут определяет, будут ли добавлены символы переноса строк текста при отправке формы. Может принимать значения:

hard — когда форма отправляется, то браузер, основываясь на значении атрибута cols добавляет в текст служебные символы переноса строки (CR+LF). Таким образом, сохраняется информация о переносах строк, сделанных пользователем в поле ввода.

soft — значение по умолчанию. При отправке формы символы переноса строк добавлены не будут, и текст будет отправлен одной длинной строкой

Подсказки

Скопировано

💡 Поле <textarea> стилизуется так же, как и поле ввода <input>. К нему применимы все свойства блочной модели.

💡 По умолчанию поле ввода <textarea> может изменять свой размер, если потянуть за нижний правый угол. Это поведение можно изменить, управляя CSS-свойством resize.

HTML/Элемент textarea

Синтаксис

(X)HTML

<textarea> ... </textarea>

Описание

Элемент textarea (от англ. «text area» ‒ «текстовое поле») создаёт поле для ввода многострочного текста (в отличии от input допускается возможность переноса строки). Данный элемент может вмещать в себя неограниченное количество любых символов.

Примечание

Текст, вводимый в поле ввода многострочного текста, по умолчанию отображается ‘моноширинным шрифтом’ (шрифт «Courier», семейство шрифтов monospace).

Условия использования

Если предполагается отправлять содержимое textarea на сервер, то необходимо вложить данный элемент в форму) или присоединить поле ввода к ней при помощи атрибута «form». В JavaScript доступ к данному элементу можно получить через форму или при помощи глобального атрибута «id».

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.Раздел
HTML
2.0Text Area: TEXTAREAПеревод
3.2TEXTAREA multi-line text fields
4. 0117.7 The TEXTAREA element
DTD: Transitional Strict Frameset
5.04.10.11 The textarea element
5.14.10.11. The textarea element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

autocomplete
Указывает подсказку для автозаполнения поля.
autofocus
Указывает браузеру, что элемент должен получить фокус после загрузки страницы.
cols
Задаёт длину строки поля.
dirname
Указывает имя поля формы, используемое для отправки значения направления вывода текста.
disabled
Блокирует поле.
form
Присоединяет поле к форме.
inputmode
Подсказка для выбора методов ввода.
maxlength
Задаёт максимально допустимое количество символов в поле.
minlength
Задаёт минимально допустимое количество символов в поле.
name
Указывает имя поля.
placeholder
Задаёт текст-подсказку.
readonly
Блокирует возможность редактирования содержимого поля пользователем.
required
Указывает веб-браузеру, что данное поле обязательно к заполнению (перед отправкой данных на сервер).
rows
Задаёт количество видимых строк в текстовом поле.
wrap
Указывает параметры переноса строк.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент textarea</title>
</head>
<body>
<h2>Пример использования элемента «textarea»</h2>

<textarea rows=»6″ cols=»55″>
Внутри данного элемента могут располагаться любые символы, в любой последовательности и в любом количестве. В частности между открывающим и закрывающим тегом «textarea» могут располагаться любые элементы, например элемент <span>универсального контейнера стилей</span>.
</textarea>
</body>
</html>

Элемент textarea

Тег HTML

❮ Пред. Следующий ❯

Тег) тегами.

Чтобы определить размер текстового поля, используйте атрибуты rows и cols или свойства высоты и ширины CSS.

Пример тега HTML


Попробуй сам »

Результат

В этом примере мы используем

Попробуй сам »

В этом примере мы используем стили CSS для настройки внешнего вида текстового поля.

Тег

Вы можете установить высоту текстовой области, используя HTML-атрибут строк .

Пример

HTML

Цвета #

Элемент textarea доступен в нескольких цветах:

Пример

HTML

Пример

HTML

Пример

HTML

Пример

HTML

Пример

HTML

Пример

HTML

Размеры #

Элемент textarea поставляется в 4 разных размерах:

Пример

HTML 

 <дел>
  <дел>