Cправочник web-дизайнера / prog3

My home page Создание интерактивных форм (бланков) Формы впервые были подробно описаны в инструкциях по использованию сервера NCSA. До введения форм в WWW был только один механизм передачи параметров - поле ключевых слов. WWW была информационно-справочной системой и только. Формы произвели революцию в технологии WWW и превратили ее в технологии открытой системы. Посредством форм стала возможна передача параметров внешним программам, которые вызываются сервером, что сделало WWW универсальным интерфейсом по всем ресурсам сети.

Наличие в HTML интерактивных форм позволяет реализовать в WWWW ситемах более сложные способы взаимодействия с пользователем по сравнению с простым использованием гипертекстовых ссылок. Вот некоторые примеры применения интерактивных форм в HTML-документах:

- обзор информации от пользователя, например, анкетирование;

- передача запроса для поиска информации в базах данных;

- передача числовой управляющей информации;

- создание кнопочного интерфейса для выбора параметров;

- обмен сообщениями и работа с системой телеконференций;

- поддержка сетевых игр.

Построение информационной системы с использованием интерактивных форм для ввода данных (будем называть их формами или бланками) включает в себя два этапа.

Первый этап - написание HTML-документа, содержащего форму (бланк).

Второй этап - создание механизма для обработки поступившей информации и отправка соответствующего ответа пользователю. При реализации этого этапа пользователь может сделать следующие вещи:

- выдать задание на их разработку;

- найти готовые программные средста;

- написать необходимую программу самостоятельно.

Как выполняется обработка форм Для обработки форм необходим WWW-сервер, называемый также HTTP-сервером, HTTP-демоном или просто HTTPD ( Hipertext Transfer Protocol Daemon). В UNIX-системах демонами называют процессы, выполняемые в фоновом режиме и реагирующие на некоторые действия ( т.е. резидентные). HTTP-сервер управляет обработкой информации, введенной и передаваемой ему посредством форм. При этом создателю форм необходимо знать:

- что происходит, когда пользователь ввел данные в форму и отправил ее ?

- куда отправляется эта информация ?

- что с ней происходит ?

- какой HTML-документ получит пользователь в качестве ответа ?

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

Такая обработка информации производится программой, называемой шлюзом, скриптом, сценарием, которые выполняются на том же компьютере, где работает HTTP-сервер. После заполнения формы последняя отправляется HTTP-серверу, адрес которого указан в соответсвующем URL. Анализируя содержимое URL, сервер определяет, какой сценарий поддерживает работу с этой формой, и передает данные для последующей обработки.

Диалог с пользователем Web-страницы Так как программа просмотра и сервер не могут устанавливать между собой длительное соединение, то они обмениваются пакетами данных. Поэтому можно привести следующий алгоритм работы пользователя с бланком:

1. Пользователь загружает Web-страницу, поддерживающую бланк, который связан с исполняемой программой, называемой сценарием (script).

2. После заполнения бланка программа просмотра обращается к соответствующему Web-серверу за сценарием, URL которого указан в странице. Она отсылает заполненный бланк на сервер, который для обработки введенных данных вызывает сценарий.

3. Сценарий анализирует данные и выделяет либо документ, либо ссылку на другой документ.

4. Сервер, получая ответ сценария, формирует необходимые пакеты и отправляет документ или ссылку на него программе просмотра.

Создание бланков в HTML Первым шагом для организации диалогового режима с пользователем является разработка страницы бланка (form page). В одном HTML-документе могут быть описаны несколько различных форм. Однако необходимо следить, чтобы две формы не являлись вложенными. В этом случае броузер будет не в состоянии обработать документ.

Формы состоят из одного или нескольких элементов управления. Элемент управления - это элемент интерфейса, который позволяет пользователю взаимодействовать с HTML-документами. Спецификация HTML предусматривает следующие элементы управления:

- строки ввода текста, используемые для ввода алфавитно-цифровой информации;

- строки ввода пароля, в которых все вводимые символы заменяются звездочками;

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

- переключатели - флаги, которые позволяют разрешать или запрещать действие той или иной опции;

- переключатели - радиокнопки - позволяют выбрать одну кнопку из списка;

- всплывающие меню и раскрывающие списки - еще один способ выбора одного элемента из списка, представляемого пользователю;

- кнопки очистки и запуска используются для сброса введенных пользователем значений и для передачи данных на Web-сервер.

Формы реализуются с помощью дескриптора <FORM> и ряда вложенных в него дескрипторов:

INPUT - поля ввода информации имеют множество типов;

TEXTAREA - поле ввода многострочного текста;

SELECT - описание меню (раскрывающих списков);

OPTION - описание элемента меню.

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

Дескриптор <FORM> с его инверсией предназначен для добавления к HTML-странице элементов бланка. Он может использоваться для создания форм с простыми кнопками, а также с зависимыми и независимыми кнопками и окнами ввода.

Данный дескриптор определяет URL сценария, который будет обрабатывать данные, и способы передачи.

Он имеет три атрибута, которые определяют:

а) тип содержащихся данных;

б) куда данные из формы будут передаваться;

в) если при этом будет использован HTTP-протокол, то какой метод будет использован при этом.

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

Атрибут ACTION="URL" (обязательный) определяет URL, которому посылается содержимое, т.е. данные формы. Это может быть относительный или абсолютный URL. Обычно это находится на HTTP-сервере, но ACTION может определять и другие URL. Например, если будет использован с MailTo URL, то содержимое формы будет послано по указанному адресу электронной почты (E-mail).

Атрибут METHOD="метод" (необязательный). Когда ACTION определяет HTTP URL, то METHOD указывает HTTP способ передачи информации к серверу. По умолчанию он принимает значение "GET", так как он является более старым.

Метод GET заставляет броузер закодировать полученную информацию в виде URL и в таком виде отослать на сервер. На сервере это значение присваивается определенной переменной окружения. Если сервер работает под управлением OS UNIX, то может получить информацию, введенную пользователем, обратившись к переменной QUERY_STRING. Этот метод ограничивает количество передаваемых данных (несколько) сотен байтов, в зависимости от того, как установлены другие переменные окружения.

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

Метод POST разработан позже и имеет больше возможностей. Вследствии ряда ограничений, накладываемых методом GET, рекомендуется применять метод POST. Во многих описаниях языка HTML даются советы по отказу от применения метода GET и заменять его на POST с целью сохранения совместимости с будущими версиями языка HTML и программного обеспечения HTTP-серверов. Вместо передачи данных через командную строку метод POST передает информацию через стандартный ввод (STDTN). Необходимо отметить, что выбор метода не делается произвольно разработчиком формы, так как он зависит от ПО сервера, с которым организуется взаимодействие.

Чтобы узнать, какие значения параметров можно применять в атрибуте METHOD в той или иной форме, следует обратиться к документации для обработки форм. Обычно на HTTP-сервер посылается данные из формы в каталог с именем cgi-bin, т.е. в URL всегда указывается он, который в дальнейшем отображается в реально существующий каталог.

Атрибут ENCTYPE="MIME type" (необязательный) определяет MIME тип посылаемых данных при использовании POST метода. Значение по умолчанию application/x-www-form-urincoded.

MIME ( Multipurpose Internet Mail Extension) - многоцелевое расширение почты Internet. Это расширенный стандарт E-mail, предусматривающий передачу нетекстовой информации (RFC 1341, 1521, 1522).

Ввод текста Для ввода текста в бланк чаще всего используется односторочное поле. Для этого используется дескриптор <INPUT>, который определяет различные редактируемые поля внутри формы. Он позволяет пользователю вводить текст длиной от одного символа до целой строки. По умолчанию максимальная длина вводимого текста ограничивается 20 символами. Этот дескриптор имеет несколько атрибутов, которые определяют тип мезанизма ввода (тектовое поле, кнопки, независимые кнопки и т.п.), имя переменной, с которой связаны вводимые данные, а также выравнивание и размер элемента ввода при отображении.

Одним из наиболее важных является атрибут NAME, который связывает вводимые значения с именем переменной. Данные, вводимые пользователем, пересылаются серверу в виде пар - Имя/Значение. Программа, анализирующая эти данные, должна использовать их для интерпретации посланных значений и понимать различные имена. Этот атрибут должен быть определен для всех элементов, реализуемых с помощью дескриптора <INPUT>, за исключением командных кнопок SUBMIT и RESET. Рекомендуется применять короткие, но содержательные имена меток, так как это будет уменьшать объем передаваемых серверу данных. Данный атрибут записывается в виде:

NAME="UserName" (обязательный)

В нем отображается название поля ввода и имя переменной, которой присваются вводимые значения.

Другим, не менее важным, является атрибут TYPE, который выбирает тип данных элемента INPUT. Остальные атрибуты используются в зависимости от того, что находится в TYPE. Данный атрибут записывается в виде:

TYPE="Type_value" (обязательный).

"Type_value" может принимать следующие значения:

- "Text";

- "CheckBox";

- "Hidden";

- "Radio";

- "Password";

- "Image";

- "Reset";

- "Submit";

- "Button".

Поле ввода пароля Иногда возникает необходимость ввода информации, отображение которой на экране нежелательно. Это относится к паролям или другой частной информации, которую не должен знать кто-либо. Для этих целей прменяется атрибут TYPE со значением "password". Например,

<INPUT TYPE="password" NAME="name1"

VALUE= "value" SIZE=40> MAXLENGTH=100>

Этот элемент позволяет создать текстовое окно, в котором вместо вводимых пользователем симвлов отображаются звездочки или какие-либо другие специальные символы. Это зависит от броузера. В остальном элемент "password" полностью аналогичен элементу "text" и имеет те же параметры (атрибуты):

NAME, VALUE, SIZE и MAXLENGTH.

Необходимо заметить, что ввод пароля не обеспечивает секретность его при передачи данных. При отправке данных на сервер не применяется никакого шифрования информации.

Кнопки опций и переключателей Данные кнопки представляют возможность выбора для пользователя предложенных вариантов параметров. Этими элементами лучше всего пользоваться, если Web-страница должна отображать одновременно все возможные варианты параметров.

Простейшие примеры:

<INPUT TYPE="checkbox" NAME="flower" VALUE="violet">

<INPUT TYPE="radio" NAME="color" VALUE="red">

Элемент "checkbox" (кнопка опций) позволяет выбрать несколько значений, то-есть элемент <INPUT> в этом случае является независимой кнопкой, значение которой по умолчанию "off", но это может быть изменено атрибутом CHECKED. Атрибут VALUE устанавливает значение, присваемое при выборе этой кнопки. Когда данные отсылаются, то посылаются только пары Имя/Значение, кнопки которых установлены в состоянии "On". Различные назависимые кнопки могут иметь различные значения для одного и того же имени, то-есть атрибут NAME у всех кнопок одинаков, и наоборот можно иметь одно и то же значение VALUE, но разные NAME.

Пример

Укажите ваше любимое животное: <P>

<INPUT TYPE="checkbox" NAME="pet" VALUE="dog" CHECKED> Собака

<INPUT TYPE="checkbox" NAME="pet" VALUE="cft"> Кошка <P>

<INPUT TYPE="checkbox" NAME="pet" VALUE="fish"> Рыба

<INPUT TYPE="checkbox" NAME="pet" VALUE="horse"

CHECKED> Лошадь <P>

<INPUT TYPE="checkbox" NAME="pet" VALUE="bird"> Птица

<INPUT TYPE="checkbox" NAME="pet" VALUE="share"> Змея <P>

<input type="submit"> <input type="reset">

Пользователь может выбрать свои любимые (pet) животные, установив соответсвующие флажки. Для каждого установленного флажка серверу будет пересылаться строка, включающая значения параметров NAME и VALUE. Если в данном примере пользователь ничего не поменял, то на сервер будет отправлены строки pet=dog и pet=horse.

Пример 1

Элемент "radio" (кнопка типа "Радио") Также представляет собой кнопку-переключатель во включенном или выключенном состоянии, только из группы взаимоисключающих переключателей, то-есть только один из них может быть включен. Нажатие на другую кнопку-переключатель приводит к тому, что новый переключатель окажется включенным, а тот, который находился во включенном состоянии ранее, выключится. Данный элемент применяется в тех случаях, когда пользователь должен выбрать один из нескольких предлогаемых альтернативных вариантов.

Пример

Ваш любимый цвет? <P>

<INPUT TYPE="radio" NAME="color" VALUE="red" CHECKED> Красный <P>

<INPUT TYPE="radio" NAME="color" VALUE="green" > Зеленый <P>

<INPUT TYPE="radio" NAME="color" VALUE="yellow"> Желтый <P>

<INPUT TYPE="radio" NAME="color" VALUE="white" > Белый <P>

<input type="submit"> <input type="reset">

Здесь первая кнопка отмечена по умолчанию путем задания атрибута CHECKED. Если пользователь выберет цвет "Зеленый", то при отправке формы на сервер будет передана строка color=green.

Пример 2

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

Внешний вид этих кнопок определятся непосредственно при выводе на экран.Так например, Netscape для кнопок "checkbox" использует квадратные кнопки, а для "radio" - круглые. Обычно кнопки группируются в один блок. Внутри блока возле каждого элемента указывается его назначение или название кнопки. Чтобы по умолчанию отметить какую-то кнопку, то используют атрибут CHECKED. Данный атрибут может быть задан по умолчанию только для одного переключателя в каждой группе.

В следующем примере переключатель используется для выбора типа сортировки элементов:

- без сортировки;

- по имени;

- по типу;

- по дате.

Будем считать, что сортировка возможна только по одному из этих критериев. По умолчанию выбираем "По имени". Неоходимо обратить внимание, что все переключатели имеют одно и то же имя "NAME"="sort", то-есть указанные кнопки находятся в одном группе.

Пример

Выберете один из методов сортировки: <br>

<INPUT TYPE="radio" NAME="sort" VALUE="nosert" > Не сортировать <br>

<INPUT TYPE="radio" NAME="color" VALUE="name" CHECKED> По имени <br>

<INPUT TYPE="radio" NAME="color" VALUE="type" > По типу <br>

<INPUT TYPE="radio" NAME="color" VALUE="date" > По дате <br>

<input type="submit"> <input type="reset">

Дескриптор <BR> указывет, чтоб кнопки переключателя выводились с новой строки.

Пример 3

В следующем примере кнопки опций позволяют выбрать несколько элементов.

Укажите критерий поиска ( отметьте то, что необходимо):

<BR> <INPUT TYPE="checkbox" NAME="seach" VALUE="title" CHECKED> Название <br>

<INPUT TYPE="checkbox" NAME="seach" VALUE="author" > Авторы <br>

<INPUT TYPE="checkbox" NAME="seach" VALUE="journal" > Журналы <br>

<INPUT TYPE="checkbox" NAME="seach" VALUE="abstract" > Аннотация <br>

<input type="submit"> <input type="reset">

Пример 4

Кнопка RESET для сброса значений HTML предусматривает возможность создания в форме кнопки для сброса введенных во все элементы формы значений и установки значений, заданных по умолчанию соответствующими атрибутами и параметрами. Этот элемент формы называется RESET и задается следующим образом:

<INPUT TYPE="reset" VALUE= "value">

В данном дескрипторе нет атрибута NAME, так как в нем отсутствует информация о передаче данных на сервер. Когда пользователь нажимает на кнопку RESET все необходимые действия выполняются броузером. Единственным параметром данного элемента является атрибут VALUE, который используется для задания надписи на кнопке. Нажатие на кнопку пользователем приводит к тому, что во всех элементах будут установлены заданные по умолчанию значения. Переключатели ("radio" и "checkbox") окажутся во включенном состоянии, если в соответствующих дескрипторах присутствует параметр CHECKED и в выключенном состоянии - при отсутствии такого параметра. В текстовых полях ("text" и "password") появятся строки, заданные атрибутом VALUE. Текстовые поля, для которых параметр VALUE не задан, будут просто очищены.

Кнопка SUBMIT для отправки формы Для отправки формы на сервер используется специальная кнопка, которая создается в форме с помощью дескриптора INPUT и атрибута TYPE со значением "submit", например

<INPUT TYPE="submit" VALUE="value" >.

Когда пользователь нажимает на эту кнопку, то данные, введенные к этому моменту в форму, отправляется на сервер по адресу, указанному в атрибуте ACTION дескриптора <FORM>.

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

При нажатии на кнопку на сервер отправляется сообщение, в котором содержатся данные элементов формы. Для пустых текстовых полей и выключенных переключателей передаются только их метки, заданные соответствующими атрибутами NAME.

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

Кнопка BUTTON для создания кнопки на экране Для для создания кнопки на экране используется специальная кнопка, которая создается в форме с помощью дескриптора INPUT и атрибута TYPE со значением "button", например

<INPUT TYPE="button" NAME="name" VALUE="value" >.

Когда пользователь нажимает на эту кнопку, то будут задействованы функции обработки событий, подключенных к этой кнопке. Атрибут в этом элементе отражает надпись, которая будет на кнопке.

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

Предположим, что в текущем бланке нужно указать имя пользователя и его код ID, который он ввел в предыдущий бланк и передать эти данные на обработку. Тогда скрытый элемент можно использовать для хранения информации в паре ИМЯ/ЗНАЧЕНИЕ как в примере:

<INPUT TYPE="hidden" NAME="name" VALUE="Федоров">

<INPUT TYPE="hidden" NAME="ID" VALUE="11234">

Скрытые пары ИМЯ/ЗНАЧЕНИЕ передаются вместе с остальными данными бланка, которые пользователь ввел для обработки. Тип "HIDDEN" элемента <INPUT> не отображается броузером, следовательно, является скрытым от пользователя. Содержимое "hidden", установленное атрибутом VALUE, также будет направлено серверу при отсылке заполненной формы. Этот элемент обычно используется для хранения состояния взаимодействия между клиентом и сервером. Обычно он помещается в FORM программой-шлюзом со стороны сервера.

Чувствительный образ Тип "IMAGE" дескриптора <INPUT> является чувствительным образом, аналогично атрибуту ISMAP/USEMAP в дескрипторе <IMG>. Атрибут SRC определяет URL изображения. Нажатие мыши на образе вызывает немедленную отсылку данных из бланка, включая координаты курсора мыши в пикселях относительно верхнего левого угла образа. Координаты отсылаются в двух парах типа ИМЯ/ЗНАЧЕНИЕ. Имя конструируется из содержимого атрибута NAME путем добавления к нему строк .х,.у для индикации координат Х и Y.

Так, если NAME был равен "plan", то координаты посылаются в парах

map.x/координата_х и map.y/координата_y.

Другие атрибуты ALIGN="top","middle","bottom" - необязательный атрибут, определяющий тип выравнивания изображения. Эквивалентен одноименному атрибуту в дескрипторе <IMG>. Этот атрибут допустим при использовании TYPE="image".

CHECKED - необязательный атрибут, указывающий на то, какая кнопка опции или переключатель выбран по умолчанию. Этот атрибут допустим при использовании TYPE="radio" или TYPE="checkbox".

MAXLENGTH="число" - необязательный атрибут, определяющий длину символьного буфера для текстового окна. "Число" задает длину буфера. Этот атрибут допустим при использовании TYPE="text" или TYPE="password". Значение может быть больше, чем размер реального окна. В этом случае с помощью клавиш перемещения курсора можно осуществлять скроллинг текста. По умолчанию это значение неограничено.

SIZE="число" - необязательный атрибут, определяющий реальный размер отображаемого окна. Когда TYPE="text" или TYPE="password", то SIZE определяет ширину окна ввода в символах.

SCR="URL" - обязательный атрибут при TYPE="image", определяющий URL изображения, который должен быть включен внутрь формы.

VALUE="значение" - обязательный атрибут при TYPE="radio", определяющий инициализируемое значение элемента ввода, т.е. то, что будет передаваться серверу.

Атрибут DISABLE защищает значения поля формы от изменения их пользователем. Часто это бывает полезным при многократных обращениях к внешним базам данных и при коррекции запросов.

Атрибут ERROR определяет текст сообщения об ошибке при непрвильном вводе.

Атрибуты MIN и MAX определяют диапазон разрешенных числовых значений для поля ввода.

Использование раскрывающихся списков Для бланков, предлагающих на выбор несколько вариантов, можно использовать списки (меню). Это позволяет не выделять на экране все элементы сразу, как это было в случае с кнопками опций и переключателями, то-есть меню представляет собой список с большим количеством вариантов на выбор, но занимает оно небольшую часть экрана.

Если не указан размер списка или SIZE=1, то броузер обычно выводит только один элемент списка. Когда пользователь щелкает на элементе, то меню разворачивается и показывает все элементы. Такой тип меню занимает меньше места и смотрится более эстетично, чем меню с помощью прокрутки.

Пример.

<SELECT SIZE=3 NAME="валюта">

<OPTION> Канадский доллар

<OPTION SELECTED> Доллар США

<OPTION> Японская йена

<OPTION> Немецкая марка

<OPTION> Английский фунт стерлингов

</SELECT>

Эдесь по умолчанию будет выделен доллар США, так как там стоит атрибут SELECTED. Без этого атрибута по умолчанию выводится первый элемент списка, то-есть канадский доллар.

Пример 5

Дескриптор <SELECT> с инверсным </SELECT> позволяет пользователю выбирать среди множества различных значений, представляя это множество как список строк. Возможные значения описываются при помощи дескриптора <OPTION>. Как и в дескрипторе <INPUT> данные к серверу поступают в виде пар ИМЯ/ЗНАЧЕНИЕ.

Атрибут MULTIPLE - необязательный. Если он указан, то дескриптор SELECT позволяет выбрать несколько пунктов из предложенного списка. Если этот атрибут не указан, то можно выбрать только одно значение.

Пример.

<SELECT SIZE=3 NAME="валюта" MULTIPLE>

Атрибут SIZE="число" - необязательный. Он определяет количество отображаемых текстовых строк. По умолчанию - только одна строка. При этом выбор из множества значений осуществляется из "всплывающего" меню. Если список содержит больше элементов, то броузер добавляет полосы прокрутки или другие элементы по передвижению по списку.

Дескриптор <OPTION> позволяет создать множество строк для выбора в <SELECT>. Инверсный дескриптор здесь не обязателен, так как по умолчанию он заканчивается или <OPTION> следующим или при достижении </SELECT>.

Атрибут VALUE="значение" - необязательный. Он определяет значение, присваемое <OPTION> в качестве альтернативной строки, возвращаемое каждой опцией. Если VALUE отсутствует, то содержимое <OPTION> посылается как значение.

Атрибут SELECTED - необязательный. Он помечает <OPTION> как выбранный элемент по умолчанию.

Пример.

<OPTION VALUE="US" SELECTED> Доллар США

Если дескриптор <SELECT> имеет атрибут MULTIPLE, то возможно наличие нескольких <OPTION> с помеченными значениями как SELECTED.

Атрибут DISABLED - необязательный. Он маркирует <OPTION> как недоступный для выбора, отображая его затемненным.

Пример.

<BODY>

<FORM METHOD="POST" ACTION="/cgi-bin/date">

Выберете Ваши любимые фрукты и ягоды:

<SELECT NAME="var_name" MULTIPLE SIZ=4>

<OPTION> Яблоко

<OPTION> Груша

<OPTION> Апельсин

<OPTION> Малина

<OPTION> Ежевика

</SELECT>

</FORM>

Пример 6

Если значение SIZE равно двум или более, то список превращается в прямоугольник с полосками прокрутки. Пользователь может выбирать из списка несколько пунктов одновременно. Для этого он должен в момент выбора держать нажатой клавишу 'Ctrl' или 'Shift' в зависимости от используемого броузера. Если пользователь выбрал несколько значений, то они будут посланы на сервер под одним и тем же именем, поэтому сценарий должен быть достаточно сообразительным, чтобы распознать такую ситуацию.

Многострочное окно Многострочное окно может применять для ввода более длинного текста в виде блоков. В простейшем случае можно указать только дескриптор <TEXTAREA> с его инверсией с атрибутом NAME, определяющим переменную, связанную с содержимым TEXTAREA. Этот элемент позволяет передавать через формы целые документы с использованием стандартных для Windows операций вырезания и копирования (cat и paste). Использование элемента TEXTAREA позволяет сэкономить место на HTML странице за счет объединения нескольких элементов TEXT в одном элементе.

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

Дескриптор <TEXTAREA> является самостоятельной командой HTML, а не разновидностью дескриптора <INPUT> с соответстующими значениями параметра TYPE. Данная команда имеет следующий формат:

<TEXTAREA NAME="name" ROWS=N_rows COLS=N_clos >

......первоначальный текст..........

</TEXTAREA>

Команда TEXTAREA требует применения закрывающего (инверсного)дескриптора. Текстовая информация, помещенная между открывающим и закрывающим дескрипторами, по умолчанию отображается в окне при первом появлении формы на экране. Если между ними текст отсутствует, то окно будет пустым.

Для установки размера текстового окна в строках и колонках символов используются атрибуты ROWS и COLS.

Пример.

<TEXTAREA NAME="question" ROWS=4 COLS=40 WRAP>

Сколько лет надо учиться?

Какие предметы надо изучать?

</TEXTAREA>

Пример 7

Атрибут WRAP указывает броузеру "заворачивать" текст на следующую строку, когда пользователь при вводе достигает правого края текстовой области. Броузер выводит на экран зону текста с горизонтальной и вертикальной полосами прокрутки. Поэтому пользователь может, не обращая внимания на размер, применять прокрутку для ввода более широких или длинных фрагментов. Текст, выводимый по умолчанию, может содержать дескрипторы HTML. Но некоторые броузеры интерпретируют их не корректно, поэтому в тексте, выводимом в окне по умолчанию, лучше всего избегать дескрипторов HTML.

ПРИМЕЧАНИЕ Некоторые броузеры не используют в качестве заданного по умолчанию значения текст, записанный между дескрипторами <TEXTAREA> и </TEXTAREA>. При отображении документа на экране этот текст появляется вне окна ввода текстового поля. Единственный способ попытаться справиться с этой проблемой - записать дескриптор <TEXTAREA> с атрибутом VALUE, присвоив последнему необходимое текстовое значение. В некоторых броузерах применяется именно этот способ задания по умолчанию текста в текстовом блоке.

Таблица применения атрибутов для элементов формы ЭлементCHECKEDMAXLENGTHNAME SIZEVALUE Независимые переключатели?+ + Радиокнопки (взаимоисключающие переключатели)+ ++ Строка ввода?+? ? Строка ввода пароля?+? ? Скрытый элемент+ Кнопка Submit + Кнопка Reset + Кнопка Button+ + Здесь знак '+' - требуется обязательно; '?' - не обязателен. Контрольные вопросы Как выполняется обработка форм?

Виды форм и способы их создания.

Сброс значений в формах.

Отправка формы.

Создание кнопки на экране.

Создание всплывающих меню.