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

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



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

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

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



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

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

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

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

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