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

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

ОБСУЖДЕНИЕ

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

Прозрачная форма регистрации с прогресс баром
Просмотров: 3629  Скачан: 214 раз  Комментариев в теме: 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>
Материалы по теме:

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прог...

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

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

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

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

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

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

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

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

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

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

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

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

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

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....

Room 09 v1.4.0Room 09 v1.4.0

Room 09 - это довольно популярная тема для создания интернет магазинов, которая пользуется большим спросом среди разработчиков на WordPress....

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

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

Меню с прокруткой, реализованое с помощью jquery, главная особенность такого меню......

Кнопка с анимационным фоном на css3Кнопка с анимационным фоном на css3

Отличная кнопка на css3, кнопка реально классная и удобная, да и привлекает глаза посетителя....

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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