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

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

ОБСУЖДЕНИЕ

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

Прозрачная форма регистрации с прогресс баром
Просмотров: 3278  Скачан: 192 раз  Комментариев в теме: 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 и jQueryФиксированная форма обратной связи ...

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

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

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

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

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

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

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

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

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

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

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

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

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

Free MusicFree Music

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

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Меню с выпадающими пунктами на css

Admin PanelAdmin Panel

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

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

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

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

MCUBE SolutionsMCUBE Solutions

HTML шаблон MCUBE Solutions хорошо подойдёт для сайта в сфере бизнеса, в шаблоне используется flash слайдер, который......
  • Текущий 1.43/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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