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

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

ОБСУЖДЕНИЕ

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

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

Стильная форма пошаговой установкиСтильная форма пошаговой установки

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

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

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

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

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PH...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

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

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

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

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

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Respo...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....
Интересные публикации:

Full Page Image GalleryFull Page Image Gallery

Красивая галерея для вашего сайта на css и JQuery, если вам нужна красивая галерея и вам хочется, что-то необычное......

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

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

Max Mag v1.0.9Max Mag v1.0.9

Max Mag - это адаптивный широкоформатный шаблон для WordPress....

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Вертикальное меню с прокруткойВертикальное меню с прокруткой

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.
  • Текущий 1.29/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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