Этот скрипт позволит вам сгруппировать поля на форме по категориям и облегчить усвояемость информации пользователем. В случае желания, пользователь может заполнить все на одном экране. Делаем мастер заполнения форм.
Сначала пропишем в раздел HEAD скрипт управления мастером. Выглядит он так:
Code
<script type="text/javascript">
prepMaster = function(){
var i = 2;
while(document.getElementById('mast' + i) != null){
document.getElementById('mast' + i).style.display = 'none';
i++;
}
aButs = document.getElementsByTagName('input');
for(i = 0; i < aButs.length; i++){
if(aButs[i].className == 'mastNavi'){
aButs[i].style.display = 'inline';
}
}
}
showMastAll = function(){
var i = 1;
while(document.getElementById('mast' + i) != null){
document.getElementById('mast' + i).style.display = 'block';
i++;
}
aButs = document.getElementsByTagName('input');
for(i=0; i < aButs.length; i++){
if(aButs[i].className == 'mastNavi'){
aButs[i].style.display = 'none';
}
}
}
goMast = function(inum){
var i = 1;
while(document.getElementById('mast' + i) != null){
if(i != inum){
document.getElementById('mast' + i).style.display = 'none';
} else {
document.getElementById('mast' + i).style.display = 'block';
}
i++;
}
}
</script>
Немого распишем, что означают эти функции:
- prepMaster(); Эта функция подготавливает мастер форм к работе. Ее цель спрятать блоки, которые должны заполняться в следующих этапах работы с мастером.
- showMastAll(); Цель функции - отобразить все блоки и спрятать кнопки перехода из одной страницы мастера в другую. Предназначена для того, чтобы пользователь мог работать в одностраничном режиме.
- goMast(inum); - Функция перехода между блоками мастера форм. В качестве параметра inum используется порядковый номер блока, к которому нужно переходить.
Далее, в том же разделе HEAD, пропишем стиль, который скроет кнопки перехода по блокам мастера форм. Это нужно для того, чтобы пользователь, зашедший на страницу с выключенным запуском JavaScript, не видел кнопки перехода. Для такого пользователя форма будет одностраничной. Стиль должен выглядеть так:
Code
<style type="text/css">.mastNavi{display:none;}</style>
Теперь оформим сами блоки мастера форм. Для начала разбейте поля по логическим состовляющим. После, объедените в группы одинаковые логические еденицы. Например, ввод логина-пароля - это один блок, ввод информации о регионе, дате рождения и тому подобного - второй блок.
Пример описания блоков мастера форм. Его нужно вставлять туда, где он должен отображаться:
Code
<div style="border:1px solid #cccccc;padding:5px;width:300px;">
<h3>Пример добавления закладки в серис</h3>
<a href="javascript://" onclick="showMastAll();">1 экран</a> ·
<a href="javascript://" onclick="prepMaster();">Мастер</a><br><br>
<form action="http://mark.szenprogs.ru/dir/0-0-0-0-1" method="get" target="_blank">
<div id="mast1">
URL: <input type="text" value="http://" name="url">
<br><br>
<input type="button" onclick="goMast(2);" value="Далее" class="mastNavi">
</div>
<div id="mast2">
Заголовок: <input type="text" value="" name="title">
<br><br>
<input type="button" onclick="goMast(1);" value="Назад" class="mastNavi">
<input type="button" onclick="goMast(3);" value="Далее" class="mastNavi">
</div>
<div id="mast3">
Описание: <br><textarea cols="20" rows="5" name="text"></textarea>
<br><br>
<input type="button" onclick="goMast(2);" value="Назад" class="mastNavi">
<input type="button" onclick="goMast(4);" value="Далее" class="mastNavi">
</div>
<div id="mast4">
Ключевые слова: <input type="text" value="" name="keys">
<br><br>
<input type="button" onclick="goMast(3);" value="Назад" class="mastNavi">
<input type="submit" value="Завершить">
</div>
</form>
</div>
Что нужно соблюдать, при создании блоков мастера форм:
- Для отключения мастера и перехода в одностраничный режим нужно использовать следующее свойство тегов (можете привязать не только к ссылке, но и к картинке, и к тегу SPAN): onclick="showMastAll();"
- Для возврата в мастер используем свойство тегов onclick="prepMaster();"
- ID каждого блока мастера должен начинаться на mast + порядковое число блока. Для примера, ID третьего блока должен быть id="mast3". Нумерация блоков должна начинаться с еденицы и идти по возрастанию без прерываний. Скажем, если после блока №2 поставить блок №4, и при этом блок №3 нигде не существует, то скрипт мастера форм работать не будет.
- Класс кнопок перехода должен равняться "mastNavi". Если Вы его не объявите, то при переходе в одностраничный режим кнопки перехода не скроются.
- Для перехода к форме в мастере используйте свойство тега onclick="goMast(num);", где num - это порядковый номер блока, к которому должен переходить пользователь по нажатию на кнопке или картинке.
И в завершение, впишем в конец блока вызов функции, скрывающей блоки мастера, которые должны отобразится на следующем этапе:
Code
<script type="text/javascript">prepMaster();</script>
Теперь, пользователь Вашего сайта может заполнять формы не в один этап, списком, а в несколько, используя мастер форм.
На этом все.
Вы можете выразить свою благодарность администрации портала отправив SMS-кой выбранное вами количество денежек:
