Тег HTML `<textarea>`

Тег <textarea> определяет поле формы, в которое пользователи могут вводить многострочный текст. В отличие от тега <input>, перенос текста внутри <textarea> допускается при отправке формы.

Текстовое поле может содержать неограниченное количество символов. По умолчанию текст внутри этого тега отображается пропорциональным шрифтом.

<textarea> используется внутри тега <form>.

Синтаксис

Тег <textarea> состоит из пары тегов. Содержимое записывается между открывающим (<textarea>) и закрывающим (</textarea>) тегами.

TIP

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

Пример тега HTML `<textarea>`:

Пример тега HTML <textarea>|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="post"> 
      <textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea><br />
      <input type="submit" name="submitInfo" value="Submit" />
    </form>
  </body>
</html>

Try it Yourself »

Результат

textarea example

В этом примере мы используем <textarea> для определения текстового поля, атрибут name — для задания имени этому полю (“comment”), атрибут rows — для задания его высоты (12 символов), а атрибут cols — для задания его ширины (35 символов).

Стилизация элемента `<textarea>` с помощью CSS

Тег <textarea> считается заменяемым элементом, поскольку имеет собственные внутренние размеры. Стилизовать этот тег с помощью обычного CSS довольно просто.

Его допустимые и недопустимые значения можно подсвечивать с помощью псевдоклассов :valid и :invalid.

TIP

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

Пример тега HTML `<textarea>` с CSS-свойствами:

Пример текстового поля с тегом HTML <textarea>|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .comment {
        width: 60%;
        height: 100px;
        padding: 10px;
        outline: 0;
        border: 3px solid #1c87c9;
        background: #d0e2bc;
        line-height: 20px;
      }
    </style>
  </head>
  <body>
    <form>
      <p>Here we use CSS styles to customize the look of the text field.</p>
      <textarea class="comment"> Send your comments to the author.</textarea>
      <br />
      <input type="submit" name="submitInfo" value="Submit" />
    </form>
  </body>
</html>

Try it Yourself »

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

Атрибуты

Атрибут	Значение	Описание
autocomplete	on, off	Указывает, должен ли быть включён автозаполнитель для текстового поля.
autofocus	autofocus	Определяет, что текстовое поле должно автоматически получить фокус при загрузке страницы.
cols	number	Определяет видимую ширину текстового поля. Значение по умолчанию — 20 символов.
dirname	dirname	Указывает имя скрытого элемента формы, который будет содержать направление текста textarea при отправке.
disabled	disabled	Определяет, что текстовое поле должно быть отключено.
form	form_id	Определяет одну или несколько форм, к которым принадлежит текстовое поле (через id).
maxlength	number	Определяет максимальное количество символов, разрешённых в текстовом поле.
minlength	number	Определяет минимальное количество символов, разрешённых в текстовом поле.
name	text	Определяет имя для текстового поля.
placeholder	text	Определяет краткую подсказку, описывающую ожидаемое значение текстового поля. Подсказка отображается, когда поле пустое, и исчезает при получении фокуса.
readonly	readonly	Определяет, что текстовое поле доступно только для чтения.
required	required	Определяет, что текстовое поле должно быть заполнено перед отправкой формы.
rows	number	Определяет видимое количество строк в текстовом поле. Значение по умолчанию — 2.
spellcheck	true, false, default	Указывает, должен ли текст в теге `<textarea>` проверяться на орфографию встроенным браузером/ОС.
wrap	soft, hard	Определяет, как текст в текстовом поле должен переноситься при отправке формы. soft (по умолчанию): текст отправляется без дополнительных переносов строк. hard: браузер вставляет переносы строк в зависимости от ширины (требуется cols).

Тег <textarea> также поддерживает глобальные атрибуты и атрибуты событий.

Как стилизовать тег HTML <textarea>

json

{
    "tag_name": "textarea"
}

Практика

Какие есть атрибуты у тега HTML <textarea>?

Атрибут 'rows', который задаёт видимое количество строк в текстовом поле.Атрибут 'color', который изменяет цвет текста в textarea.Атрибут 'cols', который задаёт видимую ширину текстового поля в символах.Атрибут 'readonly', который делает текстовое поле доступным только для чтения.Атрибут 'background', который изменяет цвет фона textarea.

Тег HTML <textarea> ​

Синтаксис ​

Пример тега HTML <textarea>: ​

Результат ​

Стилизация элемента <textarea> с помощью CSS ​

Пример тега HTML <textarea> с CSS-свойствами: ​

Атрибуты ​

Практика ​