w3docs logo

HTML тег <textarea>

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

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

Синтаксис

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form> 
      <textarea name="comment" rows="12" cols="35">Написать комментарий автору.</textarea><br>
      <input type="submit" name="submitInfo" value="Отправить">
    </form>
  </body>
</html>

Результат

textareaexample1

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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>Пример с использованием CSS стилей</p>
      <textarea class="comment"> Написать комментарий автору.</textarea>
      <br>
      <input type="submit" name="submitInfo" value="Отправить">
    </form>
  </body>
</html>

Результат

textareaexample2

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

Атрибуты

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

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

Как добавить стиль к тегу <textarea> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <textarea>:

Цвет текста внутри тега <textarea>:

Стили форматирования текста для тега <textarea>:

Другие свойства для тега <textarea>:

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

chrome edge firefox safari opera
✓ ✓ ✓ ✓ ✓

Практикуйте свои знания

What is the purpose and usage of the <textarea> tag in HTML?
Считаете ли это полезным?