Правильный мастер форм для сайта

Скрипты

Рисунок Правильный мастер форм для сайта
Правильный мастер форм для сайта Правильный мастер форм для сайта
оценка: 4.0 из 5
оценок: 4

Пример добавления закладки в сервис

1 экран · Мастер

URL:

Заголовок:

Описание:


Ключевые слова:

Этот скрипт позволит вам сгруппировать поля на форме по категориям и облегчить усвояемость информации пользователем. В случае желания, пользователь может заполнить все на одном экране. Делаем мастер заполнения форм.

Сначала пропишем в раздел 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>   &middot;
  <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>

Теперь, пользователь Вашего сайта может заполнять формы не в один этап, списком, а в несколько, используя мастер форм.

На этом все.

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Правильный мастер форм для сайта
Скрипты
Скрипты, инструкции, справочники

rss

Мини-форум

№ 02009-08-13 09:46
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Правильный мастер форм для сайта".
Гость
Учавствовать в обсуждении "Правильный мастер форм для сайта" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Сколько сайтов у вас есть?
Всего ответов: 1796
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 4
Гостей: 4
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz