Поле TEXTAREA
представляет собой элемент формы, для создания области, в которую можно вводить несколько строк текста. В отличие от тега INPUT
в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Между тегами
и
можно поместить любой текст, который будет отображаться внутри поля.
Синтаксис
текст
Закрывающий тег
Обязателен.
Параметры
cols
- ширина поля в символах.
disabled
- блокирует доступ и изменение элемента.
name
- имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly
- устанавливает, что поле не может изменяться пользователем.
rows
- высота поля в строках текста.
wrap
- параметры переноса строк.
Пример 1
. Использование тега TEXTAREA
Введите ваш отзыв:
Описание параметров тега TEXTAREA
Параметр COLS
Описание
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
Аргументы
Любое целое положительное число.
Значение по умолчанию
Пример 2
. Ширина поля
Параметр DISABLED
Описание
Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Синтаксис
Аргументы
Нет.
Значение по умолчанию
Пример 3
. Блокирование текстового поля
Активное поле
Неактивное поле
Параметр NAME
Описание
Определяет уникальное имя элемента TEXTAREA
. Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.
Синтаксис
Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу TEXTAREA
по имени соблюдайте ту же форму написания, что и в параметре name
.
Значение по умолчанию
Нет.
Пример 4.
Обращение к полю по его имени
function dataField(f) {
alert("Вы ввели: " + f.comment.value);
Введите комментарий
Параметр READONLY
Описание
Когда к тегу TEXTAREA
добавляется параметр readonly
, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.
Синтаксис
Аргументы
Нет.
Значение по умолчанию
По умолчанию это значение выключено.
Пример 5.
Текстовое поле только для чтения
Поле недоступно для изменения
Параметр ROWS
Описание
Высота текстового поля, которое определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.
Синтаксис
Аргументы
Любое положительное число.
Значение по умолчанию
Зависит от настроек браузера и операционной системы.
Пример 6
. Высота текстового поля
Параметр WRAP
Описание
Параметр wrap
говорит браузеру, как осуществлять перенос текста в поле TEXTAREA
и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки переносит текст на новую строку, и курсор устанавливается у левого края поля.
Синтаксис
Аргументы
hard
- При этом параметре длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие кнопки на клавиатуре устанавливает перенос текста.
off
- Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.
Существуют и другие значения этого параметра, которые поддерживаются разными браузерами, но результат их использования похож на приведенные выше значения.
Значение по умолчанию
off
Пример 7.
Переносы в текстовом поле
В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.
1. Изображение в качестве фона, которое пропадает при вводе текста.
Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для textarea изменяется, а именно бордер толщиной в 1px изменяется на скошенную границу. Исправляется это явным указанием бордера.
Textarea {
background: url(images/benice.png) center center no-repeat;
border: 1px solid #888;
}
Фоновое изображение может повлиять на читаемость текста. Поэтому фоновое изображение надо убирать при получении фокуса и возвращать его, если textarea осталась без текста. Например, используя jQuery это можно сделать таким образом:
$("textarea")
.focus(function() {
$(this).css("background", "none");
})
.blur(function() {
if ($(this).value == "") {
$(this).css("background", "url(images/benice.png) center center no-repeat");
}
});
2. Placeholder в HTML5
В HTML5 появился новый атрибут, называемый placeholder . Значение этого атрибута показывается в текстовом элементе и исчезает при получении фокуса, а также в случае когда в элементе введён текст.
HTML5 placeholder поддерживается в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.
3. Placeholder, HTML5 с поддержкой старых браузеров используя jQuery
Самый простой способ проверить поддерживается ли атрибут браузером это проверить с помощью javaScript:
Function elementSupportsAttribute(element, attribute) {
var test = document.createElement(element);
return (attribute in test);
};
Затем можно написать код, который будет срабатывать если браузер не поддерживает атрибут placeholder .
If (!elementSupportsAttribute("textarea", "placeholder")) {
// Если браузер не поддерживает атрибут, то выполняется код jQuery
$("#example-three")
.data("originalText", $("#example-three").text())
.css("color", "#999")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("originalText")) {
this.value = "";
}
})
.blur(function() {
if (this.value == "") {
this.value = $(this).data("originalText");
}
});
} else {
// Если же браузер поддерживает HTML5, то просто используем эту возможность
$("#example-three")
.attr("placeholder", $("#example-three").text())
.text("");
}
4. Удаляем обводку textarea
Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea , когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance , либо можно просто установить элементу бордер или фон.
Textarea {
outline: none;
-moz-appearance: none;
border: 1px solid #999; /* указание этого свойства также удалит обводку в FireFox */
}
5. Запрет изменения размера
Webkit-браузеры добавляют к textarea визуальный элемент в правом нижнем углу, который позволяет изменять размер текстовой области. Если вы хотите убрать эту возможность, то вам необходимо использовать следующее css-свойство:
Textarea {
resize: none;
}
6. Добавление возможности изменения размера
jQuery UI позволяет добавить возможность изменения размера для textarea. Это работает для всех браузеров, а для webkit-браузеров подменяет стандартное поведение. Для того, чтобы использовать эту возможность, необходимо подключить jquery.ui и написать следующий код:
$("textarea").resizable();
7. Изменение размера под содержимое
James Padolsey написал удобный jQuery-скрипт который позволяет автоматически изменять размер textarea под его содержимое. Похоже что этого плагина больше нет, но можно использовать например вот этот . Плагин содержит много настроек, но самый простой способ его использовать это:
$("textarea").autoResize();
8. Nowrap
Чтобы не переносить слова на новые строки, для всех элементов используется css-свойство white-space , которое не работает с textarea . Для textarea необходимо использовать атрибут wrap .
9. Удаляем скролл-бары в IE
IE показывает вертикальный скролл-бар для всех textarea . Вы можете их спрятать используя overflow: hidden , но в таком случае он не будет показываться при увеличении контента. Поэтому правильнее использовать следующий подход:
Textarea {
overflow: auto;
}
В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.
Примеры к статье вы можете посмотреть .
Элемент
(от англ. "text area" ‒ «текстовое поле») определяет многострочное текстовое поле. Основное отличие от тега заключается в том, что допускаются переносы строк (они сохраняются при отправке данных на сервер). По умолчанию количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным начертанием.
Синтаксис
...
Закрывающий тег
Обязателен.
Атрибуты
autocomplete HTML5
Включает или отключает автозаполнение. autofocus HTML5
Указывает, что текстовая область должна автоматически получать фокус при загрузке страницы. cols Определяет видимую ширину текстовой области (в символах). Значение по умолчанию 20 символов. dirname HTML5
Параметр, который передаёт на сервер направление текста. disabled казывает, что текстовая область будет неактивна, т.е. не будет возможности вводить текст или изменять и копировать текст, заданный по умолчанию. form HTML5
Определяет форму с которой связан элемент . В качестве значения атрибута выступает идентификатор элемента . Этот атрибут позволяет размещать многострочное текстовое поле в произвольном месте документа, а не только в качестве потомка элемента . maxlength HTML5
Определяет максимально количество символов, которое можно будет ввести в текстовое поле. minlength HTML5
Указывает минимальное количество символов, которое может содержаться в текстовой области. name Определяет имя для текстового поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. placeholder HTML5
Определяет короткую подсказку, которая описывает ожидаемое значение для текстового поля. Подсказка будет отображатся в текстовом поле, когда оно пустое, и исчезнет при получение им фокуса. readonly Устанавливает, что поле не может изменяться пользователем. required HTML5
Указывает, что текстовое поле должно быть заполнено перед отправкой формы на сервер. rows Определяет видимое количество строк в текстовой области (в символах). Значение по умолчанию 2 символа. wrap HTML5
Определяет параметры переноса строк в тексте, при отправке данных на сервер:
hard
‒ браузер автоматически вставляет разрывы строки так, что каждая строка не будет иметь ширину больше, чем ширина текстового поля.
Обязательным условием использования значения hard является установленный атрибут cols.
soft
‒ текст отправляется одной сплошной строкой, дополнительные переносы строк не добавляются. Является значением по умолчанию.
Для этого элемента доступны глобальные атрибуты
и события
.
Стилизация по умолчанию
Различия между HTML 4.01 и HTML5
В HTML5 тегу
были добавлены новые атрибуты.
Пример использования:
Пример HTML:
Попробуй сам
Ознакомьтесь с соглашеием:
Условия нашего соглашения…
Ваше мнение о этом соглашении:
Введите свой комментарий…
Спецификации
Спецификация
Статус
| WHATWG HTML Living Standard (WHATWG)
|
Живой стандарт
|
| HTML 4.01 (W3C)
|
Рекомендация
|
| HTML5 (W3C)
|
Рекомендация
|
| HTML 5.1 (W3C)
|
Элемент textarea HTML
— это поле для ввода текста, состоящего из нескольких строк, и его редактирования. Он используется для ввода и редактирования длинных фрагментов текста.
Содержимое этого элемента представляет его исходное значение. Оно отображается в текстовом поле после загрузки документа или после нажатия кнопки сброса в форме.
Примеры
В первом примере мы создадим форму с элементом управления textarea
со всеми значениями по умолчанию. Также мы установим атрибут placeholder
с подсказкой относительно того, контент какого типа должен вводиться в поле. Она будет отображаться, когда текстовая область пуста:
Message to the author:
Во втором примере мы установим начальное значение в качестве содержимого HTML textarea
. Оно будет использоваться для заполнения элемента управления сразу после загрузки документа, а также после сброса формы.
В отличие от поля для ввода однострочного текста элемент textarea использует начальное значение в качестве содержимого (вместо атрибута value
):
Edit your comment:
Hi! I think you"re all wrong!
Далее мы используем атрибуты cols
и rows
, чтобы задать количество символов, которые могут одновременно отображаться в элементе управления. Браузеры рассчитывают ширину и высоту элемента, умножая эти значения на ширину и высоту символа используемого шрифта.
Ширина HTML input textarea
вычисляется относительно ширины символа используемого шрифта. Так как символы не всегда имеют одинаковую ширину, то браузеры могут использовать различные методы, чтобы округлить это значение:
Add a new description:
В следующем примере мы используем два атрибута. Они устанавливают ограничения на длину текста, который может быть введен в текстовую область. Это minlength
и maxlength
, их названия говорят сами за себя.
Соответствие minlength
проверяется только при отправке данных формы, а в maxlength
браузеры проверяют, чтобы пользователь не ввел больше символов, чем указано через этот атрибут.
Атрибут maxlength
элемента textarea HTML
хорошо поддерживается браузерами, а minlength
– нет:
Edit your biography:
Теперь мы используем атрибут required
, который был введен в HTML5
. Когда этот атрибут указан, браузер не позволяют отправить данные формы, пока соответствующее поле не будет заполнено.
Поддержка браузерами атрибута является неполной. Чтобы обеспечить этот функционал во всех браузерах, придется использовать скрипты.
Атрибуты
Специальные атрибуты
autocomplete
Указывает браузеру, должен ли он автоматически предлагать варианты при вводе данных для этого элемента управления, пытаясь угадать, что пользователь печатает. Для данного атрибута элемента HTML textarea
допустимы два значения, они не чувствительны к регистру:
- on:
браузер должен предлагать варианты автоматически. Это значение по умолчанию;
- off:
браузер не должен предлагать варианты автоматически.
Пример
:
Justify your answer:
autofocus
Логическое значение, указывающее браузеру установить фокус ввода на элементе управления после завершения загрузки документа или при открытии диалогового окна, в котором отображается элемент управления. Если атрибут имеет значение «autofocus
«, пустую строку (» «
), то элемент управления будет находиться в фокусе ввода сразу после загрузки страницы или диалогового окна.
Пример
:
cols
Ширина элемента управления, задаваемая через количество символов исходя из ширины литер текущего шрифта. Так как символы не всегда имеют одинаковую ширину, браузеры могут использовать различные методы, чтобы округлить это значение.
Значение, указанное в этом атрибуте тега textarea
в HTML
должно быть целым числом больше нуля. Если значение отсутствует или имеет некорректный формат, атрибуту будет присвоено значение по умолчанию — 20
.
Пример
:
Special thanks:
dirname
Название нового поля, предназначенного для передачи направления ввода текста. Этот атрибут, введенный в HTML5
, позволяет авторам корректно обрабатывать значения, вводимые на языках с различным направлением письма. Для этого добавляется отдельное поле, заполняемое вместе с формой. Название поля будет выступать в качестве значения атрибута.
Так как этот атрибут textarea HTML
является относительно новым, он не полностью поддерживается браузерами. Разработчики должны проверять поддержку браузерами при получении данных на стороне сервера.
Пример
:
Contribute with an idea:
disabled
Логическое значение, указывающее отключен ли данный элемент управления или нет. Если атрибут принимает значение «disabled
» или пустую строку («»
), то элемент управления отключен.
Отключенные элементы управления при отображении формы неактивны, блокируются от взаимодействия с пользователем и их значения (если таковые имеются
) не передаются при отправке данных формы.
Пример
:
A penny for your thoughts:
form
Значение атрибута идентификатора формы, с которой HTML input textarea
связан.
Этот атрибут является новым и был введен в HTML5
. Он помогает определить принадлежность элементов управления во вложенных или разделенных формах.
Пример
:
Introduction:
inputmode
Указывает, какой способ ввода является наиболее приемлемым для пользователей. Существует двенадцать возможных значений, не чувствительных к регистру:
- verbatim
: алфавитно-цифровой ввод на латинице текста, такого как имена пользователей, пароли, коды товаров и т.д.;
- latin
: ввод на латинице на предпочтительном для пользователя языке с подключением вспомогательных средств, таких как автоматическое заполнение. Предназначен для передачи данных от пользователей компьютеру. Например, через форму поиска;
- latin-name
: ввод на латинице на предпочтительном для пользователя языке, с подключением некоторых вспомогательных средств. Таких, как автоматическое заполнение предлагаемых имен из списка контактов и автоматическая установка регистра;
- latin-prose
: ввод для передачи данных от человека человеку с автоматическим заполнением предлагаемого текста и автоматической расстановкой заглавных букв в начале предложений;
- full-width-latin
: ввод на латинице на втором языке пользователя, с подключением вспомогательных средств для ввода символов в полном размере и передачи данных от человека человеку, таких как автоматическое заполнение предлагаемого текста и расстановка заглавных букв в начале предложений;
- kana
: ввод на кана или ромадзи, стандартный ввод на хирагана, использующий ввод символов в полном размере с поддержкой преобразования в кандзи. Предназначен для ввода текста на японском языке;
- kana-name
: то же самое, что и «kana
«, но с подключением вспомогательных средств для ввода человеческих имен из списка контактов;
- katakana
: ввод на катакана с использованием символов и поддержкой преобразования в кандзи. Предназначен для ввода текста на японском языке;
- numeric
: ввод цифр, включая клавиши для цифр от 0
до 9
, с использованием указанного символа, разделяющего тысячи и символа для отрицательных чисел. Рекомендуется для элемента ввода цифр;
- tel
: ввод номеров телефонов, включая клавиши цифр от 0
до 9
, символа «#
» и символа «*
«. В некоторых локальных зонах это значение атрибута HTML textarea может включать буквенные мнемонические метки. Рекомендуется для элемента ввода номера телефона;
- email
: ввод текста в локали пользователя с использованием клавиш для ввода адреса электронной почты. Например, символов «@
» и «.
«. Рекомендуется для элемента ввода адреса электронной почты;
- url
: ввод текста в локали пользователя с использованием клавиш для ввода адресов. Например, символов «/
» и «.
«, а также для быстрого ввода частей доменных имен, таких как «www
.» или «.co.uk
«. Рекомендуется для элемента управления ввода URL-адреса
.
Браузеры могут использовать информацию, содержащуюся в этом атрибуте, чтобы предоставить средства, помогающие пользователю вводить данные. Например, виртуальные экранные клавиатуры могут предоставлять специальные клавиши для выбранного режима ввода.
Пример
:
List your friends:
maxlength
Целое число, указывающее максимальное количество символов, которое может содержать значение элемента управления.
Разработчики не должны полагаться на атрибут textarea HTML maxlength
. Пользователи могут отправить данные формы через браузер, не поддерживающий эту функцию.
Пример
:
minlength
Целое число, указывающее минимальное количество символов, которое может содержать значение элемента управления.
Разработчики не должны полагаться на атрибут minlength
. Пользователи могут отправить данные формы через браузер, не поддерживающий эту функцию.
Поддержка браузерами атрибута minlength
является крайне слабой. Лучше не полагаться на этот атрибут, пока его поддержка не улучшится.
Пример
:
name
Имя тега textarea в HTML
. Оно будет отправлено браузером обработчику, связанному с содержимым элемента. Они вместе будут соответствовать паре имя-значение, которая используется для обработки данных формы.
Пример
:
placeholder
Текст подсказки, как должно быть заполнено поле (пример или краткое описание
). Браузеры могут отображать содержимое атрибута в элементе управления, хотя он не имеет никакого значения. Когда пользователь начинает вводить собственный текст, подсказка должна удаляться из элемента управления.
Пример
:
readonly
Логическое значение, указывающее браузеру запретить пользователю изменять значение элемента управления. Если атрибут имеет значение «readonly
» или пустую строку («»
), то пользователю запрещено изменять значение в элементе управления.
Хотя этот атрибут не позволяет редактировать значения элемента управления, но блокируются не все действия: пользователь все равно сможет выделить и скопировать текст в элементе управления.
Пример
:
File "config.cfg":
wait=24
login=db
autostart=yes
required
Логическое значение, указывающее на то, может ли данный элемент управления оставаться незаполненным. Если атрибут имеет значение «required
» или пустую строку («»
), то пользователь должен заполнить элемент управления, чтобы отправить данные формы.
Если HTML input textarea
с атрибутом required
не заполнен, то при попытке пользователя отправить данные формы, браузер выдаст ошибку и отменит отправку данных.
Краткий обзор полезных свойств одной из элемент формы — textarea, которые позволят решить ряд возможных проблем при верстке сайта.
Поле textarea
представляет собой один из элементов формы предназначенный для ввода многострочных данных. Рассказывать подробней не вижу смысла – читайте документацию, а вот остановиться на некоторых интересных свойствах textarea будет не лишним.
Текст по умолчанию для textarea в HTML5
Достаточно распространенное решение – вместо того чтобы описывать предназначение элемента формы отдельной строкой используется так называемый «текст по умолчанию». Обычно для этого используется простенький JavaScript для соответствующих событий.
.
Конечно, можно придумать и более удобное решение, но думаю, что суть вы уловили. В HTML5 для тега textarea появился новый атрибут placeholder (с англ. заполнитель
) позволяющий выполнить то же самое без заморочек с JavaScript.
Это свойство textarea отображает в поле указанное значение атрибута в виде текста светло-серого цвета, который исчезает при фокусировке на элементе формы. Понятно, что эта новинка работает только в тех браузерах, которые поддерживают стандарт HTML5.
Голубая подсветка у textarea
При фокусировке на элементе формы, большинство современных браузеров, подсвечивают его границы голубой рамкой. Несмотря на то, что данное свойство textarea служит улучшению юзабилити сайта, в некоторых случаях оно является неприемлемым. Для того чтобы убрать голубую подсветку в textarea можно использовать CSS-свойство outline .
Textarea {
outline: none;
-moz-appearance: button; /* for Firefox */
}
Свойство outline задает параметры внешней границы. К сожалению, это работает не для всех браузеров. Для Firefox я использую свойство -moz-appearance хотя оно предназначен для отображения элемента как стандартных пользовательских элементов на основе темы операционной системы.
Отключить маркера изменения размера textarea
Большинство современных браузеров отображают элемент textarea c маркером изменения размера текстового поля в нижнем левом его углу. Для отключения этого свойства textarea можно использовать CSS-свойство resize .
Textarea {
resize: none;
}
CSS-свойства resize может иметь и другие значения: both (по горизонтали и вертикали), horizontal (только по горизонтали), vertical (только по вертикали) и inherit (наследует значение родителя).
Текст без переносов строк в textarea
Когда количество символов в textarea превышает ширину его области, происходит автоматический перенос строки. По идее, чтобы избежать этого можно указать для textarea следующие CSS-свойства:
Textarea {
white-space: nowrap;
overflow: auto;
}
Однако такой вариант работает далеко не для всех браузеров и зачастую не так как нужно. Обычно используется свойство wrap , появившееся уже давно, но документированное лишь в HTML5.
Свойство wrap может иметь и другие значения: soft (слова переносятся автоматически) и hard (слова переносятся механически).
Убрать полосу прокрутки textarea
В браузере Internet Explorer вертикальная прокрутка textarea установлена по умолчании. Для того чтобы ее убрать, можно использовать CSS-свойство overflow , присвоив ему значение hidden, но я рекомендую использовать auto, что позволит оставить прокрутку если она действительно понадобится.
Textarea {
overflow: auto;
}
