Элемент textarea

Текстовое поле, задаваемое в элементе input со значением type="text" (или без атрибута type) позволяет ввести только оду строку текста. Контейнерный элемент textarea создает внутри формы поле для ввода многострочного текста, отображаемое в окне Web-браузера в виде прямоугольной области с горизонтальной и вертикальной полосами прокрутки.

Помимо общих атрибутов class, dir, id, lang, style и title, для элемента textarea можно задавать следующие атрибуты:

· name – имя текстовой области;

· rows – количество видимых строк в текстовой области (если количество строк превысит это значение, в текстовой области появится вертикальная полоса прокрутки), значение этого атрибута по умолчанию зависит от Web-браузера;

· cols – количество видимых символов в строке текстовой области, значение этого атрибута по умолчанию также зависит от Web-браузера;

· readonly (без значения) – в текстовую область нельзя вводить данные (однако текст в области можно изменить, используя сценарии JavaScript);

· disabled (без значения) – если задан, текстовая область переводится в неактивное (отключенное) состояние и не реагирует на щелчок мышью.

При вводе данных в текстовую область можно вводить несколько строк. Переход на новую строку выполняется автоматически, если следующее слово не помещается на строке, либо при нажатии клавиши Enter. Во втором случае при пересылке на сервер каждая введенная строка дополняется символами "%0D%0A" (символы ASCII «Возврат каретки» и «Перевод строки» с предшествующим символом "%"). Полученные строки объединяются в одну строку, которая и отправляется на сервер с именем, задаваемым атрибутом name.

В контейнере <textarea>…</textarea> можно поместить текст, который будет первоначально отображаться в текстовой области.

Для текстовой области можно задать стили шрифта, текста (в Opera не действует свойство text-decoration), цвета и фона, а также стили полей, границ и отступов блоковой модели документа.

Для элемента textarea в интерфейсе HTMLTextAreaElement DOM2 HTML, помимо общих свойств, определены следующие свойства:

· name – значение атрибута name;

· rows – значение атрибута rows;

· cols – значение атрибута cols;

· value – текущее значение содержимого контейнера <textarea>…</textarea>;

· defaultValue – начальное значение содержимого контейнера <textarea>…</textarea>;

· readOnly (false или true) – возможность или невозможность записи в текстовую область;

· disabled (false или true) – состояние текстовой области (активное или неактивное);

· type (только для чтения) – тип для текстовой области: содержит строку "textarea";

· form (только для чтения) – содержит объект HTMLFormElement формы, к которой принадлежит текстовое поле или поле ввода пароля.

Свойства value, defaultValue, readOnly и disabled аналогичны одноименным свойствам для текстового поля и поля ввода пароля (см. 4.5.5.3.3).

Для текстовой области определены также следующие методы:

· focus() – переводит фокус клавиатуры на область (устанавливает курсор в начало текстового содержимого области);

· blur() – убирает фокус клавиатуры с области (удаляет курсор из области, если он там был, иначе не производит никакого действия);

· select() – выделяет текстовое содержимое области.

Эти методы действует аналогично одноименным методам для текстового поля и поля ввода пароля (см. 4.5.5.3.3).

Пример 4.5.31. Использование текстовой области:

1. Задание текстовой области по умолчанию в документе HTML:

<form id="selectAddForm1"

action="https://localhost/greeting.asp" method="get">

<p>Введите Ваш запрос:</p>

<textarea name="questArea1"></textarea>

&nbsp;&nbsp;&nbsp;

<input type="submit" value="Обработка"/>

</form>

Первоначальный вывод Web-страницы будет иметь следующий вид:

После ввода данных:

и нажатия кнопки Обработка на Web-сервер будет послана следующая строка:

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

2. Задание в документе HTML текстовой области указанного размера и с использованием стилей:

<form id="selectAddForm2"

action="https://localhost/greeting.asp"

method="get">

<p>Введите Ваш запрос:</p>

<textarea cols="30" rows="5" name="questArea2"

style="color: blue; background-color: yellow;

font-weight: bold; font-size: 14pt;

font-family: Courier New;

background-image: url('images/brownbg02.gif')">

</textarea>

<br/><br/>

<input type="submit" value="Обработка"/>

</form>

Вывод Web-страницы (после заполнения текстовой области содержимым) будет иметь следующий вид:

3. Задание в документе HTML текстовой области с первоначальным содержимым, текстовой области только для чтения и отключенной текстовой области:

<form>

<h3>Использование текстовой области<br/>

с предварительно заданным текстом</h3>

<p>Введите Ваш запрос:</p>

<textarea cols="25" rows="5">Введите вместо этого

текста Ваш запрос</textarea>

<h3>Использование текстовой области<br/>

с предварительно заданным текстом<br/>

без возможности его корректировки</h3>

<p>Расписание занятий:</p>

<textarea cols="25" rows="4" readonly>1. Математика

2. Физика

3. Химия

4. Английский язык</textarea>

<h3>Отключение текстовой области</h3>

<p class="msggreen">Расписание занятий:</p>

<textarea cols="25" rows="4" disabled>1. Математика

2. Физика

3. Химия

4. Английский язык</textarea>

</form>

Вывод Web-страницы для этих текстовых областей будет иметь следующий вид: