Тег TEXTAREA

Браузер	Internet Explorer			Netscape			Opera			Safari	Mozilla	Firefox
Версия	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

HTML:

3.2

XHTML:

1.0

1.1

Описание

Поле <TEXTAREA> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <INPUT> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

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

Синтаксис

<textarea ...>
текст
</textarea>

Параметры

cols: Ширина поля в символах.
disabled: Блокирует доступ и изменение элемента.
name: Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly: Устанавливает, что поле не может изменяться пользователем.
rows: Высота поля в строках текста.
wrap: Параметры переноса строк.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <TEXTAREA>

<form action="/cgi-bin/handler.cgi">
<p><b>Введите ваш отзыв:</b></p>
<p><textarea rows="10" cols="45"></textarea></p>
<p><input type="submit" value="Отправить"></p>
</form>

</body>
</html>

Описание параметров тега <TEXTAREA>

Параметр COLS

HTML:

3.2

XHTML:

1.0

1.1

Описание

Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис

Аргументы

Любое целое положительное число.

Значение по умолчанию

Зависит от настроек браузера и операционной системы.

Пример 2. Ширина текстового поля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TEXTAREA, параметр cols</title>
</head>
<body>

<form action="handler.php">
<p><textarea rows="10" cols="20"></textarea></p>
</form>

</body>
</html>

Параметр DISABLED

HTML:

3.2

XHTML:

1.0

1.1

Описание

Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Синтаксис

Аргументы

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

Пример 3. Блокировка поля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TEXTAREA, параметр disabled</title>
</head>
<body>

<form action="handler.php">
<p><textarea rows="10" cols="20">Активное поле</textarea>
<textarea rows="10" cols="20" disabled>Неактивное поле</textarea></p>
</form>

</body>
</html>

Параметр NAME

HTML:

3.2

XHTML:

1.0

1.1

Описание

Определяет уникальное имя элемента <TEXTAREA>. Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.

Синтаксис

Аргументы

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу <TEXTAREA> по имени соблюдайте ту же форму написания, что и в параметре name.

Значение по умолчанию

Нет.

Пример 4. Обращение к полю по имени

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TEXTAREA, параметр name</title>
<script type="text/javascript">
function dataField(f) {
alert("Вы ввели: " + f.comment.value);
}
</script>
</head>
<body>

<form action="handler.php">
<p><b>Введите комментарий</b></p>
<p><textarea rows="10" cols="20" name="comment"></textarea></p>
<p><input type="button" value="ОК" onClick="dataField(this.form)"></p>
</form>

</body>
</html>

Параметр READONLY

HTML:

3.2

XHTML:

1.0

1.1

Описание

Когда к тегу <TEXTAREA> добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Синтаксис

Аргументы

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

Пример 5. Поле только для чтения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TEXTAREA, параметр readonly</title>
</head>
<body>

<form action="handler.php">
<p><textarea rows="10" cols="20" readonly>Поле недоступно для изменения</textarea></p>
</form>

</body>
</html>

Поле только для чтения (readonly)

Параметр ROWS

HTML:

3.2

XHTML:

1.0

1.1

Описание

Высота текстового поля, которое определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.

Синтаксис

Аргументы

Любое положительное число.

Значение по умолчанию

Зависит от настроек браузера и операционной системы.

Пример 6. Высота текстового поля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TEXTAREA, параметр rows</title>
</head>
<body>

<form action="handler.php">
<p><textarea rows="10" cols="20"></textarea></p>
</form>

</body>
</html>

Параметр WRAP

HTML:

3.2

XHTML:

1.0

1.1

Описание

Параметр wrap говорит браузеру, как осуществлять перенос текста в поле <TEXTAREA> и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки <Enter> переносит текст на новую строку, и курсор устанавливается у левого края поля.

Синтаксис

Аргументы

soft: При этом параметре длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие кнопки <Enter> на клавиатуре устанавливает перенос текста, который сохраняется при отправке формы.
hard: Слова в поле переносятся механически, чтобы они поместились в размер области, и при отправке на сервер точки автоматического переноса сохраняются.
off: Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.

Значение по умолчанию

soft (Internet Explorer, Opera); off (Netscape, Firefox)

Пример 7. Использование параметра wrap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег TEXTAREA, параметр wrap</title>
</head>
<body>

<form method="post" action="/cgi-bin/handler.cgi">
<p><textarea rows="10" cols="20" wrap="hard"></textarea></p>
<p><input type="submit" value="Отправить"></p>
</form>

</body>
</html>