VITRAGE: Примеры
· 1. "Распорки"
· 2. Изображения
· 3. "Колонтитулы"
· 4. Ссылки
· 5. Многоязычные сайты
· 6. Организация меню
· 7. Однотипные элементы
· 8. Формы и их обработка
· 9. Случайные операции
· 10. Циклы
· 11. "Ленты" данных
· 12. Внешние скрипты
· 13. Работа с файлами
· 14. "Бесконечный копирайт"
 
Практика
· Немного о стилях парсинга
· Примеры использования
· Работающие сайты
· Хостинги
· Вопросы и ответы
· Задать вопрос
· E-mail
 
Теория
· Компиляция и установка
· Идеология VITRAGE
· Оптимизация HTML
· Создание виртуальных хостов
· Создание структуры доменов
· Ваш собственный язык гипертекстовой разметки
 
О модуле
· Что такое VITRAGE
· История модуля
· Загрузить модуль
· Документация целиком
· Загрузить документацию в формате MS Word
· Слово автора
· English version
 
Технология VITRAGE
Один из витражей города Иркутска
Исходный код
· VHTML-код этой страницы (в новом окне)
· VHTML-код файла vitrage (в новом окне)
 
· Пример 8. Практичная организация форм и их обработка

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

Сначала опишем набор тэгов, необходимый для быстрой и практичной организации форм. Мы последовательно опишем тэги, необходимые для создания таких элементов форм, как hidden, text, textarea, checkbox, а также тэги <eform> и </eform> для начала и окончания описания формы. Тэг <eform> дополнительно будет осуществлять инициализацию необходимых переменных, а тэг </eform> будет содержать код кнопки submit и определение нескольких служебных переменных, которые в виде hidden будут передаваться скрипту, обрабатывающему данные формы. Итак:

<eformcustom name="" add="">
<%vitrage% eformitems=0 %noparse%="$eformitems$">
<%inc% var=eformitems>
<tr>
<td align=right$add$>$name$<%echo% str=":" %parse%="$name$">&nbsp;</td>
<td align=left><input type=hidden name="d$eformitems$" value="$name$">
</eformcustom>

</eformcustom>
</td>
</tr>
<//eformcustom>

<eformhidden name="" value="">
<eformcustom name="$name$">
<input type=hidden name="v$eformitems$" value="$value$">
</eformcustom>
</eformhidden>

<eformtext name="" value="" size=28 maxlength=250>
<eformcustom name="$name$">
<input type=text name="v$eformitems$" size=$size$ maxlength=$maxlength$ value="$value$">
</eformcustom>
</eformtext>

<eformtextarea name="" value="" cols=27 rows=6>
<eformcustom name="$name$" add=" valign=top">
<textarea name="v$eformitems$" cols=$cols$ rows=$rows$></textarea>
</eformcustom>
</eformtextarea>

<eformcheckbox name="" value="" checked="">
<%vitrage% add=" checked" %parse%="$checked$">
<%vitrage% add="" %noparse%="$checked$">
<eformcustom name="$name$">
<input type=checkbox name=v$eformitems$ value="$value$"$add$> $value$
</eformcustom>
</eformcheckbox>

<eform action="" name="" email="" descr="">
<%vitrage% add=" name=$%quot%$$name$$%quot%$" %parse%="$name$">
<%vitrage% add="" %noparse%="$name$">
<%vitrage% eformmail="$email$" eformitems="" eformdescr="$descr$">
<form$add$ action="$action$" method=post>
<table border=0 cellpadding=2 cellspacing=0>
</eform>

</eform submit="Отправить">
<%vitrage% add=" colspan=2" %parse%="$eformitems$">
<%vitrage% add="" %noparse%="$eformitems$">
<tr><td$add$ align=right>
<input type=hidden name="email" value="$eformmail$">
<input type=hidden name="descr" value="$eformdescr$">
<input type=hidden name="host" value="$%host%$">
<input type=hidden name="fb" value="$%uri%$">
<input type=submit value="$submit$">
</td></tr>
</table>
</form>
<//eform>

Позволим себе привести некоторые комментарии. Атрибуты, принимаемые тэгами <eformhidden>, <eformtext>, <eformtextarea>, <eformcheckbox> очевидны - это значения по умолчанию (value), размеры (size, rows, cols, maxlength), краткие текстовые описания (name) и атрибуты состояния (checked). Значения по умолчанию для них следует задавать в зависимости конкретных нужд, определяемых для каждого сайта индивидуально.

Тэг <eform> принимает в качестве атрибутов имя формы (name), ее краткое описание (descr), адрес скрипта-обработчика (action) и адрес электронной почты, на который будут высланы вводимые с помощью формы данные (email).

Тэг </eform> содержит один атрибут, определяющий текстовую надпись на кнопке подтверждения ввода информации (submit).

Данные формы будут передаваться в скрипт парами переменных - d1 и v1, d2 и v2 и т.д. до dN и vN, где N - общее количество элементов формы. Эти переменные содержат краткие текстовые описания элементов и данные, передаваемые с их помощью.

<eformcustom> и </eformcustom> - "служебные" тэги, используемые в дальнейших описаниях (они, в частности, формируют ячейки таблицы, заключающие в себе элементы форм, а также вычисляют порядковый номер следующего элемента формы).

Теперь мы можем легко формировать необходимые нам формы в VHTML-страницах:

<eform action="/forms/feedback.php3" name="fbForm" email="elk@elk.ru" descr="Обратная связь">
<eformtext name="Ваше имя" size=36>
<eformtext name="Компания" size=36>
<eformtext name="Адрес" size=36>
<eformtext name="Телефон, факс" size=36>
<eformtext name="E-mail" size=36>
<eformcheckbox name="Наш ответ" value="мы должны вам ответить" checked="1">
<eformtextarea name="Текст сообщения" cols=35 rows=6>
</eform>

Или, например:

<eform action="/forms/order.php3" name="orderForm" email="elk@elk.ru" descr="Заказ продукции">
<eformtext name="Ваше имя" value="(ваше ФИО)">
<eformtext name="Компания" value="(ваша компания)">
<eformtext name="E-mail">
<eformtext name="Телефон, факс">
<eformtext name="Продукция" value="Карбид кальция">
<eformtext name="Спецификации">
<eformtext name="Количество">
<eformtext name="Пункт назначения" value="(порт или ж/д станция)">
<eformtext name="Условия поставки">
<eformtext name="Дата отправки" value="(1-2-6-12 мес.)">
<eformtext name="Упаковка" value="(навалом, мешки, контейнеры и т.п.)">
<eformtext name="Способ оплаты" value="(предоплата, аккредитив и т.п.)">
<eformtextarea name="Дополнительная информация">
</eform submit="Заказать">

После того, как пользователь заполнит сформированную таким образом форму, его данные должны быть обработаны скриптом, написанным на одном из подходящих языков (например, на PHP или Perl). В скрипте необходимо будет поочередно рассматривать пары переменных d1 и v1, d2 и v2 и т.д. до тех пор, пока такие переменные будут существовать. После придания информации нужного вида (например, вида "описание: значение") данные можно переслать по электронной почте на адрес, хранимый в переменной email, сопроводив письмо комментарием descr.

После выполнения этих действий автор предлагает следующую схему действий. Скрипт, обрабатывающий данные формы, должен перенаправить пользователя обратно, на ту страницу, с которой было осуществлено отправление, воспользовавшись для этого переменными host и fb, в которых были переданы адрес хоста и адрес страницы соответственно. Кроме этого следует передать этой странице в качестве параметров сведения о том, что произошла обработка формы и, если это необходимо, сведения об ошибке. Автор рекомендует воспользоваться для этого параметрами fb (fb=1 - форма была обработана) и fe (fb=1&fe=1 - форма была обработана, произошла ошибка). На языке PHP, например, это можно осуществить так:

<?
$location = "http://$host/$fb";
if ($error) Header("Location: $location?fb=1&fe=1");
else Header("Location: $location?fb=1");
exit;
?>

В VHTML-страницу же должен быть включен код, который обработает эти переменные и оповестит пользователя о случившемся. Этот код может быть таким:

1. Описание тэга, который будет выполняться, если существует переменная fb (этот тэг сгенерирует необходимое сообщения в зависимости от значения переменной fe):

<initbodyadd>
<%vitrage% bodyadd=" onLoad=$%quot%$alert('Ваша информация отправлена. Спасибо.');$%quot%$" %noparse%="$fe$">
<%vitrage% bodyadd=" onLoad=$%quot%$alert('Произошла ошибка, ваша информация не отравлена. Извините.');$%quot%$" %parse%="$fe$">
</initbodyadd>

2. Вызов по мере необходимости описанного выше тэга:

<%setifnot% var1=fb var2=fe>
<%vitrage% bodyadd="">
<initbodyadd %parse%="$fb$">

3. Значением переменной bodyadd дополним тэг <body>, например:

<body bgcolor=#ffffff text=#000000 link=#0000ff alink=#ff0000 vlink=#000080$bodyadd$>

После выполнения приведенных выше действий необходимое сообщение будет получено пользователем в виде "JavaScript alert" (стандартного окна сообщения JavaScript) сразу же после загрузки страницы.

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