Тег 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 |
|---|
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
|---|
Описание
Поле <TEXTAREA> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <INPUT> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Между тегами <TEXTAREA> и </TEXTAREA> можно поместить любой текст, который будет отображаться внутри поля.
Синтаксис
<textarea ...>
текст
</textarea>
Параметры
- cols
- Ширина поля в символах.
- disabled
- Блокирует доступ и изменение элемента.
- name
- Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
- readonly
- Устанавливает, что поле не может изменяться пользователем.
- rows
- Высота поля в строках текста.
- wrap
- Параметры переноса строк.
Закрывающий тег
Обязателен.
Пример 1. Использование тега <TEXTAREA>
<!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</title>
</head>
<body>
<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
Описание
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
<textarea cols="число"></textarea>
Аргументы
Любое целое положительное число.
Значение по умолчанию
Зависит от настроек браузера и операционной системы.
Пример 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
Описание
Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Синтаксис
<textarea disabled></textarea>
Аргументы
Нет.
Значение по умолчанию
По умолчанию это значение выключено.
Пример 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
Описание
Определяет уникальное имя элемента <TEXTAREA>. Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.
Синтаксис
<textarea name="имя"></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
Описание
Когда к тегу <TEXTAREA> добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.
Синтаксис
<textarea readonly></textarea>
Аргументы
Нет.
Значение по умолчанию
По умолчанию это значение выключено.
Пример 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>
Параметр ROWS
Описание
Высота текстового поля, которое определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.
Синтаксис
<textarea rows="число"></textarea>
Аргументы
Любое положительное число.
Значение по умолчанию
Зависит от настроек браузера и операционной системы.
Пример 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
Описание
Параметр wrap говорит браузеру, как осуществлять перенос текста в поле <TEXTAREA> и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки <Enter> переносит текст на новую строку, и курсор устанавливается у левого края поля.
Синтаксис
<textarea wrap></textarea>
<textarea wrap="значение"></textarea>
Аргументы
- 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>
ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS