Тег | HTML справочник
HTML тегиЗначение и применение
Тег <textarea> представляет собой поле формы для создания области многострочного ввода (текстовая область). Основное отличие от тега <input> (пользовательское поле для ввода информации) заключается в том, что допускаются переносы строк (они сохраняются при отправке данных на сервер).
Текстовая область может содержать неограниченное количество символов, как правило, текст внутри нее отображается браузерами моноширинным шрифтом Courier (курьер).
Поддержка браузерами
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| autoсomplete | on off | Этот атрибут определяет, может ли значение элемента быть автоматически дополнено браузером (помощь пользователям в заполнении формы). |
| autofocus | autofocus | Указывает, что текстовая область должна автоматически получать фокус при загрузке страницы. |
| cols | number | Определяет видимую ширину текстовой области (в символах). |
| dirname | textareaname.dir | Определяет специальное имя поля формы, которое используется, чтобы указать направление текста в текстовой области, оно будет подставлено браузером автоматически и отправлено на сервер вместе с формой отправки. |
| disabled | disabled | Логический атрибут, который указывает, что текстовая область должна быть отключена. |
| form | form_id | Задает одну или несколько форм к которым элемент принадлежит. |
| maxlength | number | Указывает максимальное количество символов, которое может содержаться в текстовой области (при достижении заданного числа символов дальнейший ввод невозможен). |
| minlength | number | Указывает минимальное количество символов, которое может содержаться в текстовой области. |
| name | text | Определяет имя для текстовой области. |
| placeholder | text | Указывает текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент. |
| readonly | readonly | Указывает, что текстовая область доступна только для чтения. |
| required | required | Логический атрибут, который указывает, что текстовая область должна быть заполнена перед тем как форма будет отправлена. |
| rows | number | Определяет видимое количество строк в текстовой области (в символах). Значение по умолчанию 2 символа. |
| wrap | hard soft | Определяет, как текст в текстовой области, должен быть перенесён, когда отправляется форма. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <textarea></title> </head> <body> <form> <textarea name = "auth_msg" rows = "10" cols = "45">Здесь Вы можете написать информацию для автора…</textarea><br> <input type = "submit" name = "submitInfo" value = "отправить"> </form> </body> </html>
В данном примере мы создали текстовую область (HTML тег <textarea>), атрибутом name присвоили ей имя (name = «auth_msg»), атрибутом rows задали высоту строк равной десяти символам (rows = «10»), и атрибутом cols указали ширину поля равной 45 символов (cols = «45»).
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).
Результат нашего примера:
Текстовая область в HTML.Отличия HTML 4.01 от HTML 5
В HTML 5 добавлены 6 новых атрибутов.Значение CSS по умолчанию
Нет.Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML тегиТег HTML текстовая область, многострочное поле
Тег <textarea> в HTML используется для создания многострочного поля для ввода, другими словами, текстовой области.
Текстовое поле для ввода, созданное с помощью тега <textarea>, не имеет ограничений по количеству вводимых символов.
Размеры textarea HTML регулируются с помощью атрибутов rows и cols. Атрибут тега <textarea> rows регулирует высоту области, задавая количество строк, выводимых на экран без прокрутки (скроллинга). Атрибут тега <textarea> cols регулирует ширину текстовой области, рассчитывается в пикселях, как средняя ширина символа, умноженная на значение атрибута.
По умолчанию изменять размер textarea можно растягивая текстовую область за правый нижний край. Если нужно сделать <textarea> фиксированного размера, следует использовать CSS-правило resize: none;. Это отключит возможность растягивать область ввода.
Тег <textarea> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Синтаксис
<textarea>текст</textarea>Примеры использования <textarea> в HTML коде
HTML код текстовой области <textarea>
<textarea name="message" cols="30" rows="4" placeholder="Введите сообщение"></textarea><textarea> с фиксированным размером (no resize textarea)
По умолчанию пользователь может изменять размер текстовой области <textarea> (растягивать область ввода за край).
Для того, чтобы запретить изменение размера <textarea> используйте CSS свойство resize. Значение none поставит запрет на изменение размеров текстовой области, как ширины, так и высоты.
Если необходимо, чтобы у textarea была фиксированная ширина, установите значение у CSS свойства resize в vertical, при этом высоту области можно будет изменить. Если нужно иметь возможность изменять ширину <textarea> при фиксированной высоте, используйте значения horizontal.
Отображение в браузере:
HTML код <textarea> с фиксированной шириной и высотой
<style type="text/css">
textarea[name="details"] {
resize: none;
}
</style>
<textarea name="details" cols="30" rows="3" placeholder="Введите дополнительную информацию"></textarea>Поддержка браузерами
Атрибуты тега textarea
| Атрибут | Значения | Описание |
|---|---|---|
| autofocus | не указывается / autofocus |
Логический атрибут. Если указан, при загрузке документа фокус будет переведен на текстовую область. |
| cols | число |
Определяет ширину текстовой области. Ширина области рассчитывается в пикселях как ширина символа, умноженная на значение этого атрибута. Значение приблизительно равняется количеству символов моноширинного шрифта, которые должны занимать полную строку в текстовой области. |
| disabled | не указывается / disabled |
Логический атрибут. Если указан, делает текстовую область неактивной. Данные текстовой области, отмеченной этим атрибутом, не будут переданы на сервер при отправке формы. Также отключает возможность ввода текста в текстовую область. |
| form | id формы |
Указывает на форму, к которой относится текстовая область. Используется, если <textarea> находится вне HTML кода формы. Если текстовая область находится внутри тега <form>, то использовать атрибут form не нужно, текстовая область по умолчанию привязана к форме, внутри которой находится. |
| maxlength | число |
Определяет максимальное количество символов, которые пользователь может ввести в текстовую область. По умолчанию объем текста в текстовой области не ограничен. |
| name | текст |
Имя текстовой области. Используется при передаче данных формы на сервер. Значение (текст) текстовой области будет передано в переменной, имеющей имя, указанное в этом атрибуте. |
| placeholder | текст |
Текст, который будет отображаться внутри текстовой области, когда она не заполнена текстом. Обычно это описание того, что должен ввести пользователь, либо пример заполнения. |
| readonly | не указывается / readonly |
Логический атрибут. Если указан, пользователь не сможет изменить значение (текст) в текстовой области. Используется для создания текстовых областей, доступных только для чтения. |
| required | не указывается / required |
Логический атрибут. Если указан, текстовая область будет определена как обязательная для заполнения. Форма не будет отправлена на сервер, если текстовая область не будет заполнена. Заполнение контролируется браузером. При попытке отправить форму с незаполненной обязательной текстовой областью, браузеры обычно выводят на экран ошибку заполнения. |
| rows | число |
Определяет высоту текстовой области. В качестве значения необходимо указать количество строк, которые должны быть видны без прокрутки (скроллинга). |
| wrap | hard soft |
Определяет правила переноса строк: Значение hard: символы переноса строки будут добавлены в конце каждой строки в текстовой области. Таким образом, введенный текст из текстовой области переданный на сервер будет иметь ширину не больше, чем ширина <textarea>. Для использования этого значения необходимо указать атрибут cols. Значение soft: символы переноса ставятся там, где их ставил пользователь. Таким образом текст из текстовой области, переданный на сервер в дальнейшем сможет растягиваться под ширину тега-контейнера. Значение по умолчанию. |
Тег <textarea> также, поддерживает глобальные HTML атрибуты.
Атрибут rows тега | HTML справочник
HTML тег <textarea>Значение и применение
Атрибут rows (HTML тега <textarea>) определяет видимую высоту текстовой области (в символах). Если атрибут указан, то его значение должно быть положительным целым числом.
Обращаю Ваше внимание, что вы можете задавать значение высоты текстовой области не только в символах, но и с использованием CSS свойства height (в этом случае браузер будет игнорировать атрибут rows если он указан).
Ширину текстового поля в символах вы можете задать с использованием атрибута cols, а ширину с использованием единиц измерения — CSS свойством width.
Поддержка браузерами
Синтаксис:
<textarea rows = "number">
Значения атрибута
| Значение | Описание |
|---|---|
| number | Задает высоту области текста в символах. Значение по умолчанию 2 символа. |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута rows HTML тега <textarea></title> </head> <body> <form> <textarea rows = "3">в ы с о т а</textarea> <textarea rows = "3" style = "height:100px">в ы с о т а</textarea><br> <input type = "submit" rows = "submitInfo" value = "отправить"> </form> </body> </html>
В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом rows мы задали видимую высоту текстовой области 3 символа. Для второй текстовой области мы задали высоту элемента 100 пикселей с использованием встроенного CSS (свойство height). Как вы можете заметить, при этом браузер начинает игнорировать значение атрибута rows.
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).
Результат нашего примера:
Пример использования атрибута rows HTML тега <textarea> (высота элемента в символах).HTML тег <textarea>resize | CSS | WebReference
Указывает, можно ли пользователю изменять размеры текстового поля.
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | К <textarea> или к любому элементу, у которого свойство overflow отличается от visible |
| Анимируется | Нет |
Синтаксис
resize: none | both | horizontal | verticalОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- none
- Размеры элемента не изменяются.
- both
- Можно изменять размеры элемента по горизонтали и вертикали.
- horizontal
- Можно изменять размеры элемента только по горизонтали.
- vertical
- Можно изменять размеры элемента только по вертикали.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>resize</title> <style> textarea { resize: both; } </style> </head> <body> <p>Потяните за правый уголок, чтобы изменить размер текстового поля.</p> <p><textarea cols=»30″ rows=»7″></textarea></p> </body> </html>
Объектная модель
Объект.style.resize
Примечание
Хотя по умолчанию значение установлено как none, многие браузеры самостоятельно меняют его на both. Если вы не хотите, чтобы размер поля изменялся, задавайте явное значение none, а не оставляйте его по умолчанию.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
Как отключить изменение размера свойства textarea с помощью CSS?
<!DOCTYPE html>
<html>
<head>
<title>Disable resize property</title>
<style>
h2 {
color:green;
}
body {
text-align:center;
}
textarea {
overflow:auto;
resize:none;
width:200px;
height:100px;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>Disable resize property</h3>
<textarea>GeeksForGeeks: A computer science portal for
geeks. It is a good platform to learn programming.
</textarea>
</body>
</html>