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

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

ОБСУЖДЕНИЕ

Прозрачная форма регистрации на css3 и JQuery

Прозрачная форма регистрации с прогресс баром
Просмотров: 3482  Скачан: 203 раз  Комментариев в теме: 0

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы. Все довольно просто и со вкусом.

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

 

HTML

<div class="ex-form ui-helper-clearfix ui-corner-all">
    <h1>Форма регистрации</h1>
    <div id="progress"></div><label id="amount">0%</label>
    <form action="#" method="GET">
        <div id="panel1" class="form-panel">
            <h2>Персональные данные</h2>
            <fieldset class="ui-corner-all">
                <label>
                    <span class="title">Имя:</span>
                    <span class="input"><input type="text"></span>
                </label>
                <label>
                    <span class="title">Email:</span>
                    <span class="input"><input type="text"></span>
                </label>
                <label>
                    <span class="title">Пароль:</span>
                    <span class="input"><input type="password"></span>
                </label>
                <label>
                    <span class="title">Подтвердите пароль:</span>
                    <span class="input"><input type="password"></span>
                </label>
            </fieldset>
        </div>
        <div id="panel2" class="form-panel ui-helper-hidden">
            <h2>Социальные данные</h2>
            <fieldset class="ui-corner-all">
                <label>
                    <span class="title">Twitter:</span>
                    <span class="input"><input type="text"></span>
                </label>
                <label>
                    <span class="title">Facebook:</span>
                    <span class="input"><input type="text"></span>
                </label>
                <div class="label">
                    <label class="title" for="text">Bio:</label>
                    <div class="input textarea">
                        <textarea rows="3" cols="25" name="text" id="text"></textarea>
                    </div>
                </div>
            </fieldset>
        </div>
        <div id="thanks" class="form-panel ui-helper-hidden">
            <h2>Завершение регистрации</h2>
            <fieldset class="ui-corner-all">
                <p>Спасибо за регистрацию!</p>
            </fieldset>
        </div>
        <button id="next">Далее <span>▶</span></button><button id="back" disabled="disabled"><span>◀</span> Назад</button>
    </form>
</div>

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

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
// ЭТО ПРАВКА ДЛЯ IE9
<!--[if IE 9]>
    <style type="text/css">
        .form-panel .input, .form-panel input, .form-panel textarea {
            border-radius: 0;
        }
    </style>
<![endif]-->

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.js"></script>
<script type="text/javascript">
    $(function() {
        $progress = $("#progress"), $amount = $("#amount"), panels = [], panels[0] = "panel1", panels[1] = "panel2", panels[3] = "thanks", i = 0, $formPanel = $(".form-panel");
        $progress.progressbar({
            change: function() {
                $amount.text($progress.progressbar("option", "value") + "%");
            }
        });
        function changepanel(n) {
            $($formPanel[i]).fadeOut(500);
            i = i + n;
            $($formPanel[i]).delay(505).fadeIn();
            (i != 0) ? $("#back").attr("disabled", null) : $("#back").attr("disabled", "disabled");
            (i != 2) ? $("#next").attr("disabled", null) : $("#next").attr("disabled", "disabled");
            $progress.progressbar("option", "value", (i * 50) );
        }
        $(".ex-form button").click(function(e) {
            e.preventDefault();
            var n = ($(this).attr("id") != "back") ? 1 : -1;
            changepanel(n);
        });
    });
</script>
Материалы по теме:

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

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

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

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

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «Lig...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

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

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

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

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

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

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

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

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

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на css +30...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

Шаблон Desire Night ClubШаблон Desire Night Club

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

Горизонтальное меню на cssГоризонтальное меню на css

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню на cs...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

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

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

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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