Форма регистрации HTML с анимацией на jQuery | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryФорма регистрации HTML с анимацией на jQuery
Дата: 13.04.2013 в 12:41 | Просмотров: 8902

Форма регистрации HTML с анимацией на jQuery

In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form. ...
Скачатьбесплатно с сервера
Демодемонстрация

Многие сайты используют формы входа или регистрации для своих пользователей. Форма регистрации HTML является важным элементом на сайте, который должен быть удобен. В этом уроке мы создадим простую анимационную форму с тремя очень распространенными формами (регистрация, авторизация, и восстановление пароля). Идея состоит в том, чтобы не открывать новую страницу, когда пользователь переходит на другую форму, но вместо этого, чтобы новые формы появлялись в том же блоке, только расширялись в зависимости от размеров формы. Это можно назвать как 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
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Доброго времени суток! Могли бы подсказать как это сделать на сайте? Я скачал и закинул через файловый менеджер.. Но не знаю как сделать кнопку, что выходило это окно регистрации. Спасибо заранее, сайт понравился.

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте! Чтобы реализовать данные эффекты, достаточно иметь уже готовую форму регистрации во всплывающем окне. Потом всё это можно стилизовать, и применить jquery эффекты. Таким образом, формы и кнопки будут работать. В Вашем случае ничего конкретно не могу сказать, так как не вижу сайта и кода.

    1. Добрый вечер.
      Я скачал форму загрузил на сервак и там Крякозябли не разберёшь не чего.
      Я просто не пойму это готовая форма в АРХИВЕ или её надо переделывать как описано ниже?

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте! В архиве уже готовые формы, и переделывать в них ничего не нужно.
        В Вашем случае “Кракозябры” возможны из-за неправильной кодировки.

    1. Артур:
      @

      Здравствуйте!
      Помогите вот проблема! скачал все сделал, как надо!
      но тут я не знаю, что делать(
      вот ваш код:

      Регистрация

      и так далее….
      во конец:


      $(function() {
      //the form wrapper (includes all forms)

      и конец этого кода:

      $form_wrapper.find('input[type="submit"]')
      .click(function(e){
      e.preventDefault();
      });
      });

      Вот мое вопросы:
      1) этот коду туда тоже или это не надо!
      И второй и самый главный вопрос!
      Как мне прицепить форму эту к шаблону если у хочу его прицепить в Верхнему меню?
      Вот какой код у меня так:

      Home
      New Arrivals
      Mens
      Womens
      Faq
      Sale Items
      Cart
      Login

      Пожалуйста можно ответы быстро))) просто это очень срочно!(
      На перед СПАСИБО!
      Сегодня первый раз на этом сайте! Но сайт очень понравился!!!

    1. Артур:
      @

      Как можно это код привязать к ссылке такому коду во:

      Login

Добавить комментарий