HTML-тег <textarea>

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

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

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

Синтаксис

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

Внимание

Распространённая ошибка начинающих: <textarea> не принимает атрибут value. Значение по умолчанию размещается между открывающим и закрывающим тегами, в отличие от однострочного <input>, который использует value="…". Например, <textarea>Hello</textarea> отображает «Hello», а <input value="Hello"> тоже отображает «Hello» — но <textarea value="Hello"></textarea> не показывает ничего.

Совет

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

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

<!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>

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

Результат

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

Привязка метки к `<textarea>`

Каждое поле формы должно иметь тег <label>. Свяжите метку с текстовой областью, задав textarea атрибут id и указав это же значение в атрибуте for метки. Это позволяет программам чтения с экрана объявлять поле, а пользователям — переводить фокус в текстовую область кликом по тексту метки, что улучшает доступность и удобство использования.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <label for="comment">Your comment:</label><br />
      <textarea id="comment" name="comment" rows="6" cols="40"></textarea><br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Ограничение ввода и подсказки

Используйте атрибут maxlength, чтобы ограничить количество символов, которые может ввести пользователь, и атрибут placeholder, чтобы показать краткую подсказку внутри пустого поля. Подсказка исчезает, как только пользователь начинает вводить текст — это не значение по умолчанию, поэтому оно никогда не отправляется вместе с формой.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <label for="bio">Short bio (max 100 characters):</label><br />
      <textarea id="bio" name="bio" rows="4" cols="40" maxlength="100"
                placeholder="Tell us a little about yourself..."></textarea><br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

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

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

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

Совет

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

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

<!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>

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

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

Управление изменением размера с помощью свойства `resize`

По умолчанию большинство браузеров добавляют в угол <textarea> маркер перетаскивания, позволяющий пользователям изменять размер в обоих направлениях. Управлять этим можно с помощью CSS-свойства resize:

resize: none; — полностью отключает изменение размера.
resize: vertical; — разрешает изменять только высоту.
resize: horizontal; — разрешает изменять только ширину.
resize: both; — значение по умолчанию, разрешает изменять размер в обоих направлениях.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        width: 60%;
        padding: 8px;
      }
      .no-resize {
        resize: none;
      }
      .vertical-only {
        resize: vertical;
      }
      .horizontal-only {
        resize: horizontal;
      }
    </style>
  </head>
  <body>
    <p>Not resizable:</p>
    <textarea class="no-resize" rows="3"></textarea>
    <p>Resizable vertically only:</p>
    <textarea class="vertical-only" rows="3"></textarea>
    <p>Resizable horizontally only:</p>
    <textarea class="horizontal-only" rows="3"></textarea>
  </body>
</html>

Атрибуты

Атрибут	Значение	Описание
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> также поддерживает глобальные атрибуты и атрибуты событий.

Связанные теги

<input> — однострочные и специализированные элементы управления формой.
<form> — контейнер, группирующий и отправляющий поля формы.
<label> — метки, обеспечивающие доступность полей формы.

Практика

Какие из перечисленных атрибутов являются допустимыми атрибутами HTML-тега textarea? (Выберите все подходящие.)

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

Синтаксис

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