Тег <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>Результат
В этом примере мы определили текстовую область тегом <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>Результат
В этом примере мы использовали 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>:
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега <textarea>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <textarea>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <textarea>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Практикуйте свои знания
What is the purpose and usage of the <textarea> tag in HTML?
Правильный!
Неправильно!