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

И так, наша форма входа будет иметь приблизительно такой вид:

Данный прием на самом деле совсем несложный. Пользователь нажимает на кнопку »Я все заполнил правильно», программа производит проверку и все незаполненные поля ‘’дрожат’’. Для начала нам нужна структура формы входа, выглядеть она будет так:

Следующим этапом будет оживление нашей формы входа при помощи анимации: пользователь нажимает на кнопку »Я все заполнил правильно», и jQuery анализирует все поля для ввода данных. И если хотя бы одно из полей не заполнено, то к этому полю применяется анимация.

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

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