background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Форма пошаговой установки

Стильная форма пошаговой установки
Просмотров: 1150  Скачан: 189 раз  Комментариев в теме: 0

Это комплект формы пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей.

По умолчанию имеются такие варианты:

Информация о базе данных.

Подробнее о сайте.

Информация об Админе.

Вывод информации о введённых данных в форму.

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

Шаг 1 - создание разметки

 

HTML

<div id="ziwrap">
    <div id="zititle">Форма пошаговой установки<span>fot-tof.ru</span></div>
    <div id="content">
        <div id="left"></div>
        <div id="right">
            <ul id="slides">
                <input type="radio" name="radio-btn" id="zinavig-1" checked  />   
                <li id="slide-container">
                    <div id="zistep1">
                        <h3>Добро пожаловать</h3>                        
                        <span>Этап - 1</span>
                        <p>Пожалуйста, введите данные базы данных</p>
                    </div>
                    <div id="slide">      
                        <div id="zinstall">       
                            <form action="javascript:void(0);" method="get" id="form">           
                                <fieldset id="clearfix">               
                                    <p><div><span class="icon-sitemap"></span><input type="text" placeholder="Host Name" required>
                                    <div id="message-info">Пожалуйста, введите имя хоста базы данных.</div></div></p>
                                    <p><div><span class="icon-user"></span><input type="text" placeholder="Database User Name" required>
                                    <div id="message-info">Пожалуйста, введите имя пользователя</div></div></p>
                                    <p><div><span class="icon-lock"></span><input type="text" placeholder="Database Password" required>
                                    <div id="message-info">Пожалуйста, введите пароль к базы данных.</div></div></p>   
                                    <p><div><span class="icon-list-ul"></span><input type="text" placeholder="Database Name" required>
                                    <div id="message-info">Пожалуйста, введите имя базы данных.</div></div></p>                   
                                </fieldset>
                            </form>
                        </div>
                    </div>
                    <div id="nav">
                        <label for="zinavig-2" id="next"><i class="icon-chevron-sign-right"></i></label>
                    </div>
                </li>
                <input type="radio" name="radio-btn" id="zinavig-2" />  
                <li id="slide-container">
                    <div id="zistep2">
                        <span>Этап - 2</span>
                        <p>Пожалуйста, введите информацию о Веб-сайте.</p>
                        <ol>
                            <li>Название веб-сайта или названия компании.</li>
                            <li>Описание веб-сайта.</li>
                        </ol>
                    </div>
                    <div id="slide">     
                        <div id="zinstall">        
                            <form action="javascript:void(0);" method="get" id="form">            
                                <fieldset id="clearfix">               
                                    <p><div><span class="icon-font"></span><input type="text" placeholder="Website Name" required>
                                    <div id="message-info">Пожалуйста, введите название сайта</div></div></p>

                                    <p><div><span class="icon-tags"></span><input type="text" placeholder="Meta Description" required>
                                    <div id="message-info">Пожалуйста, введите описание веб-сайта.</div></div></p>

                                    <p><div><span class="icon-globe"></span><input type="text" placeholder="Domain Name" required>
                                    <div id="message-info">Доменное имя: http://www.fot-tof.ru/</div></div></p>   

                                    <p><div><span class="icon-ellipsis-horizontal"></span><input type="text" placeholder="Actual Path" required>
                                    <div id="message-info">Полный адрес: /home/fot-tof/public_html/</div></div></p>                   
                                </fieldset>
                            </form>
                        </div>
                    </div>
                    <div id="nav">
                        <label for="zinavig-1" id="prev"><i class="icon-chevron-sign-left"></i></label>
                        <label for="zinavig-3" id="next"><i class="icon-chevron-sign-right"></i></label>
                    </div>
                </li>
                <input type="radio" name="radio-btn" id="zinavig-3" />
                <li id="slide-container">
                    <div id="zistep3">
                        <span>Этап - 3</span>
                        <p>Пожалуйста, введите информацию для Админа.</p>
                        <ol>
                            <li>Имя Админа</li>
                            <li>Логин Админа</li>
                            <li>Пароль Админа</li>
                            <li>Email Админа</li>
                        </ol>
                        <p>Пожалуйста, проверьте виденные данные, прежде чем начать установку</p>
                    </div>
                    <div id="slide">       
                        <div id="zinstall">      
                            <form action="javascript:void(0);" method="get" id="form">            
                                <fieldset id="clearfix">                
                                    <p><div><span class="icon-user-md"></span><input type="text" placeholder="Admin Name" required>
                                    <div id="message-info">Пожалуйста, введите имя администратора.</div></div></p>
                                    <p><div><span class="icon-user"></span><input type="text" placeholder="Admin Username" required>
                                    <div id="message-info">Пожалуйста, введите Логин администратора.</div></div></p>
                                    <p><div><span class="icon-asterisk"></span><input type="text" placeholder="Admin Password" required>
                                    <div id="message-info">Пожалуйста, введите пароль администратора.</div></div></p>   
                                    <p><div><span class="icon-envelope"></span><input type="text" placeholder="Admin Email" required>
                                    <div id="message-info">Пожалуйста, введите Email администратора.</div></div></p>                   
                                </fieldset>
                            </form>
                        </div>
                    </div>
                    <div id="nav">
                        <label for="zinavig-2" id="prev"><i class="icon-chevron-sign-left"></i></label>
                        <label for="zinavig-4" id="next"><span>Начать установку</span> <i class="icon-chevron-sign-right"></i></label>
                    </div>
                </li>
                <input type="radio" name="radio-btn" id="zinavig-4" />
                <li id="slide-container">
                    <div id="zistep4">
                        <span>Готово</span>
                        <p>Установка завершена.</p>
                    </div>
                    <div id="slide">       
                        <div id="finalinfo">
                            <h3>Информация по установку</h3>
                            <span id="warning">Пожалуйста, удалете папку Install.</span>
                            <p>Вы можете получить доступ к своему веб-сайту, используя следующую информацию.</p>
                            <p>Информация об установке послана по электронной почте admin@fot-tof.ru.</p>
                            <p>Адрес URL веб-сайта: <a href="" target="_blank">http://www.fot-tof.ru</a></p>
                            <p>Веб-сайт Администратора: <a href="" target="_blank">http://www.fot-tof.ru/admin/auth</a></p>
                            <p>Логин Админа: johndoe</p>
                            <p>Пароль: mypassword</p>
                        </div>
                    </div>
                    <div id="nav">
                        <label id="next">Спасибо!</label>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div> 

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
// ЭТО ПРАВКА ДЛЯ IE7
<!--[if IE 7]>
    <link rel="stylesheet" href="css/font-awesome-ie7.css">
<![endif]--> 
Материалы по теме:

Оригинальная анимационная контактная формаОригинальная анимационная контактна...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, ...

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MyS...

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

Контактная форма (дизайн)Контактная форма (дизайн)

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

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat F...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......
Интересные публикации:

Free MusicFree Music

Отличный html шаблон музыкального портала, сделанный по современным стандартам, в шаблоне уже встроенный проигрыватель аудио и видео файлов......

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

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

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...
  • Текущий 1.29/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.3/5( Голосов 7 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить