Закрыть ... [X]

Jquery форма пошаговая

Многие сайты используют формы входа или регистрации для своих пользователей. Форма регистрации HTML является важным элементом на сайте, который должен быть удобен. В этом уроке мы создадим простую анимационную форму с тремя очень распространенными формами (регистрация, авторизация, и восстановление пароля). Идея состоит в том, чтобы не открывать новую страницу, когда пользователь переходит на другую форму, но вместо этого, чтобы новые формы появлялись в том же блоке, только расширялись в зависимости от размеров формы. Это можно назвать как jquery авторизация. Почему переключение между формами без обновления страницы, имеет немаловажное значение? Во-первых, это уменьшает нагрузку на сайт, и во-вторых удобно пользователю.
Итак, начнем с создания трех форм и их jquery форма пошаговая стилизации:

HTML каркас

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

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

Теперь мы создадим форму входа. Эта форма будет отображаться, когда пользователь заходит на сайт. Поэтому мы дадим ей еще один специальный класс active:

И, наконец, мы добавим форму восстановления пароля:

Все ссылки на другую форму будут иметь класс linkform и для того, чтобы по запросу пользователя в нужный момент вывести другую форму, мы добавляем ссылкам атрибут rel. Например, ссылка “Нет аккаунта? Регистрация”, будет иметь значение форма атрибута rel "register", так как мы хотим выводить форму регистрации при нажатии на ссылку.
Как Вы мозможно уже заметили, атрибут ссылки href будет указывать на статические HTML страницы с соответствующей формой. Ссылки из предыдущего примера будет указывать на index.html, который содержит нашу форму входа. Эта ссылка будет входить в обиход, когда JavaScript отключен.

Ладно, теперь давайте, добавим стили CSS для этих форм.

CSS стили

Начнем с обертки form_wrapper. Мы задаем белый фон, который будет виден при переключении между формами:

Заголовок каждой формы будет иметь следующие стили:

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

В нашей функции JavaScript мы будем анимировать обертку каждой формы, поэтому определим её размеры:

Колонки в регистрационной форме будут расположены рядом друг с другом:

Все ссылки из нашей формы имеют следующие стили:

Элемент label имеют встроенные стили по умолчанию. Но мы хотим чтобы они отображались как блочный элемент:

Добавим формам ввода некоторые классные свойства из CSS3. В качестве фона градиент, и небольшую тень:

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

Ссылки имеют такие стили:

Стили для чекбокса “Запомнить меня”:

Кнопки отправки данных, будут иметь небольшую тень, в общем ничего особенного:

JavaScript

Реализуем идею, анимации при переключении форм. Итак, сначала мы будем кэшировать некоторые элементы:

Мы получаем ширину и высоту каждой формы. Чтобы сохранить её при последующем открытии, сделаем следующее:

Теперь мы вызываем функцию, которая устанавливает размер обертки текущей активной формы:

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

Функция, которая устанавливает ширину обертки просто задает свои CSS-свойства. Мы же хотим убедиться, что обертка имеет правильную ширину и высоту.

Для демонстрационном варианту мы отключили обработку форм. Если вы их используете, то вам нужно определить, какие формы будут работать и добавить класс active в форму:

Вот форма и готова! Теперь мы узнали, как сделать удобную jquery авторизацию и форму регистрации.
Надеемся для вас был полезен и интересен данный урок.

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко

Чтобы иметь возможность добавлять материал в закладки своего личного кабинета, Вам необходимо авторизоваться или


Поделись с друзьями



Рекомендуем посмотреть ещё:



В этой статье мы рассмотрим пошаговую регистрацию с использованием jQuery Коктейль в домашних условиях для мышц

Jquery форма пошаговая Превратите любую веб-форму в яркий пошаговый мастер с помощью jQuery
Jquery форма пошаговая Пошаговая форма регистрации на CSS3 и jQuery Уникальные скрипты для
Jquery форма пошаговая JQuery Steps интересный плагин для создания пошаговых веб форм
Jquery форма пошаговая Пошаговая форма регистрации » Уроки по PHP, MySQl, Jquery и CSS для
Jquery форма пошаговая 2. Пошаговая форма регистрации с использованием jQuery
Jquery форма пошаговая Делаем регистрационную форму при помощи Jquery


ШОКИРУЮЩИЕ НОВОСТИ