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

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

ОБСУЖДЕНИЕ

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

Стильная форма пошаговой установки
Просмотров: 1191  Скачан: 192 раз  Комментариев в теме: 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]--> 
Материалы по теме:

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на c...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи ...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

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

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

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи ...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

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

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

3D Контактная форма на css33D Контактная форма на css3

Красивая контактная форма в довольно оригинальном стиле. Контактная форма имеет вид почтового конверта, когда вы кликаете по нём, он......
Интересные публикации:

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

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

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

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

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

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

The SameThe Same

Шикарный профессиональный html шаблон имеющий два стиля (светлый и тёмный), на главной странице используется стильный слайдер......

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

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

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...
  • Текущий 1.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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