Форма регистрации и авторизации на jquery. Делаем отличную систему регистрации с использованием PHP, MySQL и jQuery. Регистрация пользователей PHP MySQL с активацией письмом

Настройка Wi-Fi

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

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

Альтернативный вариант - разбить регистрацию на несколько шагов. Это порождает сразу много позитивных откликов - ведь начиная выполнять шаги у пользователя чаще всего появляется желание закончить их выполнение.

Так же логично разбивать регистрацию на логические блоки - контактная информация, адрес, личные данные и так далее.

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

По мимо логики стоит учитывать, что вначале видна только ссылка "Вперед" /"Следующий шаг" , а на последнем шаге её не видно, но видно "Назад" и "Регистрация" .

Рассмотрим сам пример:

Страница

Шаг 1

Логин:

E-mail:

Пароль:

Шаг 2

Имя:

Фамилия:

Возраст:

Шаг 3

Страна:

Город:

Улица:

Назад Следующий шаг

body { margin:0; } /* Общие стили закончилась */ form { width:30%; margin:0 auto; } form div.step { display:none; } form div.step p.step{ text-align:center; font-size:28px; } form div.step p{ } form div.step p input{ float:right; } a.back { display:none; } form input { display:none; } a { color:#006600; text-decoration:none; } form p.talign{ text-align:center; }

Скрипт отвечающий за переключение шагов поместим в js/steps_registration.js , не забываем так же подключить библиотеку jQuery :

$(document).ready(function() { // Ждём загрузки страницы var steps = $("form").children(".step"); // находим все шаги формы $(steps).show(); // показываем первый шаг var current_step = 0; // задаем текущий шаг $("a.next").click(function(){ // Событие клика на ссылку "Следующий шаг" if (current_step == steps.length-2) { // проверяем, будет ли следующий шаг последним $(this).hide(); // скрываем ссылку "Следующий шаг" $("form input").show(); // показываем кнопку "Регистрация" } $("a.back").show(); // показываем ссылку "Назад" current_step++; // увеличиваем счетчик текущего слайда changeStep(current_step); // меняем шаг }); $("a.back").click(function(){ // Событие клика на маленькое изображение if (current_step == 1) { // проверяем, будет ли предыдущий шаг первым $(this).hide(); // скрываем ссылку "Назад" } $("form input").hide(); // скрываем кнопку "Регистрация" $("a.next").show(); // показываем ссылку "Следующий шаг" current_step--; // уменьшаем счетчик текущего слайда changeStep(current_step);// меняем шаг }); function changeStep(i) { // функция смены шага $(steps).hide(); // скрываем все шаги $(steps[i]).show(); // показываем текущий } });

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

В этой статье вы узнаете, как создать форму регистрации и авторизации , используя HTML, JavaScript, PHP и MySql. Такие формы используются почти на каждом сайте, в независимости от его типа. Они создаются и для форума, и для интернет-магазина и для социальных сетей (такие как например Facebook, Twiter, Odnoklassniki) и для многих других типов сайтов.

Если у Вас сайт на локальном компьютере, то я надеюсь, что у Вас уже . Без него ничего работать не будет.

Создание таблицы в Базе Данных

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

И так, у нас есть База Данных (сокращённо БД), теперь нам нужно создать таблицу users в которой будем добавлять наших зарегистрированных пользователей.

Как создавать таблицу в БД, я также объяснил в статье . Перед тем как создать таблицу, нам необходимо определить какие поля она будет содержать. Эти поля будут соответствовать полям из формы регистрации.

Значит, подумали, представили какие поля будут у нашей формы и создаём таблицу users с такими полями:

  • id - Идентификатор. Поле id должно быть у каждой таблицы из БД.
  • first_name - Для сохранений имени.
  • last_name - Для сохранений фамилии.
  • email - Для сохранений почтового адреса. E-mail мы будем использовать в качестве логина, поэтому это поле должна быть уникальной, то есть иметь индекс UNIQUE.
  • email_status - Поле для указания, подтверждена ли почта или нет. Если почта подтверждена, то оно будет иметь значение 1, иначе значение 0. По умолчанию, это поле будет иметь значение 0.
  • password - Для сохранений пароля.

Все поля типа “VARCHAR” должны иметь значение по умолчанию NULL.


Если Вы хотите чтобы Ваша форма регистрации имела ещё какие-то поля, то Вы можете их здесь также добавить.

Всё, наша таблица users готова. Переходим к следующему этапу.

Подключение к Базе Данных

Базу данных мы создали, теперь необходимо к ней подключиться. Подключение будем осуществлять с помощью PHP расширения MySQLi.

В папке нашего сайта, создаём файл с именем dbconnect.php , и в нём пишем следующий скрипт:

Этот файл dbconnect.php нужно будет подключить к обработчикам форм.

Обратите внимание на переменную $address_site , здесь я указал название моего тестового сайта, над которым буду работать. Вы соответственно, укажите название Вашего сайта.

Структура сайта

Теперь давайте разберёмся с HTML структурой нашего сайта.

Шапку и подвал сайта вынесем в отдельные файлы, header.php и footer.php . Их будем подключать на всех страницах. А именно на главной (файл index.php ), на страницу с формой регистрации (файл form_register.php ) и на страницу с формой авторизации (файл form_auth.php ).

Блок с нашими ссылками, регистрация и авторизация , добавим в шапку сайта, чтобы они отображались на всех страницах. Одна ссылка будет ввести на страницу с формой регистрации (файл form_register.php ) а другая на страницу с формой авторизации (файл form_auth.php ).

Содержимое файла header.php:

Название нашего сайта

В итоге, главная страница, у нас выглядит так:


Конечно, у Вас на сайте может быть совсем другая структура, но это для нас сейчас не важно. Главное, чтобы присутствовали ссылки (кнопки) регистрации и авторизации.

Теперь перейдём к форме регистрации. Как Вы уже поняли, она у нас находится в файле form_register.php .

Идём в Базу Данных (в phpMyAdmin), открываем структуру таблицы users и смотрим какие поля нам нужны. Значит, нам нужны поля для ввода имени и фамилии, поле для ввода почтового адреса(Email) и поле для ввода пароля. И ещё в целях безопасности добавим поле для ввода капчи.

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

Перед выводом формы добавляем блок для вывода сообщений об ошибках из сессии.

И ещё момент, если пользователь уже авторизован, и он ради интереса заходит на страницу регистрации напрямую, написав в адресную строку браузера адрес_сайта/form_register.php , то мы в этом случае вместо формы регистрации, выведем ему заголовок о том, что он уже зарегистрирован.

В общем, код файла form_register.php у нас получился таким:

Вы уже зарегистрированы

В браузере, страница с формой регистрации выглядит так:


С помощью атрибута required , мы сделали все поля обязательными к заполнению.

Обратите внимание на код формы регистрации где выводится капча :


Мы в значение атрибута src для изображения, указали путь к файлу captcha.php , который генерирует данную капчу.

Посмотрим на код файла captcha.php :

Код хорошо закомментирован, поэтому я остановлюсь только на одном моменте.

Внутри функции imageTtfText() , указан путь к шрифту verdana.ttf . Так вот для корректной работы капчи, мы должны создать папку fonts , и поместить туда файл шрифта verdana.ttf . Его Вы можете найти и скачать из интернета, или взять из архива с материалами данной статьи .

С HTML структурой мы закончили, пора двигаться дальше.

Проверка email на валидность с помощью jQuery

Любая форма нуждается в проверки на валидность введённых данных, как на стороне клиента (с помощью JavaScript, jQuery), так и на стороне сервера.

Особенную внимательность мы должны уделить полю Email. Очень важно чтобы введённый почтовый адрес был валидным.

Для данного поля input, мы задали тип email (type="email"), это нас немножко предостерегает от неправильных форматов. Но, этого недостаточно, потому что через инспектор кода, которого предоставляет нам браузер, можно легко изменить значение атрибута type с email на text , и всё, наша проверка будет уже недействительна.


И в таком случае, мы должны сделать более надёжную проверку. Для этого, воспользуемся библиотекой jQuery от JavaScript.

Для подключения библиотеки jQuery, в файле header.php между тегами , перед закрывающего тега , добавляем эту строчку:

Сразу после этой строчки, добавим код проверки валидации email. Здесь же добавим код проверки длины введённого пароля. Его длина должна быть не меньше 6 символов.

С помощью данного скрипта, мы проверяем введённого почтового адреса на валидность. Если пользователь ввёл неправильный Email, то мы выводим ему ошибку об этом и дезактивируем кнопку отправки формы. Если всё хорошо, то мы убираем ошибку и активируем кнопку отправки формы.

И так, с проверкой формы на клиентской части мы закончили. Теперь мы можем отправить её на сервер, где также сделаем пару проверок и добавим данные в БД.

Регистрация пользователя

Форму мы отправляем на обработку файлу register.php , через метод POST. Название данного файла обработчика, указано в значение атрибута action . А метод отправки указано в значение атрибута method .

Открываем этот файл register.php и первое что нам нужно сделать, это написать функцию запуска сессии и подключить созданный нами ранее файл dbconnect.php (В этом файле мы сделали подключение к БД). И ещё, сразу объявим ячейки error_messages и success_messages в глобальном массиве сессии. В error_mesages будем записывать все сообщения об ошибках возникающие при обработке формы, а в succes_messages , будем записывать радостные сообщения.

Перед тем как продолжить, мы должны проверить, была ли вообще отправлена форма . Злоумышленник, может посмотреть на значение атрибута action из формы, и узнать какой файл занимается обработкой данной формы. И ему может прийти в голову мысль перейти напрямую в этот файл, набирая в адресной строке браузера такой адрес: http://арес_сайта/register.php

Поэтому нам нужно проверить наличие ячейки в глобальном массиве POST, имя которой соответствует имени нашей кнопки "Зарегистрироваться" из формы. Таким образом мы проверяем была ли нажата кнопка "Зарегистрироваться" или нет.

Если злоумышленник попытается перейти напрямую в этот файл, то он получить сообщение об ошибке. Напоминаю, что переменная $address_site содержит название сайта и оно было объявлено в файле dbconnect.php .

Значение капчи в сессии было добавлено при её генерации, в файле captcha.php . Для напоминания покажу ещё раз этот кусок кода из файла captcha.php , где добавляется значение капчи в сессию:

Теперь приступим к самой проверке. В файле register.php , внутри блока if, где проверяем была ли нажата кнопка "Зарегистрироваться", а точнее где указан комментарий " // (1) Место для следующего куска кода " пишем:

//Проверяем полученную капчу //Обрезаем пробелы с начала и с конца строки $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha)){ //Сравниваем полученное значение с значением из сессии. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")){ // Если капча не верна, то возвращаем пользователя на страницу регистрации, и там выведем ему сообщение об ошибке что он ввёл неправильную капчу. $error_message = "

Ошибка! Вы ввели неправильную капчу

"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } // (2) Место для следующего куска кода }else{ //Если капча не передана либо оно является пустой exit("

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

"); }

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

Если ячейка существует, то обрезаем пробелы с начала и с конца строки из этой ячейки, иначе, перенаправляем пользователя обратно на страницу с формой регистрации.

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

Этот код вставляем в указанное место "// (2) Место для следующего куска кода ".

/* Проверяем если в глобальном массиве $_POST существуют данные отправленные из формы и заключаем переданные данные в обычные переменные.*/ if(isset($_POST["first_name"])){ //Обрезаем пробелы с начала и с конца строки $first_name = trim($_POST["first_name"]); //Проверяем переменную на пустоту if(!empty($first_name)){ // Для безопасности, преобразуем специальные символы в HTML-сущности $first_name = htmlspecialchars($first_name, ENT_QUOTES); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Ваше имя

Отсутствует поле с именем

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["last_name"])){ //Обрезаем пробелы с начала и с конца строки $last_name = trim($_POST["last_name"]); if(!empty($last_name)){ // Для безопасности, преобразуем специальные символы в HTML-сущности $last_name = htmlspecialchars($last_name, ENT_QUOTES); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Вашу фамилию

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Отсутствует поле с фамилией

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["email"])){ //Обрезаем пробелы с начала и с конца строки $email = trim($_POST["email"]); if(!empty($email)){ $email = htmlspecialchars($email, ENT_QUOTES); // (3) Место кода для проверки формата почтового адреса и его уникальности }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Ваш email

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["password"])){ //Обрезаем пробелы с начала и с конца строки $password = trim($_POST["password"]); if(!empty($password)){ $password = htmlspecialchars($password, ENT_QUOTES); //Шифруем папроль $password = md5($password."top_secret"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Ваш пароль

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } // (4) Место для кода добавления пользователя в БД

Особенную важность имеет поле email . Мы должны проверить формат полученного почтового адреса и его уникальность в БД. То есть не зарегистрирован ли уже какой-то пользователь с таким же почтовым адресом.

В указанном месте "// (3) Место кода для проверки формата почтового адреса и его уникальности " добавляем следующий код:

//Проверяем формат полученного почтового адреса с помощью регулярного выражения $reg_email = "/^**@(+(*+)*\.)++/i"; //Если формат полученного почтового адреса не соответствует регулярному выражению if(!preg_match($reg_email, $email)){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Вы ввели неправельный email

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } //Проверяем нет ли уже такого адреса в БД. $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); //Если кол-во полученных строк ровно единице, значит пользователь с таким почтовым адресом уже зарегистрирован if($result_query->num_rows == 1){ //Если полученный результат не равен false if(($row = $result_query->fetch_assoc()) != false){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Пользователь с таким почтовым адресом уже зарегистрирован

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Ошибка в запросе к БД

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); } /* закрытие выборки */ $result_query->close(); //Останавливаем скрипт exit(); } /* закрытие выборки */ $result_query->close();

И так, мы закончили со всеми проверками, пора добавить пользователя в БД. В указанном месте " // (4) Место для кода добавления пользователя в БД " добавляем следующий код:

//Запрос на добавления пользователя в БД $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, last_name, email, password) VALUES ("".$first_name."", "".$last_name."", "".$email."", "".$password."")"); if(!$result_query_insert){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Ошибка запроса на добавления пользователя в БД

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); }else{ $_SESSION["success_messages"] = "

Регистрация прошла успешно!!!
Теперь Вы можете авторизоваться используя Ваш логин и пароль.

"; //Отправляем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); } /* Завершение запроса */ $result_query_insert->close(); //Закрываем подключение к БД $mysqli->close();

Если в запросе на добавления пользователя в БД произошла ошибка, мы добавляем сообщение об этой ошибке в сессию и возвращаем пользователя на страницу регистрации.

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

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

Запуск сессии также происходит в файле header.php , поэтому в файле form_auth.php сессию запускать не нужно, потому что получим ошибку.


Как я уже сказал, скрипт проверки формата почтового адреса и длины пароля здесь также действует. Поэтому если пользователь введёт неправильный почтовый адрес или короткий пароль, то он сразу же получить сообщение об ошибке. А кнопка войти станет не активной.

После устранения ошибок кнопка войти становится активной, и пользователь сможет отправить форму на сервер, где она будет обрабатываться.

Авторизация пользователя

В значение атрибута action у форы авторизации указан файл auth.php , это значит, что форма будет обрабатываться именно в этом файле.

И так, открываем файл auth.php и пишем код для обработки формы авторизации. Первое что нужно сделать это запустить сессию и подключить файл dbconnect.php для соединения с БД.

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

Код файла logout.php:

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

Ещё мы научились проверять вводимые данные, как на стороне клиента (в браузере, с помощью JavaScript, jQuery) так и на стороне сервера (с помощью языка PHP). Также мы научились реализовать процедуру выхода с сайта .

Все скрипты проверены и рабочие. Архив с файлами этого маленького сайта Вы можете скачать по этой ссылке .

В будущем я напишу статью где опишу . И ещё планирую написать статью где объясню, (без перезагрузки страницы). Так что, для того чтобы быть в курсе о выходе новых статей можете подписаться на мой сайт.

При возникновении вопросов обращайтесь, также, если вы заметили, какую-то ошибку в статье прошу вас, сообщите, мне об этом.

План урока (Часть 5):

  • Создаем HTML структуру для формы авторизации
  • Обрабатываем полученные данные
  • Выводим приветствие пользователя в шапку сайта
    • Понравилась статья?

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

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

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

    Пример посмотрели, теперь давайте, разберём в деталях все основные компоненты модального окна и форм, для того что бы научиться использовать их у себя на сайте.
    Работа всплывающего окна с формами входа и регистрации, выстроена на популярной библиотеке javascript, исполняемом плагине jQuey и сформированных стилях CSS. Все эти инструменты необходимо подключить к вашему сайту. Последнюю актуальную версию библиотеки jQuey можно подключить напрямую с Google, сам файл плагина main.js и готовый набор сформированных стилей style.css найдёте в архиве.
    Javascript прописываем перед закрывающим тегом , стили CSS можно скопировать и добавить в файл стилей.css вашего сайта.

    HTML Структура:

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

    < div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" > Вход < li>< a href= "#0" > Регистрация < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" > E- mail < input class = id= "signin-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" > Пароль < input class = "full-width has-padding has-border" id= "signin-password" type= "text" placeholder= "Пароль" > < a href= "#0" class = "hide-password" > Скрыть < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" > Запомнить меня < p class = "fieldset" > < input class = "full-width" type= "submit" value= "Войти" > < p class = "cd-form-bottom-message" >< a href= "#0" > Забыли свой пароль? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" > Имя пользователя < input class = "full-width has-padding has-border" id= "signup-username" type= "text" placeholder= "Имя пользователя" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" > E- mail < input class = "full-width has-padding has-border" id= "signup-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" > Пароль < input class = "full-width has-padding has-border" id= "signup-password" type= "text" placeholder= "Пароль" > < a href= "#0" class = "hide-password" > Скрыть < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" > Я согласен с < a href= "#0" > Условиями < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Создать аккаунт" > < div id= "cd-reset-password" > < p class = "cd-form-message" > Забыли пароль? Пожалуйста, введите адрес своей электронной почты. Вы получите ссылку, чтобы создать новый пароль. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" > E- mail < input class = "full-width has-padding has-border" id= "reset-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Восстановить пароль" > < p class = "cd-form-bottom-message" >< a href= "#0" > Вернуться к входу < a href= "#0" class = "cd-close-form" > Закрыть

    • Вход
    • Регистрация

    E-mail Здесь сообщение об ошибке!

    Пароль Скрыть Здесь сообщение об ошибке!

    Запомнить меня

    Забыли свой пароль?

    Имя пользователя Здесь сообщение об ошибке!

    E-mail Здесь сообщение об ошибке!

    Пароль Скрыть Здесь сообщение об ошибке!

    Я согласен с Условиями

    Забыли пароль? Пожалуйста, введите адрес своей электронной почты. Вы получите ссылку, чтобы создать новый пароль.

    E-mail Здесь сообщение об ошибке!

    Вернуться к входу

    Закрыть



    CSS Стили:

    Базовый шаблон и элементы управления форм, автор выполнил в популярном, плоском стиле (Flat), с явным упором на минимализм. Ничего лишнего, в меру прозрачный фон затемнения, лёгкие для восприятия цвета, хорошо подобранный шрифт и иконки, для обозначения полей ввода. С помощью свойств CSS, вы легко сможете видоизменить любой элемент форм.

    .cd-user-modal { position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : rgba (52 , 54 , 66 , 0.9 ) ; z-index : 3 ; overflow-y : auto ; cursor : pointer ; visibility : hidden ; opacity : 0 ; -webkit-transition: opacity 0.3s 0 , visibility 0 0.3s ; -moz-transition: opacity 0.3s 0 , visibility 0 0.3s ; transition : opacity 0.3s 0 , visibility 0 0.3s ; } .cd-user-modal .is-visible { visibility : visible ; opacity : 1 ; -webkit-transition: opacity 0.3s 0 , visibility 0 0 ; -moz-transition: opacity 0.3s 0 , visibility 0 0 ; transition : opacity 0.3s 0 , visibility 0 0 ; } .cd-user-modal .is-visible .cd-user-modal-container { -webkit-transform: translateY(0 ) ; -moz-transform: translateY(0 ) ; -ms-transform: translateY(0 ) ; -o-transform: translateY(0 ) ; transform : translateY(0 ) ; } .cd-user-modal-container { position : relative ; width : 90% ; max-width : 600px ; background : #FFF ; margin : 3em auto 4em ; cursor : auto ; border-radius : 0.25em ; -webkit-transform: translateY(-30px ) ; -moz-transform: translateY(-30px ) ; -ms-transform: translateY(-30px ) ; -o-transform: translateY(-30px ) ; transform : translateY(-30px ) ; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property : transform; -webkit-transition-duration: 0.3s ; -moz-transition-duration: 0.3s ; transition-duration : 0.3s ; } .cd-user-modal-container .cd-switcher : after { content : "" ; display : table ; clear : both ; } .cd-user-modal-container .cd-switcher li { width : 50% ; float : left ; text-align : center ; } .cd-user-modal-container .cd-switcher li: first-child a { border-radius : .25em 0 0 0 ; } .cd-user-modal-container .cd-switcher li: last-child a { border-radius : 0 .25em 0 0 ; } .cd-user-modal-container .cd-switcher a { display : block ; width : 100% ; height : 50px ; line-height : 50px ; background : #d2d8d8 ; color : #809191 ; } .cd-user-modal-container .cd-switcher a.selected { background : #FFF ; color : #505260 ; } @media only screen and (min-width : 600px ) { .cd-user-modal-container { margin : 4em auto ; } .cd-user-modal-container .cd-switcher a { height : 70px ; line-height : 70px ; } } .cd-form { padding : 1.4em ; } .cd-form .fieldset { position : relative ; margin : 1.4em 0 ; } .cd-form .fieldset : first-child { margin-top : 0 ; } .cd-form .fieldset : last-child { margin-bottom : 0 ; } .cd-form label { font-size : 14px ; font-size : 0.875rem ; } .cd-form label.image-replace { /* заменить текст с иконой */ display : inline-block ; position : absolute ; left : 15px ; top : 50% ; bottom : auto ; -webkit-transform: translateY(-50% ) ; -moz-transform: translateY(-50% ) ; -ms-transform: translateY(-50% ) ; -o-transform: translateY(-50% ) ; transform : translateY(-50% ) ; height : 20px ; width : 20px ; overflow : hidden ; text-indent : 100% ; white-space : nowrap ; color : transparent ; text-shadow : none ; background-repeat : no-repeat ; background-position : 50% 0 ; } /* Иконки полей ввода */ .cd-form label.cd-username { background-image : url ("../img/cd-icon-username.svg" ) ; } .cd-form label.cd-email { background-image : url ("../img/cd-icon-email.svg" ) ; } .cd-form label.cd-password { background-image : url ("../img/cd-icon-password.svg" ) ; } .cd-form input { margin : 0 ; padding : 0 ; border-radius : 0.25em ; } .cd-form input.full-width { width : 100% ; } .cd-form input.has-padding { padding : 12px 20px 12px 50px ; } .cd-form input.has-border { border : 1px solid #d2d8d8 ; -webkit-appearance: none ; -moz-appearance: none ; -ms-appearance: none ; -o-appearance: none ; appearance: none ; } .cd-form input.has-border : focus { border-color : #343642 ; box-shadow : 0 0 5px rgba (52 , 54 , 66 , 0.1 ) ; outline : none ; } .cd-form input.has-error { border : 1px solid #d76666 ; } .cd-form input[ type= password] { /* пространство для кнопки Скрыть */ padding-right : 65px ; } .cd-form input[ type= submit] { padding : 16px 0 ; cursor : pointer ; background : #2f889a ; color : #FFF ; font-weight : bold ; border : none ; -webkit-appearance: none ; -moz-appearance: none ; -ms-appearance: none ; -o-appearance: none ; appearance: none ; } .no-touch .cd-form input[ type= submit] : hover , .no-touch .cd-form input[ type= submit] : focus { background : #3599ae ; outline : none ; } .cd-form .hide-password { display : inline-block ; position : absolute ; right : 0 ; top : 0 ; padding : 6px 15px ; border-left : 1px solid #d2d8d8 ; top : 50% ; bottom : auto ; -webkit-transform: translateY(-50% ) ; -moz-transform: translateY(-50% ) ; -ms-transform: translateY(-50% ) ; -o-transform: translateY(-50% ) ; transform : translateY(-50% ) ; font-size : 14px ; font-size : 0.875rem ; color : #343642 ; } .cd-form .cd-error-message { display : inline-block ; position : absolute ; left : -5px ; bottom : -35px ; background : rgba (215 , 102 , 102 , 0.9 ) ; padding : .8em ; z-index : 2 ; color : #FFF ; font-size : 13px ; font-size : 0.8125rem ; border-radius : 0.25em ; /* предотвращения кликов и прикосновения */ pointer-events : none ; visibility : hidden ; opacity : 0 ; -webkit-transition: opacity 0.2s 0 , visibility 0 0.2s ; -moz-transition: opacity 0.2s 0 , visibility 0 0.2s ; transition : opacity 0.2s 0 , visibility 0 0.2s ; } .cd-form .cd-error-message :: after { /* уголок сообщения об ошибке */ content : "" ; position : absolute ; left : 22px ; bottom : 100% ; height : 0 ; width : 0 ; border-left : 8px solid transparent ; border-right : 8px solid transparent ; border-bottom : 8px solid rgba (215 , 102 , 102 , 0.9 ) ; } .cd-form .cd-error-message .is-visible { opacity : 1 ; visibility : visible ; -webkit-transition: opacity 0.2s 0 , visibility 0 0 ; -moz-transition: opacity 0.2s 0 , visibility 0 0 ; transition : opacity 0.2s 0 , visibility 0 0 ; } @media only screen and (min-width : 600px ) { .cd-form { padding : 2em ; } .cd-form .fieldset { margin : 2em 0 ; } .cd-form .fieldset : first-child { margin-top : 0 ; } .cd-form .fieldset : last-child { margin-bottom : 0 ; } .cd-form input.has-padding { padding : 16px 20px 16px 50px ; } .cd-form input[ type= submit] { padding : 16px 0 ; } } .cd-form-message { padding : 1.4em 1.4em 0 ; font-size : 14px ; font-size : 0.875rem ; line-height : 1.4 ; text-align : center ; } @media only screen and (min-width : 600px ) { .cd-form-message { padding : 2em 2em 0 ; } } .cd-form-bottom-message { position : absolute ; width : 100% ; left : 0 ; bottom : -30px ; text-align : center ; font-size : 14px ; font-size : 0.875rem ; } .cd-form-bottom-message a { color : #FFF ; text-decoration : underline ; } .cd-close-form { /* стиль X кнопки вверху справа */ display : block ; position : absolute ; width : 40px ; height : 40px ; right : 0 ; top : -40px ; background : url ("../img/cd-icon-close.svg" ) no-repeat center center ; text-indent : 100% ; white-space : nowrap ; overflow : hidden ; } @media only screen and (min-width : 1170px ) { .cd-close-form { display : none ; } } #cd-login , #cd-signup , #cd-reset-password { display : none ; } #cd-login .is-selected , #cd-signup .is-selected , #cd-reset-password .is-selected { display : block ; }

    Cd-user-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 54, 66, 0.9); z-index: 3; overflow-y: auto; cursor: pointer; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s 0, visibility 0 0.3s; -moz-transition: opacity 0.3s 0, visibility 0 0.3s; transition: opacity 0.3s 0, visibility 0 0.3s; } .cd-user-modal.is-visible { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s 0, visibility 0 0; -moz-transition: opacity 0.3s 0, visibility 0 0; transition: opacity 0.3s 0, visibility 0 0; } .cd-user-modal.is-visible .cd-user-modal-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-user-modal-container { position: relative; width: 90%; max-width: 600px; background: #FFF; margin: 3em auto 4em; cursor: auto; border-radius: 0.25em; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .cd-user-modal-container .cd-switcher:after { content: ""; display: table; clear: both; } .cd-user-modal-container .cd-switcher li { width: 50%; float: left; text-align: center; } .cd-user-modal-container .cd-switcher li:first-child a { border-radius: .25em 0 0 0; } .cd-user-modal-container .cd-switcher li:last-child a { border-radius: 0 .25em 0 0; } .cd-user-modal-container .cd-switcher a { display: block; width: 100%; height: 50px; line-height: 50px; background: #d2d8d8; color: #809191; } .cd-user-modal-container .cd-switcher a.selected { background: #FFF; color: #505260; } @media only screen and (min-width: 600px) { .cd-user-modal-container { margin: 4em auto; } .cd-user-modal-container .cd-switcher a { height: 70px; line-height: 70px; } } .cd-form { padding: 1.4em; } .cd-form .fieldset { position: relative; margin: 1.4em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form label { font-size: 14px; font-size: 0.875rem; } .cd-form label.image-replace { /* заменить текст с иконой */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 20px; width: 20px; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; text-shadow: none; background-repeat: no-repeat; background-position: 50% 0; } /* Иконки полей ввода */ .cd-form label.cd-username { background-image: url("../img/cd-icon-username.svg"); } .cd-form label.cd-email { background-image: url("../img/cd-icon-email.svg"); } .cd-form label.cd-password { background-image: url("../img/cd-icon-password.svg"); } .cd-form input { margin: 0; padding: 0; border-radius: 0.25em; } .cd-form input.full-width { width: 100%; } .cd-form input.has-padding { padding: 12px 20px 12px 50px; } .cd-form input.has-border { border: 1px solid #d2d8d8; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .cd-form input.has-border:focus { border-color: #343642; box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); outline: none; } .cd-form input.has-error { border: 1px solid #d76666; } .cd-form input { /* пространство для кнопки Скрыть */ padding-right: 65px; } .cd-form input { padding: 16px 0; cursor: pointer; background: #2f889a; color: #FFF; font-weight: bold; border: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .no-touch .cd-form input:hover, .no-touch .cd-form input:focus { background: #3599ae; outline: none; } .cd-form .hide-password { display: inline-block; position: absolute; right: 0; top: 0; padding: 6px 15px; border-left: 1px solid #d2d8d8; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 14px; font-size: 0.875rem; color: #343642; } .cd-form .cd-error-message { display: inline-block; position: absolute; left: -5px; bottom: -35px; background: rgba(215, 102, 102, 0.9); padding: .8em; z-index: 2; color: #FFF; font-size: 13px; font-size: 0.8125rem; border-radius: 0.25em; /* предотвращения кликов и прикосновения */ pointer-events: none; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0, visibility 0 0.2s; -moz-transition: opacity 0.2s 0, visibility 0 0.2s; transition: opacity 0.2s 0, visibility 0 0.2s; } .cd-form .cd-error-message::after { /* уголок сообщения об ошибке */ content: ""; position: absolute; left: 22px; bottom: 100%; height: 0; width: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(215, 102, 102, 0.9); } .cd-form .cd-error-message.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.2s 0, visibility 0 0; -moz-transition: opacity 0.2s 0, visibility 0 0; transition: opacity 0.2s 0, visibility 0 0; } @media only screen and (min-width: 600px) { .cd-form { padding: 2em; } .cd-form .fieldset { margin: 2em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form input.has-padding { padding: 16px 20px 16px 50px; } .cd-form input { padding: 16px 0; } } .cd-form-message { padding: 1.4em 1.4em 0; font-size: 14px; font-size: 0.875rem; line-height: 1.4; text-align: center; } @media only screen and (min-width: 600px) { .cd-form-message { padding: 2em 2em 0; } } .cd-form-bottom-message { position: absolute; width: 100%; left: 0; bottom: -30px; text-align: center; font-size: 14px; font-size: 0.875rem; } .cd-form-bottom-message a { color: #FFF; text-decoration: underline; } .cd-close-form { /* стиль X кнопки вверху справа */ display: block; position: absolute; width: 40px; height: 40px; right: 0; top: -40px; background: url("../img/cd-icon-close.svg") no-repeat center center; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (min-width: 1170px) { .cd-close-form { display: none; } } #cd-login, #cd-signup, #cd-reset-password { display: none; } #cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected { display: block; }

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

    Примечание:. Размер шрифта всех полей ввода установлен по умолчанию 16px. Это предотвращает автоматическое масштабирование, которое происходит при просмотре на мобильных устройствах.

    Авторская, буржуинская версия плагина находится . Там же, вы сможете скачать оригинал.
    Русскую версию, можете забрать с моего Яндекс.Диска, все необходимые файлы, бережно упакованы в один архив, перед этим не забудьте посмотреть, полностью адаптированный, живой пример работы этого замечательного плагина jQuery:

    С Уважением, Андрей

    В этом уроке мы создадим стильную форму авторизации на сайте, вы можете её найти в Futurico UI Pro , созданном Владимиром Кудиновым. Для создания формы мы будем использовать CSS3 и jQuery.

    Шаг 1 - HTML-разметка

    Начнем с создания HTML-разметки. Создадим форму с четырьмя input-ами (имя пользователя, пароль, чекбокс и кпонка "submit") флажок мы обернем в тег span, который мы будем использовать для стилизации этого флажка. Затем обернем форму и заголовок в тег DIV и назначим ему класс "login-form".

    Login Form



    remember

    Шаг 2 - Общие стили

    Сначала удалим все поля, отступы, границы и т.д. из элементов, которые мы будем использовать.

    Login-form,
    .login-form h1,
    .login-form span,
    .login-form input,
    .login-form label {
    margin : 0 ;
    padding : 0 ;
    border : 0 ;
    outline : 0 ;
    }

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

    Login-form {
    position : relative ;
    width : 200px ;
    height : 200px ;
    padding : 15px 25px 0 25px ;
    margin-top : 15px ;
    cursor : default ;

    background-color : #141517 ;

    Webkit-border-radius: 5px ;
    -moz-border-radius: 5px ;
    border-radius: 5px ;

    Webkit-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
    -moz-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
    box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
    }

    Чтобы создать стрелку, мы будем использовать селектор :before .

    Login-form :before {
    position : absolute ;
    top : -12px ;
    left : 10px ;

    width : 0px ;
    height : 0px ;
    content : "" ;

    border-bottom : 10px solid #141517 ;
    border-right : 10px solid #141517 ;
    border-top : 10px solid transparent ;
    border-left : 10px solid transparent ;
    }

    Добавим некоторые стили для заголовка формы (цвет, шрифт и размер, и т.д.).

    Login-form h1 {
    line-height : 40px ;
    font-family : "Myriad Pro" , sans-serif ;
    font-size : 22px ;
    font-weight : normal ;
    color : #e4e4e4 ;
    }

    Шаг 3 - Общие стили для полей формы

    Сначала зададим основные стили для input-ов.




    line-height : 14px ;
    margin : 10px 0 ;
    padding : 6px 15px ;
    border : 0 ;
    outline : none ;

    font-family : Helvetica, sans-serif ;
    font-size : 12px ;
    font-weight : bold ;
    text-shadow : 0px 1px 1px rgba(255 , 255 , 255 , .2) ;

    Webkit-border-radius: 26px ;
    -moz-border-radius: 26px ;
    border-radius: 26px ;

    Webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
    }

    Затем мы зададим стили для полей ввода логина и пароля. Мы добавим градиентный серый фон и тени. Мы также добавим фиксированную ширину, равную 170px, и цвет для текста.

    Login-form input[ type= text ] ,
    .login-form input[ type= password] ,
    .js .login-form span {
    color : #686868 ;
    width : 170px ;

    Webkit-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) ;
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) ;
    box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) ;

    background : #989898 ;
    background : -moz-linear-gradient(top , #ffffff 0% , #989898 100% ) ;
    background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #ffffff ) , color-stop(100% , #989898 ) ) ;
    background : -webkit-linear-gradient(top , #ffffff 0% , #989898 100% ) ;
    background : -o-linear-gradient(top , #ffffff 0% , #989898 100% ) ;
    background : -ms-linear-gradient(top , #ffffff 0% , #989898 100% ) ;
    background : linear-gradient(top , #ffffff 0% , #989898 100% ) ;
    }

    При наведении курсора мыши на эти поля мы будем изменять их тени.

    Login-form input[ type= text ] :hover ,
    .login-form input[ type= password] :hover {
    -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5) ;
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5) ;
    box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5) ;
    }

    Для активного состояния мы изменим CSS3 градиент на немного более светлый

    Login-form input[ type= text ] :focus ,
    .login-form input[ type= password] :focus {
    background : #e1e1e1 ;
    background : -moz-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
    background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #ffffff ) , color-stop(100% , #e1e1e1 ) ) ;
    background : -webkit-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
    background : -o-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
    background : -ms-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
    background : linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
    }

    Шаг 4 - Кнопка Submit

    Расположим кнопку справа, для этого зададим ей float:right.

    Login-form input[ type= submit] {
    float : right ;
    cursor : pointer ;

    color : #445b0f ;

    Webkit-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
    box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
    }

    При наведении мыши изменим тени, а в активном состоянии - удалим их.

    Login-form input[ type= submit] :hover {
    -webkit-box-shadow: inset 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
    -moz-box-shadow: inset 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
    box-shadow: inset 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
    }

    Login-form input[ type= submit] :active {
    -webkit-box-shadow: none ;
    -moz-box-shadow: none ;
    box-shadow: none ;
    }

    Добавим зеленый градиент для кнопки.

    Login-form input[ type= submit] ,
    .js .login-form span.checked :before {
    background : #a5cd4e ;
    background : -moz-linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
    background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #a5cd4e ) , color-stop(100% , #6b8f1a ) ) ;
    background : -webkit-linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
    background : -o-linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
    background : -ms-linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
    background : linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
    }

    Шаг 5 - Стили для флажка

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

    Самый простой способ, который я нашел, это заменить флажок тегом span.

    Это будет работать следующим образом: сначала мы спрячем флажок и зададим такие стили для тега span, чтобы он выглядел как флажок, а затем мы будем обновлять этот флажок (отмечен/не отмечен) с помощью jQuery.

    Поскольку у некоторых пользователей отключен JavaScript, нужно добавить резервный вариант. Для этого мы будем добавлять "js" класс в тег body при помощи jQuery. Таким образом, если JavaScript будет включен, класс "js" будет добавлен к тегу body при загрузки страницы, а если JavaScript отключен, то класс не будет добавлен. Так что только пользователи с поддержкой JavaScript будут видеть стилизованный флажок.

    Сначала мы спрячем флажок.

    .js .login-form input[ type= checkbox] {
    position : fixed ;
    left : -9999px ;
    }

    Затем мы разместим в нужном нам месте тег span.

    .login-form span {
    position : relative ;
    margin-top : 15px ;
    float : left ;
    }

    Затем добавим некоторые стили для тега span (ширину, высоту, границу и др.).

    .js .login-form span {
    width : 16px ;
    height : 16px ;
    cursor : pointer ;

    Webkit-border-radius: 2px ;
    -moz-border-radius: 2px ;
    border-radius: 2px ;
    }

    Чтобы создать состояние "checked", в span мы вставим маленький квадрат и поместим его в центре.

    .js .login-form span.checked :before {
    content : "" ;
    position : absolute ;
    top : 4px ;
    left : 4px ;
    width : 8px ;
    height : 8px ;

    Webkit-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .45) , inset 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
    -moz-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .45) , inset 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
    box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .45) , inset 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
    }

    Тег label мы разместим справа от флажка и добавим некоторые основные стили (шрифт, цвет и т.д.).

    .login-form label {
    position : absolute ;
    top : 1px ;
    left : 25px ;
    font-family : sans-serif ;
    font-weight : bold ;
    font-size : 12px ;
    color : #e4e4e4 ;
    }

    Все стили, которые имеют класс "js" в начале, будут применяться только если включена поддержка JavaScript.

    Шаг 6 - jQuery

    Сначала мы подключим последнюю версию библиотеки jQuery, используя Google API, если вы хотите, вы можете разместить её на своем собственном сервере, это ваш выбор. Затем добавьте следующий код в нижней части HTML-файла, перед закрывающим тегом .

    < script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" >
    < script>
    $(document) .ready (function () {

    // Check if JavaScript is enabled
    $("body" ) .addClass ("js" ) ;

    // Make the checkbox checked on load
    $(".login-form span" ) .addClass ("checked" ) .children ("input" ) .attr ("checked" , true ) ;

    // Click function
    $(".login-form span" ) .on ("click" , function () {

    if ($(this ) .children ("input" ) .attr ("checked" ) ) {
    $(this ) .children ("input" ) .attr ("checked" , false ) ;
    $(this ) .removeClass ("checked" ) ;
    }

    else {
    $(this ) .children ("input" ) .attr ("checked" , true ) ;
    $(this ) .addClass ("checked" ) ;
    }
    } ) ;
    } ) ;

    Вначале мы добавим класс "js" в тег body.


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

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

    Код HTML

    Для начала нужно начать с кода HTML. HTML-код очень простенький - он содержит в себе тэг «a», который идет вместе с тэгом «fieldset», за счет которого отображается форма.

    Просто скопируйте это в код новой страницы:


    Have an account? Sign in


    Username or email


    Password




    Remember me


    Forgot your password?


    Forgot your username?






    Код CSS

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

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

    #container {
    width:780px;
    margin:0 auto;
    position: relative;
    }

    #content {
    width:520px;
    min-height:500px;
    }
    a:link, a:visited {
    color:#27b;
    text-decoration:none;
    }
    a:hover {
    text-decoration:underline;
    }
    a img {
    border-width:0;
    }
    #topnav {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
    }
    #topnav a.signin {
    background:#88bbd4;
    padding:4px 6px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    *background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
    *padding:4px 12px 6px;
    }
    #topnav a.signin:hover {
    background:#59B;
    *background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
    *padding:4px 12px 6px;
    }
    #topnav a.signin, #topnav a.signin:hover {
    *background-position:0 3px!important;
    }

    a.signin {
    position:relative;
    margin-left:3px;
    }
    a.signin span {
    background-image:url("images/toggle_down_light.png");
    background-repeat:no-repeat;
    background-position:100% 50%;
    padding:4px 16px 6px 0;
    }
    #topnav a.menu-open {
    background:#ddeef6!important;
    color:#666!important;
    outline:none;
    }
    #small_signup {
    display:inline;
    float:none;
    line-height:23px;
    margin:25px 0 0;
    width:170px;
    }
    a.signin.menu-open span {
    background-image:url("images/toggle_up_dark.png");
    color:#789;
    }

    И дальше идет определение формы логина:

    #signin_menu {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
    background-color:#ddeef6;
    position:absolute;
    width:210px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    padding:12px;
    top: 24.5px;
    right: 0px;
    margin-top:5px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#789;
    font-size:11px;
    }

    #signin_menu input, #signin_menu input {
    display:block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #ACE;
    font-size:13px;
    margin:0 0 5px;
    padding:5px;
    width:203px;
    }
    #signin_menu p {
    margin:0;
    }
    #signin_menu a {
    color:#6AC;
    }
    #signin_menu label {
    font-weight:normal;
    }
    #signin_menu p.remember {
    padding:10px 0;
    }
    #signin_menu p.forgot, #signin_menu p.complete {
    clear:both;
    margin:5px 0;
    }
    #signin_menu p a {
    color:#27B!important;
    }
    #signin_submit {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    background:#39d url("images/bg-btn-blue.png") repeat-x scroll 0 0;
    border:1px solid #39D;
    color:#fff;
    text-shadow:0 -1px 0 #39d;
    padding:4px 10px 5px;
    font-size:11px;
    margin:0 5px 0 0;
    font-weight:bold;
    }
    #signin_submit::-moz-focus-inner {
    padding:0;
    border:0;
    }
    #signin_submit:hover, #signin_submit:focus {
    background-position:0 -5px;
    cursor:pointer;
    }

    Пришло время поработать с javascript

    Казалось бы, коды HTML и CSS достаточно сложные и запутанные, а в javascript все очень просто. Просто копируйте этот код javascript, за счет которого можно будет отображать и прятать форму в момент клика по кнопке авторизации, даже если клик будет произведен вне формы логина.



    $(document).ready(function() {

    $(".signin").click(function(e) {
    e.preventDefault();
    $("fieldset#signin_menu").toggle();
    $(".signin").toggleClass("menu-open");
    });

    $("fieldset#signin_menu").mouseup(function() {
    return false
    });
    $(document).mouseup(function(e) {
    if($(e.target).parent("a.signin").length==0) {
    $(".signin").removeClass("menu-open");
    $("fieldset#signin_menu").hide();
    }
    });

    });

    Согласно коду, представленному выше, когда посетитель кликает по кнопке авторизации, запускается новая функция. Сначала отображается форма логина (заключенная в тэг «filedset»), затем ссылка, заключенная в класс «.signin», добавляет еще один класс «menu-open», за счет которого сменяется фоновое изображение.

    Еще одно событие в этом коде заключается в том, что когда посетители кликают не по форме логина, а где-то на странице – то форма сама закрывается. Другими словами, класс «menu-open» снимается с ссылки с классом «.signin» и возвращает ей первоначальное фоновое изображение.

    Что касается подсказок?


    $(function() {
    $("#forgot_username_link").tipsy({gravity: "w"});
    });

    Мы обычно советуем использовать плагин для jQuery – tipsy . Содержимое tooltip-а представляет собой то, что написано в атрибуте «title», относящемся к ссылке. Вы можете менять позицию tooltip-а относительно востока, запада, юга или севера. Это реализуется за счет параметра «gravity», указанного в коде выше. Мы предоставляем Вам ссылку на сайт, посвященный этому плагину, там Вы сможете более подробно изучить его возможности и скачать плагин. …

    В заключение

    Если Вы скопировали весь код с этой статьи, пожалуйста, не меняйте структуру папок. Если Вы измените ее, то код не будет работать. Данный код является лишь примером создания выпадающей формы авторизации с помощью jQuery . Удачи в практике!

    © Copyright 2024, pcwe.ru - Портал о персональных компьютерах.