Многостраничные диалоги в одном HMTL-документе
Достаточно часто при создании Internet-проектов формы для ввода большого количества данных (например, анкеты новых пользователей) разделяют на документы, содержащие меньшее число элементов управления. К примеру, на первом экране пользователь указывает свою контактную информацию, затем - адрес, возраст, навыки. При этом для перехода к каждой новой форме предварительно необходимо передать введенную ранее информацию на сервер. Если же пользователю необходимо вернуться на несколько экранов назад (предположим, он вспомнил, что ошибся в написании адреса электронной почты), то это требует последовательного перехода по всем заранее заполненным формам, что может повлечь за собой потерю предварительно введенной информации. О времени, которое тратится на повторную отработку скрипта, генерирующего страницу (-цы) с формой (-ми), я уже и не говорю.
В рамках данной статьи я бы хотел рассказать о том, как можно реализовать многостраничные диалоги в рамках одного HTML-документа. Тогда, с одной стороны, с точки зрения пользователя форма останется многостраничной и каждый новый экран не будет перегружен элементами ввода, а с другой - данные на сервер будут передаваться все сразу, без разделения по этапам. Такой подход позволит посетителю быстро перейти на интересующую его часть формы и избавит его от необходимости вводить информацию в том порядке, который установлен разработчиком сайта.
 Предположим, нам необходимо разработать механизм, позволяющий посетителю нашего сайта заполнить некую анкету. HTML-текст этой формы представлен ниже.
 Как видно из приведенного выше кода, указываемые пользователем данные можно разделить на следующие группы:
- контактная информация;
- адрес;
- возраст;
- навыки.
Такая форма лишена возможности привнесения в процесс ввода данных интерактивности. К примеру, на втором этапе (указание адреса) мы узнаем, что посетитель проживает за границей. Вполне вероятно, что в реальной ситуации данный факт может существенно повлиять на набор и содержание последующих вопросов. При этом, если такой механизм реализовать в рамках одной большой формы, пользователь по изменению интерфейса сразу поймет, что причиной тому - вводимая им информация. А если же экраны с элементами ввода будут разнесены, то внешний вид последующих диалогов не будет ассоциироваться с указанной ранее информацией. Кроме того, каждый экран объединяет элементы ввода, объединенные по смыслу. При использовании соответствующих технологий (CGI-скрипты, исполняемые на сервере), существует возможность организовать ввод данных как обработку нескольких отдельных форм, в том числе и динамически изменяемые набор и последовательность форм, предлагаемых пользователю. К примеру, если посетитель вашего сайта уже указывал о себе какую-либо информацию, то можно не заставлять его повторно вводить одни и те же данные.
Но вернемся к нашему примеру. Рассмотренную выше форму мы можем разделить на четыре логически замкнутые группы элементов ввода: рисунки 1, 2, 3, 4.
Если обработка форм осуществляется с использованием cgi-скриптов, то исходный код для этих HTML-документов мог бы выглядеть примерно так:
short1.htm
short2.htm
short3.htm
short4.htm
 Однако такой подход содержит в себе несколько подводных камней. Во-первых, необходимо реализовать механизм пошаговой обработки информации в рамках работы с одним пользователем (сессии). Данный механизм можно реализовать, в частности, с применением cgi-скриптов или использованием cookies, а также скрытых полей формы. Кроме того, как уже упоминалось выше, при переходе пользователя к предыдущим формам все вводимые данные должны быть указаны заново.
Применив Dynamic HTML (DHTML), мы сможем объединить несколько страниц в один документ, причем пользователь всегда будет видеть только одну из них, а переход между формами может быть реализован, к примеру, путем нажатий на соответствующие кнопки вверху экрана. При таком подходе пользователь может заполнять данные произвольно, самостоятельно выбирая, в какой последовательности передавать информацию, имея при этом возможность вернуться на предыдущую страницу без риска потерять уже введенные данные.
С использованием механизма JavaScript мы записываем форму в тег SPAN, замещая при этом диалог, отображаемый в данный момент на экране. Перед уничтожением формы нам необходимо сохранить всю введенную пользователем информацию, для чего используются обработчики событий нажатий на соответствующие кнопки.
После того как пользователь посчитает, что вся информация указана верно, он нажимает на кнопку "Отправить!" и все данные передаются на сервер за один раз. Это достигается путем использования еще одной формы, все элементы которой, кроме самой кнопки "Отправить!", скрыты от пользователя. При этом каждый из элементов ввода такой формы ставится в соответствие вводимому пользователем элементу информации.
Приведенный ниже тег SPAN послужит контейнером для форм. В начальном состоянии контейнер пуст, однако, как уже говорилось выше, мы сможем использовать DHTML для изменения его содержания.
 Теперь опишем скрытую форму, которая будет использоваться для передачи введенных пользователем данных на сервер.
 Описанная выше форма содержит несколько видимых элементов: кнопка для передачи данных на сервер и четыре кнопки, нажатие на которые приводит к переходу на один из диалогов (контактная информация, адрес, возраст, навыки). При этом последовательно выполняются две функции: update() и show(). Обратите внимание, что все поля формы имеют тип hidden.
Следующим этапом будет создание HTML-кода для каждой мини-формы. Во-первых, опишем массивы данных, входящие в состав выпадающего списка (страны), списка переключателей (возраст) и наборов опций (навыки).
var theCountries = ['Россия','США','Австралия'];
var theAges = ['0 - 17','16 - 21','22 - 30','30 - 45','45 - 60','60+'];
var theSkills = ['Java','JavaScript','VBScript',-'ASP','HTML'];
Обратите внимание, что использование массивов для описания форм позволяет быстро изменять набор и количество значений, входящих в состав выпадающих списков и различных перечислений. JavaScript-код использует описанные выше массивы при генерации соответствующих форм.
Для создания формы используется функция show(), в рамках которой в зависимости от значения передаваемого параметра (номер нажатой кнопки) формируется тот или иной диалог. Для этого применяется конструкция switch.
function show(n) {
var output = '
Значение каждого из отображаемых полей совпадает с соответствующим значением поля скрытой формы. Для текстовых полей используется свойство value, для выпадающего списка - атрибут selected, для переключателей - атрибут checked.
Мы должны иметь возможность обновлять содержимое тега SPAN. Это зависит от версии броузера, который использует пользователь. Положительный результат работы описываемого в данной статье JavaScript-кода можно ожидать в случае применения пользователем броузеров Netscape Navigator 4, а также Internet Explorer 4 и выше. Если используется Internet Explorer, то мы можем изменить значение тега SPAN путем изменения свойства innerHTML. Для Netscape Navigator следует использовать объект document.layers:
if (document.all)
document.all('myTab').innerHTML = output;
else if (document.layers) {
document.layers['myTab'].document.-open();
document.layers['myTab'].document.writeln-(output);
document.layers['myTab'].document.-close();
}
}
Единственное, что нам осталось, - это написать код, который сохранял бы данные, внесенные пользователем в одну форму, прежде чем она будет заменена другой. Эту задачу решает функция update(). По указанному номеру диалога функция определяет, какая информация и какого типа была введена пользователем и должна быть сохранена для дальнейшего использования. Для получения данных используются объект document.all или document.layers в зависимости от используемого типа броузера (Internet Explorer или Netscape Navigator соответственно).
function update(n) {
var what;
if (document.all)
what = document.all['myTab'].myForm.elements;
else if (document.layers)
what = document.layers['myTab'].document.myForm.-elements;
for (var i=0, j=what.length; i
var myType = (what[i].type).toLowerCase(), myName = what[i].name;
if (myType == 'radio' && what[i].checked)
document.hiddenForm.elements[my-Name].value = what[i].value;
if (myType == 'checkbox')
document.hiddenForm.elements[my-Name].value = ((what[i].checked) ?
what[i].value : '');
if (myType == 'password' || myType == 'text' || myType == 'textarea')
document.hiddenForm.elements[myName].value = what[i].value;
if (myType == 'select-one')
document.hiddenForm.elements[my-Name].value =
what[i].options[what[i].selectedIndex-].text;
}
}
Информация в скрытой форме обновляется путем использования имен видимых элементов ввода (имена у скрытых и видимых полей должны полностью совпадать).
Итак, весь код написан. Осталось обеспечить возможность первоначальной инициализации документа при его загрузке. Для этого можно воспользоваться событием onLoad тега BODY:
Казалось бы, все сделано. Однако пришло время немного поговорить о W3C (The World Wide Web Consortium) Document Object Model (объектная модель документов - DOM), и, уверяю вас, этот разговор повлияет на конечный код нашего HTML-документа.
Компании Netscape и Microsoft в четвертых версиях своих броузеров Document Object Model реализовали по-разному. Microsoft - с использованием объекта document.all, а Netscape - document.layers. С тех пор, если разработчик хотел добиться одинакового отображения своих страниц в различных броузерах, ему приходилось писать двойной код - для двух версий DOM. Сам факт поддержки DOM различными броузерами позволяет разработчику создавать документы, понятные всем приложениям просмотра HTML-страниц, однако расхождения, которые имеют место между DOM Microsoft и Netscape, не позволяют WEB-мастеру использовать все возможности, предоставляемые ими. Приходится либо отказываться от каких-либо функций, либо сознательно идти на невозможность полноценного просмотра страниц во всех версиях броузеров.
Конечно, хотелось бы, чтобы наша форма одинаково хорошо работала во всех без исключения программах просмотра HTML-страниц. В связи с этим следует ввести еще несколько дополнений к тому коду, который мы рассмотрели чуть выше.
Так как атрибуты обращения к объектам в IE и Navigator отличаются, приходится прибегать к условным операторам, определяющим синтаксис в зависимости от броузера, при помощи которого просматривается страница. Одним из таких способов является проверка поддерживаемых объектов. С объектами document.layers и document.all мы уже познакомились. В случае броузеров Netscape Navigator версии 6 и Internet Explorer 5.х следует использовать конструкцию document.getElementById:
spanNode = document.getElementById('myTab');
while (spanNode.hasChildNodes()) spanNode.removeChild(spanNode.last-Child);
var range = document.createRange();
range.selectNodeContents(spanNode);
spanNode.appendChild(range.create-ContextualFragment(output));
Приведенный выше код удовлетворяет DOM Level 1. Функция getElementById() используется для получения ссылки на узел дерева объектов DOM, соответствующий нашему тегу SPAN. С использованием методов hasChildNodes(), removeChild(), lastChild удаляются все дочерние узлы данного тега.
Данное действие можно описать проще: удаляются все объекты (в нашем случае - форма), находящиеся в данный момент внутри тега SPAN.
Затем создается объект Range, который используется для доступа к содержимому тега. После этого сформированную с использованием функции show() форму помещаем в тег.
В завершение статьи я посчитал необходимым представить полный код HTML-документа, дабы избежать недопонимания в процессе "сборки" кода из описанных выше фрагментов.
Внешний вид документа представлен на рис. 5.
Ну что же, я думаю, в рамках нашего сегодняшнего разговора я рассказал достаточно. Желаю вам удачного кода и успехов в освоении такого мощного инструмента разработки интерактивных HTML-страниц, каким является Dynamic HTML.
Дополнительно на данную тему:
Оценка XHTML
Как поставить ссылку
Неизвестное о формах
Работа с фоном. Теория
Работа с фоном. Фоновый цвет на практике
Перенос и разбиение слов в HTML
Немного слов о кодировках
Основы HTML
Фрэймы
Быстрее ветра - быстрый html
|
