masterweb » СКРИПТЫ ДЛЯ ВЕБ МАСТЕРА » Интересные скрипты » Форма «забыли пароль» для сайта с помощью JS

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

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



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

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

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

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


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

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

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

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

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

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

Скачать файл ZYPPYSHARE Скачать файл MEGA Скачать файл UPLOAD Скачать файл WORKUPLOAD

(Если ссылка на скачивание файла не доступна - дайте нам знать об этом в комментариях либо через форму обратной связи)

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

Оставить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
Онлайн статистика
1 посетитель на сайте. Из них:
Гости1