Работа с формами

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

До появления языка DynamicHTML формы оставались единственным средством интерактивного взаимодействия пользователя с содержимым страницы (не считая, разумеется, гиперссылок).

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

Реализация любой формы требует наличия двух программных компонентов: HTML-кода, описывающего форму, и сценария обработки вводимых пользователем данных. Сценарий может выполняться как на стороне сервера, так и на стороне клиента (то есть броузером).

Сценарий, исполняемый на стороне сервера, может быть написан на любом языке программирования: Си, Java, Perl, либо с применением других интернет-технологий (например, ColdFusion). Сценарий, выполняемый броузером, должен быть написан на языке сценариев (JavaScript или VBScript).

В качестве элементов формы могут использоваться практически те же элементы графического интерфейса, что и на диалоговых панелях «настольных» приложений:

кнопки (Billions);
переключатели (Radio Billions),
флажки (Checkboxes);
текстовые области (Text area);
списки (Lists);
изображения (Images).

Кроме того, форма может содержать два специфических элемента: поле выбора файла (File Field) и скрытое поле (Hidden Field).

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

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

В HomeSite наиболее удобным инструментом создания элементов формы на Web-странице является редактор тегов. Для создания сценариев обработки данных формы могут использоваться другие средства, которые будут рассмотрены в разделе «Создание сценариев на JavaScript» этой главы.

Вызов редактора тегов выполняется с помощью кнопок панели быстрой вставки, размещенных на вкладке Forms (Формы). Они разделены на четыре подгруппы (рис. 6.1):

Рис. 6.1. Вкладка Forms панели быстрой вставки

кнопка Form обеспечивает вызов окна редактора тегов для установки атрибутов тега <FORM>, главное назначение которых — описание используемого механизма пересылки данных на сервер;
кнопки второй группы предназначены для создания двух стандартных кнопок формы — Submit и Reset;
кнопки третьей группы обеспечивают добавление в форму текстовых областей (то есть элементов формы, с помощью которых пользователь вводит символьную информацию);
кнопки четвертой группы используются для создания таких элементов формы, с помощью которых пользователь вводит булевы величины («истина» — если элемент выбран и «ложь» — в противном случае); это переключатели, флажки и списки.

Несмотря на достаточно большое число кнопок, создание форм с помощью панели быстрой вставки строится на работе с панелями трех типов, показанных на рисунках 6.2, 6.3 и 6.6.

Первая из них открывается с помощью кнопки Form, вторая — при выборе любой другой кнопки, соответствующей элементу, создаваемому тегом <INPUT>, а третья — при выборе кнопки Select.

Для тега <FORM> с помощью окна редактора тегов могут быть заданы значения следующих атрибутов (см. рис. 6.2):

Рис. 6.2. Окно редактора тегов для установки атрибутов тега <FORM>

ACTION — указывает адрес сервера, на котором должен выполняться сценарий (или приложение CGI), обеспечивающий обработку перeсылаемых данных формы; если атрибут ACTION отсутствует, используется URL самого документа, содержащего форму; способ пересылки данных на сервер определяется протоколом доступа, указанным в URL, а также значениями атрибутов METHOD и ENCTYPE; значение атрибута вводится в поле Action;
METHOD — определяет метод доступа к серверу, определенному в атрибуте ACTION, и может иметь одно из двух значений: "get" или "post"; при значении "get" данные из формы добавляются непосредственно к URL сервера, поэтому метод обычно используется для таких форм, данные которых не требуют внешней обработки; при использовании метода "post" отсутствуют ограничения на объем пересылаемых данных; значение атрибута выбирается из раскрывающегося списка Method;
ENCTYPE — определяет тип кодирования данных формы для пересылки; по умолчанию используется значение "application/www-form-itrlencoded"; при использовании такой кодировки пробелы в данных заменяются символами «+», а все нестандартные символы — комбинацией символа % и шсстнадцатсричного кода пересылаемого символа в таблице ASCII; при использовании второго возможного значения "multipart/form-data " — преобразования символов не выполняются, и данные из формы пересылаются в виде MIME-докумснта; такой способ используется, когда в форме имеется поле выбора файла (то есть тег <INPUT TYPE="file">); если для атрибута указано третье возможное значение — "text/plain " — данные пересылаются в исходном виде; такой вариант применяется при использовании почтового протокола (mailto:); значение атрибута выбирается из раскрывающегося списка ЕnсТуре;

Замечание
MIME (Multipurpose Internet Mail Extension) — это так называемые многоцелевые расширения почты Интернета. Имеются в виду расширения (типы) файлов, которые разрешается использовать в Сети в качестве информационного содержимого почтовых сообщений. Всего таких типов насчитывается более четырех десятков. Наиболее часто используемые из них — это графические форматы BMP, TIP, PDF, JPEG и GIF, текстовые RTF, HTML, TXT, ТЕХ, видеофайлы MOV, AVI, MPEG, звуковые файлы WAV, AIF, SND.

NAME — задает имя формы; по этому имени к ней можно обратиться из клиентского сценария обработки формы; значение атрибута вводился в поле Name.

На вкладке HTML 4.0 дополнительно может быть указано значение атрибута TARGET (подобным одноименному атрибуту тега <А>), который позволяет указать, какое окно должно использоваться для отображения результатов обработки формы (то есть для обратной связи с читателем). Значение атрибута выбирается из раскрывающегося списка Target.

Как было отмечено выше, окно редактора тегов для установки атрибутов тега <INPUT> является универсальным, в том смысле, что оно пригодно для изменения параметров любого элемента формы, создаваемого на основе тега <INPUT>. Каждому такому элементу соответствует отдельная вкладка (рис. 6.3).

Рис. 6.З. Окно редактора тегов для установки атрибутов тега <INPUT>

Так что, решив создать один из элементов формы, вы можете определить значения атрибутов для какого-либо другого элемента. Тем не менее, за одно обращение к редактору тегов могут быть заданы атрибуты только для одного элемента формы (соответственно, и в код документа будет добавлен только один экземпляр тега <INPUT>).

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

Вначале о двух предопределенных кнопках формы — Submit и Reset.

Чтобы добавить в форму любую из них, достаточно сначала щелкнуть на соответствующей кнопке панели быстрой вставки, а затем в открывшемся окне редактора тегов (не внося никаких изменений) — на кнопке ОК. В результате в код страницы будет помещен тег <INPUT TYPE="submit"> (или <INPUT TYPE="reset">). При всей простоте такой процедуры она имеет один недостаток. Дело в том, что большинство современных броузеров интерпретируют стандартные названия этих кнопок по-своему. Например, на рис. 6.4 показана одна и та же форма, сгенерированная тремя разными броузерами (MSIE, Opera и Netscape).

Рис. 6.4. Представление одной и той же формы разными броузерами

Поэтому, если ваш сайт ориентирован на русскоязычную аудиторию, подберите для этих кнопок подходящее название (например, «Отправить» и «Отменить») и добавьте для тега <INPUT> атрибут VALUE, указав в качестве его значения название кнопки.

Еще одна особенность состоит в том, что броузер Netscape не обрабатывает элементы, если" они не вложены в тег <FORM>.

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

Между флажками и переключателями имеется два существенных различия:

переключатели отражают взаимоисключающие варианты выбора, а флажки — совместимые; поэтому в группе переключателей может быть выбран только один элемент, а в группе флажков — произвольное число (хоть все);
отсюда следствие: нельзя использовать в форме «одиночный» переключатель, их должно быть не менее двух, поскольку изменить состояние переключателя можно только выбрав другой переключатель в группе.

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

если имеется группа из нескольких элементов (флажков или переключателей), то всем им должно быть присвоено одно и то же имя;
каждый выбранный в группе элемент генерирует собственную пару имя/значение в пересылаемых данных; поэтому обязательными атрибутами для флажков и переключателей являются NAME и VALUE.

Например, чтобы поместить в форму группу переключателей, обеспечивающих выбор одного из нескольких цветов, необходимо:

1. Щелкнуть на кнопке Radio Button на панели быстрой вкладки.
2. В окне редактора тегов в поле Name ввести имя группы флажков (например, Color, как показано на рис. 6.5)
3. В поле Value указать значение, соответствующее первому переключателю в группе (например, 1).
4. В поле Caption ввести пояснение к переключателю (например, наименование цвета); это поле не связано ни с одним атрибутом элемента, оно лишь обеспечивает добавление надписи рядом с переключателем.
5. Если данный переключатель должен быть выбран по умолчанию, следует установить флажок Checked, который управляет наличием одноименного атрибута.
6. Щелкнуть на кнопке ОК.
7. В окне документа скопировать в буфер обмена сгенерированный тег <INPUT> и затем поместить в код документа требуемое число копий.
8. Скорректировать значения атрибутов VALUE у вставленных экземпляров, а также текст подписи; следует также помнить, что атрибут CHECKED может быть установлен только для одного переключателя в группе.

Рис. 6.5. Пример установки атрибутов при создании группы переключателей

Флажки и переключатели рекомендуется использовать в тех случаях, когда число альтернативных вариантов относительно невелико (не более 5—6). Если же их значительно больше, лучше использовать списки. При этом список единичного выбора работает так же, как группа переключателей, а список множественного выбора -- как группа флажков.

Данные, которые пользователь вводит в форму с помощью списка, также обрабатываются по правилам, аналогичным для флажков и переключателей — выбранному в списке пункту соответствует пара «имя/значение», где в качестве имени используется имя списка.

Чтобы создать список с помощью редактора тегов, необходимо:

1. Щелкнуть на кнопке Select на панели быстрой вкладки.
2. В окне редактора тегов (рис. 6.6) в поле Name ввести имя списка.
3. В поле Size (Размер) указать размер окна списка (его значение равно числу элементов списка, которые должны уместиться в этом окне); если значение меньше числа пунктов списка, то он будет представлен в окне броузера либо как раскрывающийся список (в случае списка единичного выбора), либо как прокручиваемый список (в случае списка множественного выбора).
4. Если требуется создать список множественного выбора, установите флажок Allow Multiple Selections (Разрешить множественный выбор).
5. С помощью элементов, имеющихся в группе Generate OPTION Tag (Создание тегов <OPTION>), описать структуру списка:
- поле Number of Tags (Количество тегов) определяет число элементов списка; при генерации HTML-кода страницы внутри тега <SELECT> будет создано соответствующее количество тегов <OPTION>;
- поле SELECT Indent level (Размер отступа от тега <SELECT>) позволяет указать, На сколько позиций табуляции будут смещены в коде документа теги <OPTION> относительно тега <SELECT>.
6. Щелкнуть на кнопке ОК, чтобы закончить работу с редактором тегов.

Рис. 6.6. Окно редактора тегов для формирования списка

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

хотя в окне установки атрибутов тега <SELECT> атрибут VALUE отсутствует, его значение для всех элементов списка генерируется автоматически;
для первого элемента списка также автоматически устанавливается атрибут SELECTED (то есть он считается выбранным по умолчанию);
параметр SELECT Indent level дееспособен только при создании списка, если впоследствии открыть окно редактора тегов с помощью команды Edit Current Tag, то новое значение этого параметра игнорируется;
если открыть окно редактора тегов для тега <SELECT> с помощью команды Edit Current Tag, и ввести в поле Number of Tags какое-либо значение, то в список будет добавлено соответствующее число новых элементов.

Относительно тегов <OPTION> следует иметь в виду следующее. На панели быстрой вставки отсугствует кнопка, непосредственно связанная с этим тегом. Тем не менее, после того, как будет создан список (то есть после того, как в код страницы будет вставлен тег <SELECT> с тегами <OPTION> внутри), с помощью команды Edit Current Tag контекстного меню может быть открыто окно редактора тегов для установки атрибутов тега <OPTION>. В этом окне представлены (и могут быть изменены) текущие значения всех основных атрибутов тега (рис. 6.7):

Рис. 6.7. Окно редактора тегов для установки атрибутов тега <OPTION>

значение, пересылаемое на сервер (Value),
состояние — выбран или нет (Selected),
наименование пункта (Text).

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