Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное

Тег 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 4 XHTML: 1.0 1.1

Описание

Поле <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

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

Синтаксис

<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

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу 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

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Определяет уникальное имя элемента <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

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Когда к тегу <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

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

Синтаксис

<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

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Параметр 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>




На главную









При использовании материалов сайта ссылка на comnew.ru обязательна!
x