—»     —»   Разработка формы авторизации в несколько этапов посредством CSS3 и jQuery
  Раздел: Формы   Комментариев: 2  

Разработка формы авторизации в несколько этапов посредством CSS3 и jQuery



В нашей сегодняшней статье мы расскажем вам о том, как разработать форму авторизации (в несколько этапов) посредством jQuery и CSS3. Для того чтобы немного приукрасить форму, мы добавим анимированную строку прогресса, чтобы пользователи могли видеть, сколько этапов уже завершено.

Превью

Взгляните на живое демо:

Разработка формы авторизации в несколько этапов посредством CSS3 и jQuery

В нашей форме будет 4 этапа:

1. поля логина и пароля;
2. имя, фамилия и e-mail;
3. возраст, пол и страна;
4. итог.

HTML-код

Первое, что нам нужно сделать – это разработать HTML-основу. Нам нужен контейнер с 4 div’ами – каждый для отдельного этапа. Основной код HTML выглядит примерно так:

<div id="container">
    <form action="#" method="post">

        <div id="first_step">
        <div id="second_step">
        <div id="third_step">
        <div id="fourth_step">

    </form>
</div>

Внутри каждого контейнера мы расположим поля и заголовки. Вы можете видеть код внутри первого блока:

<!-- #first_step -->
<div id="first_step">
    <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

    <div class="form">
        <input type="text" name="username" id="username" value="username" />
        <label for="username">At least 4 characters. Uppercase letters, lowercase letters and numbers only.</label>

        <input type="password" name="password" id="password" value="password" />
        <label for="password">At least 4 characters. Use a mix of upper and lowercase for a strong password.</label>

        <input type="password" name="cpassword" id="cpassword" value="password" />
        <label for="cpassword">If your passwords aren’t equal, you won’t be able to continue with signup.</label>
    </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
    <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
</div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

Мы используем три поля ввода: логин, пароль, а также поле подтверждения пароля, и в конце формы будет кнопка подтверждения. Другие блоки будут работать по тому же принципу.

Разработка формы авторизации в несколько этапов посредством CSS3 и jQuery

В конце контейнера вы увидите простенькую строку прогресса. Вот нужный для неё код:

<div id="progress_bar">
    <div id="progress"></div>
    <div id="progress_text">0% Complete</div>
</div>

Весь HTML-код выглядит так:

<div id="container">
       <form action="#" method="post">

           <!-- #first_step -->
           <div id="first_step">
               <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

               <div class="form">
                   <input type="text" name="username" id="username" value="username" />
                   <label for="username">At least 4 characters. Uppercase letters, lowercase letters and numbers only.</label>

                   <input type="password" name="password" id="password" value="password" />
                   <label for="password">At least 4 characters. Use a mix of upper and lowercase for a strong password.</label>

                   <input type="password" name="cpassword" id="cpassword" value="password" />
                   <label for="cpassword">If your passwords aren’t equal, you won’t be able to continue with signup.</label>
               </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
               <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
           </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

           <!-- #second_step -->
           <div id="second_step">
               <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

               <div class="form">
                   <input type="text" name="firstname" id="firstname" value="first name" />
                   <label for="firstname">Your First Name. </label>
                   <input type="text" name="lastname" id="lastname" value="last name" />
                   <label for="lastname">Your Last Name. </label>
                   <input type="text" name="email" id="email" value="email address" />
                   <label for="email">Your email address. We send important administration notices to this address</label>
               </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
               <input class="submit" type="submit" name="submit_second" id="submit_second" value="" />
           </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

           <!-- #third_step -->
           <div id="third_step">
               <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

               <div class="form">
                   <select id="age" name="age">
                       <option> 0 - 17</option>
                       <option>18 - 25</option>
                       <option>26 - 40</option>
                       <option>40+</option>
                   </select>
                   <label for="age">Your age range. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                   <select id="gender" name="gender">
                       <option>Male</option>
                       <option>Female</option>
                   </select>
                   <label for="gender">Your Gender. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                   <select id="country" name="country">
                       <option>United States</option>
                       <option>United Kingdom</option>
                       <option>Canada</option>
                       <option>Serbia</option>
                       <option>Italy</option>
                   </select>
                   <label for="country">Your country. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

               </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
               <input class="submit" type="submit" name="submit_third" id="submit_third" value="" />

           </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

           <!-- #fourth_step -->
           <div id="fourth_step">
               <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

               <div class="form">
                   <h2>Summary</h2>

                   <table>
                       <tr><td>Username</td><td></td></tr>
                       <tr><td>Password</td><td></td></tr>
                       <tr><td>Email</td><td></td></tr>
                       <tr><td>Name</td><td></td></tr>
                       <tr><td>Age</td><td></td></tr>
                       <tr><td>Gender</td><td></td></tr>
                       <tr><td>Country</td><td></td></tr>
                   </table>
               </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
               <input class="send submit" type="submit" name="submit_fourth" id="submit_fourth" value="" />
           </div>

       </form>
</div>
<div id="progress_bar">
           <div id="progress"></div>
           <div id="progress_text">0% Complete</div>
</div>

Как видно, на четвертом этапе таблица осталась пуста. Мы заполним её информацией посредством jQuery.

CSS-код

Теперь нам надо оформить формы. Для начала, мы используем правило @fontface для того, чтобы была возможность применить собственные шрифты. Мы использовали шрифт Cantarell. Весь CSS-код выглядит примерно так:

/* CSS Reset (Eric Meyer) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym, address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i, center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th, td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

@font-face {
   font-family: 'Cantarell';
   src: url(../fonts/Cantarell-Regular.eot);
   src: local('Cantarell'), url('../fonts/Cantarell-Regular.ttf') format('truetype');
}

body {
    background-color: #f9f9f9;
    color: #222;
    font-family: Cantarell, Verdana, sans-serif;
    font-size: 12px;
}

input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; }
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }

#container {
    background: url('../images/container.png') no-repeat;
    width: 754px;
    height: 370px;
    margin: 20px auto;
    padding: 50px 0;
    overflow: hidden;
    position: relative;
}
    #container #first_step, #second_step, #third_step, #fourth_step { display: none; }
    #container #first_step { display: block; }

    #container .form { margin: 66px 72px 0 72px; }

    #container h1, #container h2 {
        font-size: Cantarell, Verdana, sans-serif;
        text-align: center;
        font-size: 24px;
        text-shadow: 1px 1px 2px #222;
    }
        #container h1 span { color: #a90329; }

    #container h2 {
        color: #888;
        font-size: 20px;
        text-align: left;
        text-shadow: none;
    }

    #container table {
        margin: 20px 40px;
        font-size: 14px;
        font-weight: bold;
    }
        #container table td {
            padding: 5px 10px;
        }
            #container table td:nth-child(2) {
                color: #a90329;
            }

    #container input, #container select {
        background: url('../images/input.png') no-repeat;
        color: #888;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        height: 35px;
        padding: 0 25px;
        margin: 20px 0;
        float: left;

        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
    }
        #container input.submit {
            background: url('../images/button.png') no-repeat;
            border: none;
            cursor: pointer;
            width: 85px;
            height: 38px;
            position: relative;
            bottom: 2px;
            left: 655px;
        }
            #container input.submit:focus { border: none; }

        #container input.send{ background: url('../images/send.png') no-repeat; }

        #container input.error { border: 1px solid red; }
        #container input.valid { border: 1px solid #1FFF00; }

        #container input:focus, #container select:focus {
            border: 1px solid #a90329;
            color: #a90329;
        }

    #container select { padding: 5px 0 5px 25px; }
        #container option { padding: 0 15px; }

    #container label {
        color: #666;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        float: right;
        margin: 23px -25px;
        width: 270px;
    }

#progress_bar {
    background: url('../images/progress_bar.png') no-repeat;
    width: 339px;
    height: 24px;
    margin: 0 auto;
    position: relative;
}

#progress {
    background: url('../images/progress.png') repeat-x;
    width: 0px;
    height: 23px;

    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}
#progress_text {
    position: relative;
    line-height: 21px;
    text-align: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px #222;
    width: 339px;
    height: 24px;
    top: -23px;
    left: 0;
}

Разработка формы авторизации в несколько этапов посредством CSS3 и jQuery


jQuery

Мы будем использовать jQuery для:

- переключения этапов;
- валидации введенных данных;
- изменения состояния прогресса.

Разработка формы авторизации в несколько этапов посредством CSS3 и jQuery

Нам нужно подгрузить jQuery-библиотеку на странице, а затем использовать два плагина:

- jQuery UI, самый популярный плагин для использования функционала jQuery.

- jQuery inputfocus – плагин jQuery, который используется для создания эффектов фокусировки и размытости.

Наш код jQuery приведён ниже:

$(function(){
    //original field values
    var field_values = {
            //id        :  value
            'username'  : 'username',
            'password'  : 'password',
            'cpassword' : 'password',
            'firstname'  : 'first name',
            'lastname'  : 'last name',
            'email'  : 'email address'
    };

    //inputfocus
    $('input#username').inputfocus({ value: field_values['username'] });
    $('input#password').inputfocus({ value: field_values['password'] });
    $('input#cpassword').inputfocus({ value: field_values['cpassword'] });
    $('input#lastname').inputfocus({ value: field_values['lastname'] });
    $('input#firstname').inputfocus({ value: field_values['firstname'] });
    $('input#email').inputfocus({ value: field_values['email'] });

    //reset progress bar
    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');

    //first_step
    $('form').submit(function(){ return false; });
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var fields = $('#first_step input[type=text], #first_step input[type=password]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<4 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
            if( $('#password').val() != $('#cpassword').val() ) {
                    $('#first_step input[type=password]').each(function(){
                        $(this).removeClass('valid').addClass('error');
                        $(this).effect("shake", { times:3 }, 50);
                    });

                    return false;
            } else {
                //update progress bar
                $('#progress_text').html('33% Complete');
                $('#progress').css('width','113px');

                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();
            }
        } else return false;
    });

    $('#submit_second').click(function(){
        //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');

        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        var fields = $('#second_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
                //update progress bar
                $('#progress_text').html('66% Complete');
                $('#progress').css('width','226px');

                //slide steps
                $('#second_step').slideUp();
                $('#third_step').slideDown();
        } else return false;

    });

    $('#submit_third').click(function(){
        //update progress bar
        $('#progress_text').html('100% Complete');
        $('#progress').css('width','339px');

        //prepare the fourth step
        var fields = new Array(
            $('#username').val(),
            $('#password').val(),
            $('#email').val(),
            $('#firstname').val() + ' ' + $('#lastname').val(),
            $('#age').val(),
            $('#gender').val(),
            $('#country').val()
        );
        var tr = $('#fourth_step tr');
        tr.each(function(){
            //alert( fields[$(this).index()] )
            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
        });

        //slide steps
        $('#third_step').slideUp();
        $('#fourth_step').slideDown();
    });

    $('#submit_fourth').click(function(){
        //send information to server
        alert('Data sent');
    });

});

Код, начиная 3 и заканчивая 20 строкой активирует плагин inputfocus для каждого поля ввода. Код от 27 до 64 строки проверяет валидность введенной информации (на моменты, когда длина логина или пароля больше 4 символов, когда оба пароля совпадают), а затем обновляет строку прогресса, а затем перемещает пользователя ко второму этапу.

Код от 71 строки до 100 проверяет данные для второго этапа (заполнены ли поля логина и пароля, либо правильность введенного e-mail-адреса). Дальше все похоже на предыдущий этап.

Разработка формы авторизации в несколько этапов посредством CSS3 и jQuery

Заключение и файлы для скачивания

Мы изучили процесс разработки многоэтапной формы авторизации. Пример уже готов к использованию, но в нем надо заменить лишь ссылку на ваш php-файл, который используется для хранения данных, а также отредактировать 125 строку кода в jQuery на $('form').unbind('submit').submit();. Вы также можете использовать запросы Ajax для того, чтобы отсылать данные на сервер.

Посмотрите на изображение, приведенное ниже:

Разработка формы авторизации в несколько этапов посредством CSS3 и jQuery

Если вам нравится результат, то не медлите и скачивайте приложенные файлы.
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS, отправные формы
Опубликовал Mysterious Master   Прочитано (раз): 8800   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 4 февраля 2012 @ 08:47
Написал: Михаил — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за доступное объяснение. Статья замечательная. Буду использовать ваш код в создании своего сайта. Спасибо вашему сайту.
Комментарий #2: 23 марта 2012 @ 14:05
Написал: ameboomfopaug — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Вот это да, еще пишут же хорошие статьи, молодец, автору огромный респект.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930