Анімована Форма Входу та Реєстрації

41

Анимированная Форма Входа и Регистрации

Доброго дня всім!

Сьогодні я хочу розповісти і показати на прикладі, як з допомогою JQuery створити просту і функціональну форму «входу» з можливістю перемикання на форму «реєстрації» і «відновлення пароля». Ідея полягає в тому, що коли користувач переходить з однієї форми в іншу, нова форма відкривається в цьому ж вікні без перезавантаження сторінки, з розширенням або звуженням контейнера до розмірів нової форми.

Як вже згадувалося вище, ми будемо задіювати три найпоширеніших види форм, це «Вхід», «Реєстрація» і звичайно ж «Відновлення Пароля».

На той випадок, якщо у користувача відключений JavaScript (застаріла фобія), створені статичні сторінки відповідні формам, так що перемикання спрацює при будь-якому розкладі.

ДемоСкачать

І так, подивилися приклад, впевнилися що все працює, давайте тихим сапом, почнемо творити…

Розмітка HTML

Ми створимо три різні форми, це форму для Входу, реєстраційну форму та форму для відновлення пароля, з допомогою тільки одного основного поля. Форми будуть мати різні розміри і відповідно різну кількість пунктів для заповнення.

В першу чергу необхідно створити оболонку (контейнер), для всіх трьох форм.

<div id="form_wrapper" class="form_wrapper">

</div>

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

<form class="register">
<h3>Реєстрація</h3>
<div class="column">
<div>
<label>Ім'я:</label>
<input type="text" />
<span class="error">Помилка</span>
</div>
<div>
<label>Прізвище:</label>
<input type="text" />
<span class="error">Помилка</span>
</div>
<div>
<label>Ваш сайт:</label>
<input type="text" value="http://"/>
<span class="error">Помилка</span>
</div>
</div>
<div class="column">
<div>
<label>Ім'я користувача(нік):</label>
<input type="text"/>
<span class="error">Помилка</span>
</div>
<div>
<label>Email:</label>
<input type="text" />
<span class="error">Помилка</span>
</div>
<div>
<label>Пароль:</label>
<input type="password" />
<span class="error">Помилка</span>
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
<span>Отримувати оновлення</span>
</div>
<input type="submit" value="Реєстрація" />
<a href="index.html" rel="login" class="linkform">Ви вже зареєстровані? Відкрийте для Входу</a>
<div class="clear"></div>
</div>
</form>

Реєстрація

Ім’я:
Це Помилка
Прізвище:
Це Помилка
Ваш сайт:
Це Помилка
Ім’я користувача(нік):
Це Помилка
Email:
Це Помилка
Пароль:
Це Помилка
Отримувати оновлення

Ви вже зареєстровані? Відкрийте для Входу

Тепер нам потрібно створити розмітку для форми Входу. Ця форма буде показуватися коли користувач заходить на сайт. Ось чому ми пропишемо формі інший, спеціальний клас «login active»:

<form class="login active">
<h3>Вхід</h3>
<div>
<label>Ім'я користувача(нік):</label>
<input type="text" />
<span class="error">Помилка</span>
</div>
<div>
<label>Пароль: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Забули пароль?</a></label>
<input type="password" />
<span class="error">Помилка</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Запам'ятати пароль</span></div>
<input type="submit" value="Увійти"/>
<a href="register.html" rel="register" class="linkform">Ви не зареєстровані? Зареєструватися!</a>
<div class="clear"></div>
</div>
</form>

Вхід

Ім’я користувача(нік):
Це Помилка
Пароль: Забули пароль?
Це Помилка
Запам’ятати пароль

Ви не зареєстровані? Зареєструватися!

Фінальним акордом в розмітці наших форм стане створення форми для «відновлення пароля». Все за тією ж схемою, з присвоєнням формі класу «forgot_password»:

<form class="forgot_password">
<h3>Згадати Все!</h3>
<div>
<label>Ім'я користувача або Email:</label>
<input type="text" />
<span class="error">Помилка</span>
</div>
<div class="bottom">
<input type="submit" value="Нагадати пароль"/>
<a href="index.html" rel="login" class="linkform">Згадали? Відкрийте для Входу</a>
<a href="register.html" rel="register" class="linkform">Ви не зареєстровані? Зареєструватися!</a>
<div class="clear"></div>
</div>
</form>

Згадати Все!

Ім’я користувача або Email:
Це Помилка
Згадали? Відкрийте для Входу
Ви не зареєстровані? Зареєструватися!

Як бачите в кожній формі присутні елементи посилання з кассом “linkform”, які вказують на інші форми і для того щоб визначити яку форму показувати користувачеві у момент натискання на посилання, прописуємо атрибут “rel” з відповідним формі значенням. Наприклад посилання «Ви не зареєстровані? Зареєструватися!” буде мати атрибут “rel” зі значенням “register”, це означає, що буде показана саме реєстраційна форма при натисканні на посилання.

Далі, атрибут HREF вказує на статичні HTML-сторінки з відповідною формою. Посилання з наведеного прикладу буде вказувати на index.html, сторінку, яка містить нашу форму «Увійти». Це посилання буде спрацьовувати або підключатися, коли JavaScript у користувача «з переляку» відключений. Що і робить наші форми робітниками при будь-яких ситуевинах.

З розміткою наших форм більш або менш розібралися, тепер давайте розглянемо оформлення цих форм з використанням цікавих властивостей CSS3.

CSS

Почнемо з основної оболонки(фону), в нашому випадку це буде білий колір, який ми бачимо при перемиканні і завантаженні форм.

.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{
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 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; /* Форма активна і помітна*/
}

.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.login{
width:350px;
}
form.register{
width:550px;
}
form.forgot_password{
width:300px;
}


В реєстраційній формі присутні дві колонки, що знаходяться поруч, оформляємо це справа наступним чином:

1
2
3
4
.form_wrapper .column{
width:47%;
float:left;
}

.form_wrapper .column{
width:47%;
float:left;
}

Посилання на всі наші форми будуть мати наступний спосіб:

.form_wrapper a{
text-decoration:none;
color:#777;
font-size:12px;
}
.form_wrapper a:hover{
color:#000;
}

.form_wrapper a{
text-decoration:none;
color:#777;
font-size:12px;
}
.form_wrapper a:hover{
color:#000;
}

Елементи маркування мають вбудований стиль за замовчуванням.Нам же потрібен свій стиль маркування полів вводу:

.form_wrapper label{
display:block;
padding:10px 30px 0px 30px;
margin:10px 0px 0px 0px;
}

.form_wrapper label{
display:block;
padding:10px 30px 0px 30px;
margin:10px 0px 0px 0px;
}

Для полів вводу застосуємо деякі цікаві властивості CSS3, додамо градієнт для фону і додамо тіней. Правда моя улюблена Opera, градієнт зокрема не підтримує, про тормознутом і гаряче не улюбленому ІЕшке промовчу:

.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 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{
background-color:#444;
border-top:1px solid #ddd;
margin-top:20px;
clear:both;
color:#fff;
text-shadow:1px 1px 1px #000;
}

Посилання наших форм оформимо наступним чином:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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 .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;
}


Створимо і оформимо контейнер для прапорець(checkbox) «Запам’ятати Пароль»:

1
2
3
4
5
6
7
8
9
10
.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 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;
}


І нарешті, нам необхідно довести до розуму кнопки наших форм «Відправити»,”Реєстрація” і т. д:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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;
}

.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;
}

На цьому велика і цікава робота зі стилями закінчена, залишається розібратися з JQuery!

JavaScript

Підключаємо до роботи в документі чарівний фреймворк — JQuery, що знаходиться десь там, у надрах Гугловських серверів:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

Потім слід розмістити javascript, за допомогою якого і буде досягнутий ефект анімації форм при перемиканні:

$(function() {
//оболонка форм (включає в себе всі три форми)
var $form_wrapper = $('#form_wrapper'),
//поточна активна форма
$currentForm = $form_wrapper.children('form.active'),
//посилання перемикання форм
$linkform = $form_wrapper.find('.linkform');
//отримати ширину і висоту кожної форми і зберігати для подальшого виведення 
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
(!$theForm.hasClass('active'))
$theForm.hide();
theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
//Ширина і висота оболонки (так само з поточної форми)
setWrapperWidth();
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
$currentForm.removeClass('active');
$currentForm= $form_wrapper.children('form.'+target);
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
$currentForm.addClass('active');
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
});

$(function() {
//оболонка форм (включає в себе всі три форми)
var $form_wrapper = $(‘#form_wrapper’),
//поточна активна форма
$currentForm = $form_wrapper.children(‘form.active’),
//посилання перемикання форм
$linkform = $form_wrapper.find(‘.linkform’);
//отримати ширину і висоту кожної форми і зберігати для подальшого виведення
$form_wrapper.children(‘form’).each(function(i){
var $theForm = $(this);
(!$theForm.hasClass(‘active’))
$theForm.hide();
theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
//Ширина і висота оболонки (так само з поточної форми)
setWrapperWidth();
$linkform.bind(‘click’,function(e){
var $link = $(this);
var target = $link.attr(‘rel’);
$currentForm.fadeOut(400,function(){
$currentForm.removeClass(‘active’);
$currentForm= $form_wrapper.children(‘form.’+target);
$form_wrapper.stop()
.animate({
width : $currentForm.data(‘width’) + ‘px’,
height : $currentForm.data(‘height’) + ‘px’
},500,function(){
$currentForm.addClass(‘active’);
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data(‘width’) + ‘px’,
height : $currentForm.data(‘height’) + ‘px’
});
}
$form_wrapper.find(‘input[type=”submit”]’)
.click(function(e){
e.preventDefault();
});
});

На цьому все, виконавши вищеописане, ви отримаєте цікаву, динамічну форму для входу та реєстрації. Дивлячись на опис може виникнути відчуття складності процесу, але сподіваюся, це тільки відчуття і таке рішення доведеться багатьом до смаку.

Найчастіше це буває, ідея належить нашим «буржуинским товарищчам», в даному випадку проявила свої таланти Мері Лу з команди веб-розробників tympanus.net. Я ж в силу своїх можливостей намагався адаптувати і перевести дійство це, хотілося б вірити, що не дарма…