Форма «забыли пароль» для сайта с помощью JS

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Идея состоит в том, что у нас есть форма, а форма «забыли пароль» будет слайдом, которая накладывается на основную форму при ее активации. Выглядит все достаточно просто, но для таких форм излишняя элегантность и не требуется.

Шаг 1. HTML

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

<div id="form_container">
<form id="login">
<input type="text" placeholder="Имя"/>
<input type="password" placeholder="Пароль"/>
<input type="button" value="Войти">
</form>
<form id="forgot">
<input type="text" placeholder="Имя"/>
<input type="email" placeholder="Почта"/>
<input type="button" value="Восстановить">
</form>
</div>
<div id="link_container">
<a href="#" id="forgot">Забыли Ваш<strong>пароль?</strong><span class="icn">➥</span></a>
<a href="#" id="back">Авторизоваться<span class="icn">➥</span></a>
</div>

</form>

</form>

</div>

<a href="#" id="forgot">Забыли Ваш<strong>пароль?</strong><span class="icn">➥</span></a>

<a href="#" id="back">Авторизоваться<span class="icn">➥</span></a>

</div>

У нас будет один основной контейнер с общими правилами form_container, в него будут входить дочерние элементы такие как login и forgot, кроме этого мы добавляем ссылки управления.

Интересный эффект для изображений на CSS3

Шаг 2. CSS

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

div#form_container {
width:295px;
height:200px;
padding-top:10px;
margin:50px auto 10px;
overflow:hidden;
position:relative;
}
div#form_container:before{
content:"";
width:8px;
height:8px;
top:6px;
left:50%;
border-top:1px solid #5c5f70;
border-left:1px solid #5c5f70;
position:absolute;
transform: rotate(45deg);
background:#282832;
z-index:1;
}
form {
position:absolute;
left:0;
width:290px;
height:185px;
padding:25px;
border-top:1px solid #5c5f70;
border-bottom:3px solid #1e1d25;
border-radius:5px;
transition:all 0.3s ease-out;
box-shadow:1px 1px 3px #333;
}
form#login {
top:10px;
background: repeating-linear-gradient(110deg, #282832, #282832 15px, #25252f 15px, #25252f 30px);
}
form#forgot{
bottom:-195px;
background: repeating-linear-gradient(110deg, #32323F, #32323F 15px, #282832 15px, #282832 30px);
}
input[type="text"],input[type="password"],input[type="email"] {
width:240px;
height:38px;
margin-bottom:3px;
border:1px solid #2e2e38;
background:white;
color:#9d9da5;
box-shadow:inset 0px 0px 10px #ccc;
border-radius:5px;
padding:15px;
outline:none;
}
input[type="button"] {
background: rgb(130,188,199);
background: -moz-linear-gradient(top, rgba(130,188,199,1) 0%, rgba(79,158,173,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,188,199,1)), color-stop(100%,rgba(79,158,173,1)));
background: -webkit-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);
background: -o-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);
background: -ms-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);
background: linear-gradient(to bottom, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);

margin-top:6px;
color:white;
text-shadow:0 -1px 1px #5794a9;
width:240px;
height:40px;
border-radius:5px;
padding:10px 0 15px;
border:1px solid #2e2e38;
cursor:pointer;
}
input[type="button"]:active {
background: rgb(79,158,173);
background: -moz-linear-gradient(top, rgba(79,158,173,1) 0%, rgba(130,188,199,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,158,173,1)), color-stop(100%,rgba(130,188,199,1)));
background: -webkit-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);
background: -o-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);
background: -ms-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);
background: linear-gradient(to bottom, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);

text-shadow:0 1px 1px #5794a9;
color:#eeeeee;
}
div#link_container {
width:170px;
margin:0 auto;
text-align:center;
}
div#link_container a {
color:#acaebb;
font-family:helvetica,arial,sans-serif;
font-size:14px;
text-decoration:none;
font-weight:100;
text-shadow:1px -1px 1

div#form_container {

width:295px;

height:200px;

padding-top:10px;

margin:50px auto 10px;

overflow:hidden;

position:relative;

}

div#form_container:before{

content:"";

width:8px;

height:8px;

top:6px;

left:50%;

border-top:1px solid #5c5f70;

border-left:1px solid #5c5f70;

position:absolute;

transform: rotate(45deg);

background:#282832;

z-index:1;

}

form {

position:absolute;

left:0;

width:290px;

height:185px;

padding:25px;

border-top:1px solid #5c5f70;

border-bottom:3px solid #1e1d25;

border-radius:5px;

transition:all 0.3s ease-out;

box-shadow:1px 1px 3px #333;

}

form#login {

top:10px;

background: repeating-linear-gradient(110deg, #282832, #282832 15px, #25252f 15px, #25252f 30px);

}

form#forgot{

bottom:-195px;

background: repeating-linear-gradient(110deg, #32323F, #32323F 15px, #282832 15px, #282832 30px);

}

input[type="text"],input[type="password"],input[type="email"] {

width:240px;

height:38px;

margin-bottom:3px;

border:1px solid #2e2e38;

background:white;

color:#9d9da5;

box-shadow:inset 0px 0px 10px #ccc;

border-radius:5px;

padding:15px;

outline:none;

}

input[type="button"] {

background: rgb(130,188,199);

background: -moz-linear-gradient(top, rgba(130,188,199,1) 0%, rgba(79,158,173,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,188,199,1)), color-stop(100%,rgba(79,158,173,1)));

background: -webkit-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);

background: -o-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);

background: -ms-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);

background: linear-gradient(to bottom, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);

margin-top:6px;

color:white;

text-shadow:0 -1px 1px #5794a9;

width:240px;

height:40px;

border-radius:5px;

padding:10px 0 15px;

border:1px solid #2e2e38;

cursor:pointer;

}

input[type="button"]:active {

background: rgb(79,158,173);

background: -moz-linear-gradient(top, rgba(79,158,173,1) 0%, rgba(130,188,199,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,158,173,1)), color-stop(100%,rgba(130,188,199,1)));

background: -webkit-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);

background: -o-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);

background: -ms-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);

background: linear-gradient(to bottom, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);

text-shadow:0 1px 1px #5794a9;

color:#eeeeee;

}

div#link_container {

width:170px;

margin:0 auto;

text-align:center;

}

div#link_container a {

color:#acaebb;

font-family:helvetica,arial,sans-serif;

font-size:14px;

text-decoration:none;

font-weight:100;

text-shadow:1px -1px 1

Но все стили не обеспечат нам цикличного выполнения поставленной задачи, нам необходимо добавить небольшой код скрипта.

Шаг 3. JS

Нам необходимо выполнение задачи при нажатии на кнопку, кроме этого нам необходимо цикличное выполнение задачи не перебрасывая на другую страницу:

$(document).on('click','a#forgot',function(e){
e.preventDefault();
$('form#forgot').css('bottom','5px');
$(this).fadeOut('fast',function(){
$('a#back').fadeIn('fast');
});

});
$('div#link_container').on('click','a#back',function(e){
e.preventDefault();
$('form#forgot').css('bottom','-195px');
$(this).fadeOut('fast',function(){
$('a#forgot').fadeIn('fast');
});
});

$(document).on('click','a#forgot',function(e){

e.preventDefault();

$('form#forgot').css('bottom','5px');

$(this).fadeOut('fast',function(){

$('a#back').fadeIn('fast');

});

$('div#link_container').on('click','a#back',function(e){

e.preventDefault();

$('form#forgot').css('bottom','-195px');

$(this).fadeOut('fast',function(){

$('a#forgot').fadeIn('fast');

});

В результате данных манипуляций мы получаем замечательную форму,которая станет отличным дополнением для Вашего ресурса.

Вот и все. Готово!

Интересно:

Print article

Опубликовал admin 06.08.2014 в 14:14, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта.

Форма «забыли пароль» для сайта с помощью JS

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Форма «забыли пароль» для сайта с помощью JS

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи