Тег TEXTAREA

⚠️ Bymas - Форум разработчиков

Описание

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

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

Синтаксис

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

Параметры

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

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

Обязателен.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="/cgi-bin/handler.cgi">
<b>Введите ваш отзыв:</b><br>
<textarea rows="10" cols="45"></textarea>
</form>

</body>
</html>

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

Параметр COLS

Описание

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

Синтаксис

<textarea cols="число"></textarea>

Аргументы

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form>
<textarea rows="10" cols="20"></textarea>
</form>

</body>
</html>

Параметр DISABLED

Описание

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

Синтаксис

<textarea disabled></textarea>

Аргументы

Нет.

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

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

</body>
</html>

Параметр NAME

Описание

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

Синтаксис

<textarea name="имя"></textarea>

Аргументы

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

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

Нет.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function dataField(f) {
alert("Вы ввели: " + f.comment.value);
}
</script>
</head>
<body>

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

</body>
</html>

Параметр READONLY

Описание

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

Синтаксис

<textarea readonly></textarea>

Аргументы

Нет.

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

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

</body>
</html>

Параметр ROWS

Описание

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

Синтаксис

<textarea rows="число"></textarea>

Аргументы

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form>
<textarea rows="10" cols="20"></textarea>
</form>

</body>
</html>

Параметр WRAP

Описание

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

Синтаксис

<textarea wrap></textarea>
<textarea wrap="значение"></textarea>

Аргументы

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

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

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

off

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

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

</body>
</html>