→ Веб-разработчику → JQuery → Форма регистрации HTML с анимацией на jQuery

Дата: 13.04.2013 в 12:41 | Просмотров: 11104

Метки: авторизация, форма входа/регистрации

Форма регистрации HTML с анимацией на jQuery

In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form. ...

Скачатьбесплатно с сервера

Демодемонстрация

↓ Также Вам будет интересно ↓

Многие сайты используют формы входа или регистрации для своих пользователей. Форма регистрации HTML является важным элементом на сайте, который должен быть удобен. В этом уроке мы создадим простую анимационную форму с тремя очень распространенными формами (регистрация, авторизация, и восстановление пароля). Идея состоит в том, чтобы не открывать новую страницу, когда пользователь переходит на другую форму, но вместо этого, чтобы новые формы появлялись в том же блоке, только расширялись в зависимости от размеров формы. Это можно назвать как jquery авторизация. Почему переключение между формами без обновления страницы, имеет немаловажное значение? Во-первых, это уменьшает нагрузку на сайт, и во-вторых удобно пользователю.
Итак, начнем с создания трех форм и их стилизации:

HTML каркас

Как уже упоминалось, мы создадим три разные формы – форма входа, регистрационная форма и форма напоминания пароля с помощью только одного поля ввода. Они будут иметь разные размеры и количество входов.
Во-первых, мы создадим обертку для всех трех форм.

</div>

Теперь мы будем добавлять каждый элемент формы в обертку и вставлять в неё необходимые поля ввода. Каждая форма будет иметь заголовок. Регистрационная форма, её мы сделаем первой, будет расположена в две колонки:

<h3>Регистрация</h3>

<div>

<span class="error">Неправильный ввод.</span>

</div>

<div>

<label>Фамилия:</label>

<span class="error">Неправильный ввод.</span>

</div>

<div>

<span class="error">Неправильный ввод.</span>

</div>

<div>

<label>Логин:</label>

<span class="error">Неправильный ввод.</span>

</div>

<div>

<label>Email:</label>

<span class="error">Неправильный ввод.</span>

</div>

<div>

<label>Пароль:</label>

<span class="error">Неправильный ввод.</span>

</div>

<span>Подписаться на новости.</span>

</div>

<a href="/web-developer/jquery/index.html" rel="login" class="linkform">Уже зарегистрированы? Войти</a>

</div>

</form>

Теперь мы создадим форму входа. Эта форма будет отображаться, когда пользователь заходит на сайт. Поэтому мы дадим ей еще один специальный класс active:

<h3>Авторизация</h3>

<div>

<label>Логин:</label>

<span class="error">Неправильный ввод.</span>

</div>

<div>

<label>Пароль: <a href="/web-developer/jquery/forgot_password.html" rel="forgot_password" class="forgot linkform">Забыли пароль?</a></label>

<span class="error">Неправильный ввод.</span>

</div>

<div class="remember"><input type="checkbox" /><span>Запомнить меня</span></div>

<a href="/web-developer/jquery/register.html" rel="register" class="linkform">Нет аккаунта? Регистрация</a>

</div>

</form>

И, наконец, мы добавим форму восстановления пароля:

<h3>Восстановление пароля</h3>

<div>

<label>Логин или Email:</label>

<span class="error">Неправильный ввод.</span>

</div>

<a href="/web-developer/jquery/index.html" rel="login" class="linkform">Пароль восстановлен? Войти</a>

<a href="/web-developer/jquery/register.html" rel="register" class="linkform">Нет аккаунта? Регистрация</a>

</div>

</form>

Все ссылки на другую форму будут иметь класс linkform и для того, чтобы по запросу пользователя в нужный момент вывести другую форму, мы добавляем ссылкам атрибут rel. Например, ссылка “Нет аккаунта? Регистрация”, будет иметь значение атрибута rel "register", так как мы хотим выводить форму регистрации при нажатии на ссылку.
Как Вы мозможно уже заметили, атрибут ссылки href будет указывать на статические HTML страницы с соответствующей формой. Ссылки из предыдущего примера будет указывать на index.html, который содержит нашу форму входа. Эта ссылка будет входить в обиход, когда JavaScript отключен.

Ладно, теперь давайте, добавим стили CSS для этих форм.

CSS стили

Начнем с обертки form_wrapper. Мы задаем белый фон, который будет виден при переключении между формами:

.form_wrapper{

background:#fff;

border:1px solid #ddd;

margin:0 auto;

width:350px;

font-size:16px;

-moz-box-shadow:1px 1px 7px #ccc;

-webkit-box-shadow:1px 1px 7px #ccc;

box-shadow:1px 1px 7px #ccc;

}

Заголовок каждой формы будет иметь следующие стили:

.form_wrapper h3{

padding:20px 30px 20px 30px;

background-color:#444;

color:#fff;

font-size:25px;

border-bottom:1px solid #ddd;

}

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

.form_wrapper form{

display:none;

background:#fff;

}

form.active{

display:block;

}

В нашей функции JavaScript мы будем анимировать обертку каждой формы, поэтому определим её размеры:

form.login{

width:350px;

}

form.register{

width:550px;

}

form.forgot_password{

width:300px;

}

Колонки в регистрационной форме будут расположены рядом друг с другом:

.form_wrapper .column{

width:47%;

float:left;

}

Все ссылки из нашей формы имеют следующие стили:

.form_wrapper a{

text-decoration:none;

color:#777;

font-size:12px;

}

.form_wrapper a:hover{

color:#000;

}

Элемент label имеют встроенные стили по умолчанию. Но мы хотим чтобы они отображались как блочный элемент:

.form_wrapper label{

display:block;

padding:10px 30px 0px 30px;

margin:10px 0px 0px 0px;

}

Добавим формам ввода некоторые классные свойства из CSS3. В качестве фона градиент, и небольшую тень:

.form_wrapper input[type="text"],

.form_wrapper input[type="password"]{

border: solid 1px #E5E5E5;

margin: 5px 30px 0px 30px;

padding: 9px;

display:block;

font-size:16px;

width:76%;

background: #FFFFFF;

background:

-webkit-gradient(

linear,

left top,

left 25,

from(#FFFFFF),

color-stop(4%, #EEEEEE),

to(#FFFFFF)

);

background:

-moz-linear-gradient(

top,

#FFFFFF,

#EEEEEE 1px,

#FFFFFF 25px

);

-moz-box-shadow: 0px 0px 8px #f0f0f0;

-webkit-box-shadow: 0px 0px 8px #f0f0f0;

box-shadow: 0px 0px 8px #f0f0f0;

}

.form_wrapper input[type="text"]:focus,

.form_wrapper input[type="password"]:focus{

background:#feffef;

}

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

.form_wrapper .bottom{

background-color:#444;

border-top:1px solid #ddd;

margin-top:20px;

clear:both;

color:#fff;

text-shadow:1px 1px 1px #000;

}

Ссылки имеют такие стили:

.form_wrapper .bottom a{

display:block;

clear:both;

padding:10px 30px;

text-align:right;

color:#ffa800;

text-shadow:1px 1px 1px #000;

}

.form_wrapper a.forgot{

float:right;

font-style:italic;

line-height:24px;

color:#ffa800;

text-shadow:1px 1px 1px #fff;

}

.form_wrapper a.forgot:hover{

color:#000;

}

Стили для чекбокса “Запомнить меня”:

.form_wrapper div.remember{

float:left;

width:140px;

margin:20px 0px 20px 30px;

font-size:11px;

}

.form_wrapper div.remember input{

float:left;

margin:2px 5px 0px 0px;

}

Кнопки отправки данных, будут иметь небольшую тень, в общем ничего особенного:

.form_wrapper input[type="submit"] {

background: #e3e3e3;

border: 1px solid #ccc;

color: #333;

font-family: "Trebuchet MS", "Myriad Pro", sans-serif;

font-size: 14px;

font-weight: bold;

padding: 8px 0 9px;

text-align: center;

width: 150px;

cursor:pointer;

float:right;

margin:15px 20px 10px 10px;

text-shadow: 0 1px 0px #fff;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

-moz-box-shadow: 0px 0px 2px #fff inset;

-webkit-box-shadow: 0px 0px 2px #fff inset;

box-shadow: 0px 0px 2px #fff inset;

}

.form_wrapper input[type="submit"]:hover {

background: #d9d9d9;

-moz-box-shadow: 0px 0px 2px #eaeaea inset;

-webkit-box-shadow: 0px 0px 2px #eaeaea inset;

box-shadow: 0px 0px 2px #eaeaea inset;

color: #222;

}

JavaScript

Реализуем идею, анимации при переключении форм. Итак, сначала мы будем кэшировать некоторые элементы:

//the form wrapper (includes all forms)

var $form_wrapper = $('#form_wrapper'),

//the current form is the one with class "active"

$currentForm = $form_wrapper.children('form.active'),

//the switch form links

$linkform = $form_wrapper.find('.linkform');

Мы получаем ширину и высоту каждой формы. Чтобы сохранить её при последующем открытии, сделаем следующее:

$form_wrapper.children('form').each(function(i){

var $theForm = $(this);

//solve the inline display none problem when using fadeIn/fadeOut

if(!$theForm.hasClass('active'))

$theForm.hide();

$theForm.data({

width : $theForm.width(),

height : $theForm.height()

});

Теперь мы вызываем функцию, которая устанавливает размер обертки текущей активной формы:

1	setWrapperWidth();

Когда мы нажимаем на ссылку другой формы, мы хотим, чтобы нынешняя скрывалась, а новая открылась. Мы создаем эффект анимации изменения ширины и высоты под новую форму. После того, как анимация будет выполнена, мы показываем новую форму:

$linkform.bind('click',function(e){

var $link = $(this);

var target = $link.attr('rel');

$currentForm.fadeOut(400,function(){

//remove class "active" from current form

$currentForm.removeClass('active');

//new current form

$currentForm= $form_wrapper.children('form.'+target);

//animate the wrapper

$form_wrapper.stop()

.animate({

width : $currentForm.data('width') + 'px',

height : $currentForm.data('height') + 'px'

},500,function(){

//new form gets class "active"

$currentForm.addClass('active');

//show the new form

$currentForm.fadeIn(400);

});

e.preventDefault();

});

Функция, которая устанавливает ширину обертки просто задает свои CSS-свойства. Мы же хотим убедиться, что обертка имеет правильную ширину и высоту.

function setWrapperWidth(){

$form_wrapper.css({

width : $currentForm.data('width') + 'px',

height : $currentForm.data('height') + 'px'

});

}

Для демонстрационном варианту мы отключили обработку форм. Если вы их используете, то вам нужно определить, какие формы будут работать и добавить класс active в форму:

$form_wrapper.find('input[type="submit"]')

.click(function(e){

e.preventDefault();

});

Вот форма и готова! Теперь мы узнали, как сделать удобную jquery авторизацию и форму регистрации.
Надеемся для вас был полезен и интересен данный урок.

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко

Чтобы иметь возможность добавлять материал в закладки своего личного кабинета, Вам необходимо авторизоваться илизарегистрироваться.

ВСЕ КОММЕНТАРИИ

Ruslan:

20.12.2013 в 00:22

Доброго времени суток! Могли бы подсказать как это сделать на сайте? Я скачал и закинул через файловый менеджер.. Но не знаю как сделать кнопку, что выходило это окно регистрации. Спасибо заранее, сайт понравился.

Ответить →

Влад Бондаренко (Admin):
/
20.12.2013 в 09:03

Здравствуйте! Чтобы реализовать данные эффекты, достаточно иметь уже готовую форму регистрации во всплывающем окне. Потом всё это можно стилизовать, и применить jquery эффекты. Таким образом, формы и кнопки будут работать. В Вашем случае ничего конкретно не могу сказать, так как не вижу сайта и кода.

Ответить →

Serdj777:

11.02.2014 в 21:53

Добрый вечер.
Я скачал форму загрузил на сервак и там Крякозябли не разберёшь не чего.
Я просто не пойму это готовая форма в АРХИВЕ или её надо переделывать как описано ниже?

Ответить →

Влад Бондаренко (Admin):
/
12.02.2014 в 21:41

Здравствуйте! В архиве уже готовые формы, и переделывать в них ничего не нужно.
В Вашем случае “Кракозябры” возможны из-за неправильной кодировки.

Ответить →

Артур:
@
21.03.2014 в 13:01

Здравствуйте!
Помогите вот проблема! скачал все сделал, как надо!
но тут я не знаю, что делать(
вот ваш код:
Регистрация
и так далее….
во конец:
$(function() { //the form wrapper (includes all forms)
и конец этого кода:
$form_wrapper.find('input[type="submit"]') .click(function(e){ e.preventDefault(); }); });
Вот мое вопросы:
1) этот коду туда тоже или это не надо!
И второй и самый главный вопрос!
Как мне прицепить форму эту к шаблону если у хочу его прицепить в Верхнему меню?
Вот какой код у меня так:
Home New Arrivals Mens Womens Faq Sale Items Cart Login
Пожалуйста можно ответы быстро))) просто это очень срочно!(
На перед СПАСИБО!
Сегодня первый раз на этом сайте! Но сайт очень понравился!!!

Ответить →

Артур:
@
21.03.2014 в 13:44

Как можно это код привязать к ссылке такому коду во:
Login

Ответить →

Форма регистрации HTML с анимацией на jQuery

↓ Также Вам будет интересно ↓

HTML каркас

CSS стили

JavaScript

ВСЕ КОММЕНТАРИИ

Добавить комментарий × Отменить ответ

Зарегистрироваться на сайте:

Карта сайта

Популярные метки

ТОП статьи

Получать уведомления
об обновлениях на сайте!

Форма регистрации HTML с анимацией на jQuery

↓ Также Вам будет интересно ↓

HTML каркас

CSS стили

JavaScript

ВСЕ КОММЕНТАРИИ

Добавить комментарий × Отменить ответ

Зарегистрироваться на сайте:

Карта сайта

Популярные метки

ТОП статьи

Получать уведомления об обновлениях на сайте!

Получать уведомления
об обновлениях на сайте!