Jquery формы регистрации и авторизации. Делаем отличную систему регистрации с использованием PHP, MySQL и jQuery. Выезжающая PHP форма обратной связи

3.8 из 5

Буэнос диаз, амигос!

Сегодня мы с вами сделаем необычную форму регистрации-авторизации-напоминания пароля.

Использовать будем jQuery и jQuery easing plugin, который расширяет возможности анимации jQuery. Об этом плагине мы уже писали. Сейчас же будем использовать на реальном примере.

NB. У этой статьи есть .

Суть того, что я хочу сделать заключается в следующем. Все три формы: регистрация, авторизация и напоминание пароля — на странице есть. Но две из них не видны. При клике на соответствующую псевдоссылку (про ссылки всем советую прочитать статью Павла Марковнина) появляется нужная форма.

В общем-то смотрим пример, и все станет понятно:

Код страницы будет выглядеть примерно следующим образом:

следующие строчки в css

делают возможным следующую картинку в браузере:

Каждый loginBlock содержит в себе инпуты, кнопки и блоки для показа ошибок. Взглянем на signin:

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

Первое, что мы делаем — на $(document).ready() вешаем обработчики кликов на псевдоссылки. У нас имеется три пары ссылок, которые должны приводить к одному и тому же результату, каждая пара имеет свой класс. По нему-то мы и будем искать ссылки:

$(document).ready(function() {
$("a.remindPass").click(function(e) {
e.preventDefault();
GoTo(2);
});
$("a.signin").click(function(e) {
e.preventDefault();
GoTo(1);
});
$("a.signup").click(function(e) {
e.preventDefault();
GoTo(0);
});
});

Функция GoTo(num) будет перематывать #wr на нужное значение левого отступа. Здесь всплывает использование плагина jQuery easing:

Function GoTo(num) {
margin = num * 382;
$("#wr").animate({ marginLeft: -margin },
{ duration: 800, easing: "easeInOutBack" });
}

382px — ширина одного.loginBlock"a с учетом всех отступов и бордеров.

Для каждой кнопки действий - регистрации, авторизации и отправки пароля на почту, мы напишем функцию обработчика клика. Здесь приведу только один пример. Остальные можно увидеть в js-файле (ссылка на архив будет внизу статьи).

Function SignUp() {
email = $("#email").val();
pass = $("#password").val();
passAgain = $("#passwordAgain").val();
if (!ValidEmail(email)) {
ShowError(0);
}
else {
if ((pass!="")&&(pass == passAgain)) {
if (!UserWithEmailExists(email)) {
//Register User
HideError()
}
} else {
ShowError(1);
}
}
}

Функция UserWithEmailExists(email) должна отправлять запрос к серверу, чтобы узнать, есть ли пользователь с таким емэйлом в системе. Если есть, то возвращать true, в противном случае false.

Теперь поговорим про показ ошибок и неошибок. Выглядеть это должно примерно так:

Ошибка валидации емэйла:

Ошибка совпадения паролей:

Неошибка:

Для каждой ошибки имеется код, каждая ошибка соответствует своей форме, поэтому можно завести следующий список констант:

Var er0 = "Неправильный формат email"a"; //0
var er1 = "Пароли не совпадают"; //0
var er2 = "Пользователь с таким email"ом уже зарегистрирован"; //0
var er3 = "Не угадали пароль. Или email. Попробуйте еще раз"; //1
var er4 = "Пользователя с таким email"oм у нас еще нету"; //2
var er5 = "Неправильный формат email"a"; //2

А сам показ ошибок реализует следующая функция:

Function HideError() {
$(".error").hide();
}
function ShowError(code) {
HideError();
switch (code) {
case 0:
$("#error0").html(er0).slideDown();
break;
case 1:
$("#error0").html(er1).slideDown();
break;
case 2:
$("#error0").html(er2).slideDown();
break;
case 3:
$("#error1").html(er3).slideDown();
break;
case 4:
$("#error2").html(er4).slideDown();
break;
case 5:
$("#error2").html(er5).slideDown();
break;
}
}

Аналогичным образом реализуется показ неошибок.

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

Итак, несколько приемов:

• не нужно дублировать ввод пароля;

Чтобы облегчить пользователю жизнь (зачем это делать хорошо показано в этом от Google) лучше сделать одно поле и чекбокс, который будет снимать "маску" - всё это осуществляется с помощью небольшого javascript-кода.

// // //

1. Библиотека jQuery.

2-7. инициализация на элементе.

Б. HTML-код формы следующий:

Логин: Пароль:

5-6. видимость этих полей переключается скриптом по чекбоксу.

B. init.js

$(document).ready(function(){ $("#testpassword1").showPassword(); $("#testpassword").showPassword(".checker", { text: "Настраиваемый чекбокс", name: "showmypass" }); });

Г. styles.css

Body { font-family: Arial, Helvetica, serif, sans-serif; } form { margin: 15px 0; padding: 15px; background: #ccc; color: #000; border: 1px solid #aaa; width: 500px; } form label.form { float: left; width: 120px; display: block; } form input#testpassword1, form input#testpassword { float: left; display: block; } .clear { clear: both; } div.checker { clear: both; display: block; border: 1px dotted #2d2d2d; color: #2d2d2d; background: transparent; width: 230px; font-size: 0.8em; margin: 20px 0 0 0; }

• лучше сделать автозаполнение полей на основе введённых данных;

Чем меньше пользователю нужно вводить — тем лучше. Некоторые поля можно заполнить отталкиваясь от предыдущих, уже введённых, данных. Например, можно заполнять поле "город", считывая и обрабатывая значение из поля "индекс". Простой ajax-запрос и дело в шляпе. Использование AJAX для получения данных о городе и области из почтового индекса.

А. Подключаем библиотеки в ‹header›:

1. Библиотека jQuery.
2. Основной скрипт.

Б. HTML-код формы следующий:

Индекс Город Страна

1.Поле, в которое следует внести почтовый индекс.

В. zip_city.js:

Function fillcitystate(controlname){ var zipcode = trim(controlname.value); //обрезаем пробелы if(zipcode.length!=5){ //проверяем длину return false; } var zipstring = ""; xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "php/zip_city.php?zip=" + zipcode, true); //отправляем запрос в php xmlhttp.onreadystatechange=function(){ //при получении результата if (xmlhttp.readyState==4){ var zipstring = xmlhttp.responseText; if (zipstring!="Error"){ var ziparray = zipstring.split("|"); document.getElementById("txtCity").value = ziparray; //устанавливаем значения для поля города document.getElementById("txtCountry").value = ziparray; //устанавливаем значения для поля страны } } } xmlhttp.send(null); } //функция обрезки пробелов function trim(s) { var l=0; var r=s.length -1; while(l < s.length && s[l] == " ") { l++; } while(r > l && s[r] == " ") { r-=1; } return s.substring(l, r+1); }

Г. zip_city.php: обработчик ajax-запроса.

Require_once("db.php"); $db_table = "zip_city"; //установка по умолчанию для возвращаемого значения $returnval = "Error"; //получения GET-параметра $zipcode = $_GET["zip"]; //предобработка if (strlen($zipcode)>5){ $zipcode = substr($zipcode, 0, 5); } if (strlen($zipcode)!=5){ die ($returnval); } //получение значений из БД $query = "SELECT * FROM {$db_table} WHERE zip="{$zipcode}""; $resultval = mysql_query($query) or die("Cannot run query:Query: ".$query."".mysql_error($conn)); $rowcount = mysql_num_rows($resultval); if ($rowcount==1){ $row = mysql_fetch_array($resultval); $returnval = $row["zip"]."|".ucwords(strtolower($row["city"]))."|".$row["country"]; //собственно, формирование успешного ответа } echo $returnval;

Д. db.php: конфигурация подключения к БД.

//настройки подключения к базе $dbhost = "localhost"; $dbusername = "root"; $dbpass = ""; $db_name = "blog_login"; $conn = mysql_connect($dbhost, $dbusername, $dbpass) or die("Cannot connect to MySQL database server:".mysql_error()); $db = mysql_select_db($db_name, $conn) or die("Cannot open database:".mysql_error($conn));

Е. Создание таблицы БД:

CREATE TABLE IF NOT EXISTS `zip_city` (`id` int(11) NOT NULL AUTO_INCREMENT, `zip` varchar(5) NOT NULL, `city` varchar(255) NOT NULL, `country` varchar(255) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=41921 ;

• можно сделать автоподстановку в поле ввода;

Некоторые поля предполагают ограниченный набор вводимых значений. Например, пользователь может ввести два символа, увидеть список стран, которые начинаются на эти буквы и легко выбрать нужную. К тому же, он уж точно не совершит ошибок в названии родины. AJAX Auto-Complete под jQuery .

А. Подключаем в ‹header›:

1. Библиотека jQuery.
2. Скрипт автозаполнения для jQuery .
3. Основной скрипт.

Б. HTML-код формы следующий:

Страна

1. Поле, в которое нужно начинать вводить название страны.

В. init.js:

Var options, a; jQuery(function(){ options = { serviceUrl:"./php/autocomplete.php" }; /*указываем адрес файла-обработчика*/ a = $("#query").autocomplete(options); /*назначаем автозаполнение объекту с id="query"*/ });

Г. autocomplete.php: обработчик ajax-запроса

If(isset($_GET["query"]) && (!empty($_GET["query"]))){ require_once("db.php"); $db_table = "system_countries"; //название таблицы БД $query = $_GET["query"]; //запрос из поля формы $variants = ""; $q = "SELECT `name_en` FROM `{$db_table}` WHERE `name_en` REGEXP "^{$query}(.*)" GROUP BY `name_en`"; /*ищем по первым введённым символам*/ $res = mysql_query($q) or die("Cannot run query:Query: ".$q."".mysql_error($conn)); /*получаем результат запроса*/ if(mysql_num_rows($res)>0){ while($row = mysql_fetch_row($res)){ $variants = """.$row."""; /*заполняем массив вариантов*/ } $variants = implode(",",$variants); /*набиваем все варианты через запятую в строку*/ /*формируем ответ*/ $request = "{ query:"".$query."", suggestions:[".$variants."] }"; echo $request; } }

Д. Создание таблицы БД:

DROP TABLE IF EXISTS `system_countries`; CREATE TABLE `system_countries` (`id` int(11) NOT NULL auto_increment, `name_en` char(128) NOT NULL, `name_ru` char(128) default NULL, `code` char(2) NOT NULL, `_order` int(3) default "0", `independent` tinyint(1) default "1", PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Ж. styles.css:

Autocomplete-w1 { background:url(/autocomplete/img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* IE6 fix: */ _background:none; _margin:0; } .autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; } .autocomplete .selected { background:#F0F0F0; } .autocomplete div { padding:2px 5px; white-space:nowrap; } .autocomplete strong { font-weight:normal; color:#3399FF; }

• зачем вводить данные дважды?

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

А. Подключаем в ‹header›:

1.Библиотека jQuery.

2. jQuery Select Plugin.

3. основной скрипт.

Б. HTML-код форм следующий:

Данные оплаты.

14. Чекбокс копирования.

В. init.js:

//при загрузке страницы $(document).ready(function() { //когда чекбокс активирован или деактивирован $("#copyaddress").click(function() { // если активирован if ($("#copyaddress").is(":checked")) { //для каждого поля ввода $("#shipping_fields input", ":visible", document.body).each(function(i) { //копирование значений из полей оплаты //в соответствующие поля доставки $(this).val($("#billing_fields input").eq(i).val()); }); //не работает с выпадающими меню, поэтому применем функции плагина var bcountry = $("#bcountry").val(); $("#scountry").selectOptions(bcountry); } else { //если деактивирован чекбокс //для каждого поля ввода $("#shipping_fields input", ":visible", document.body).each(function(i) { //очищаем поля данных о доставке $(this).val(""); }); $("#scountry").selectOptions(""); } }); });

• Кажется, люди устали читать капчу:)

Вам ведь и самим, наверное, надоело читать неразборчивые символы с капчи и потом их вводить. Давайте помилуем пользователей, но при этом не пропустим ботов. Для этого можно прибегнуть к нескольким приёмам, рассмотрим один из них. Подход Honeypot Captcha — создаём поле на форме, невидимое пользователю, но видимое боту. Проверив это значение, мы сможем поймать нерадивых спамеров, при этом не создавая сложностей Настоящим Людям. Влияние капчи на уровень конверсии .

А. HTML-код формы следующий:

Имя Фамилия E-Mail Скрытое поле. Если заполнили его, то вы - бот

Б. добавить следующий js:

Function check() { if(document.form_find.body.value){ console.log("CAUTION!!! BOT ON PAGE!!!"); } }

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

• Оставляем пользователя на странице, где он авторизовался;

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

А. Подключаем библиотеки в ‹header›:

3. Основной скрипт.

Б. HTML-код формы следующий:

Логин Пароль Запомни меня Для авторизации введите логин: login и пароль: password

4. Кнопка открытия формы.

7-22. Сама форма.

19. Чекбокс, который заставляет устанавливать куки на очень долго.

23. Место для сообщения.

В. jqeasy.dropdown.js:

$(document).ready(function() { /*основная функция*/ $(".btnsignin").click(function(e) { /*при нажатии на кнопку "Войти"*/ e.preventDefault(); $("#frmsignin").toggle("fast",function() { /*переключает видимость формы*/ $("#username").focus(); /*переводит курсор ввода в поле логина*/ }); $(this).toggleClass("btnsigninon"); /*переключает класс на кнопке для изменения вида*/ $("#msg").empty(); }); $(".btnsignin").mouseup(function() { return false; }); $(document).mouseup(function(e) { /*при отжатии мыши*/ if($(e.target).parents("#frmsignin").length==0) { /*не на одном из объектов формы*/ $(".btnsignin").removeClass("btnsigninon"); /*убираем форму и возвращаем как было*/ $("#frmsignin").hide("fast"); }; }); $("#signin").ajaxForm({ beforeSubmit: validate, /*сначала проверка*/ success: function(data) { /*при получении ответа от обработчика*/ if (data=="OK") { /*если пришло ОК*/ $("#frmsignin").text("Signed in!"); /*отправляем текстовое уведомление*/ $("#frmsignin").delay(800).fadeOut(400); $("#signbtn").html("Выйти"); /*изменяем кнопку для выхода*/ } else { $("#msg").html(data); $("#username").focus(); } } }); }); function validate(formData, jqForm, options) { /*процедура валидации введённых данных, содержит обработку вывода ошибки*/ var form = jqForm; var un = $.trim(form.username.value); var pw = $.trim(form.password.value); var unReg = /^{3,20}$/; var pwReg = /^{6,20}$/; var hasError = false; var errmsg = ""; if (!un) { errmsg = " Введите логин:

"; hasError = true; } else if(!unReg.test(un)) { errmsg = " Логин должен быть длиной 3 - 20 символов (a-z, 0-9, _). "; hasError = true; } if (!pw) { errmsg += " Введите пароль "; hasError = true; } else if(!pwReg.test(pw)) { errmsg += " Пароль должен быть длиной 6 - 20 символов (a-z, 0-9, !, @, #, $, %, &, *, (,), _). "; hasError = true; } if (!hasError) { $("#msg").html(" запрос... "); } else { $("#msg").html(errmsg); return false; } }

Г. dropdown.php:

If(($_POST["username"]=="login") && ($_POST["password"]=="password")){ echo "OK"; }else{ echo "Неверный логин или пароль"; }

Д. style.css:

Body{ padding:20px; font:12px Verdana, Geneva, sans-serif; color:#333; } #container { width:700px; /*margin:0 auto;*/ padding:13px 10px; border:1px solid #999; } a.btnsignin, a.btnsignout { background:#999; padding:5px 8px; color:#fff; text-decoration:none; font-weight:bold; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } a.btnsignin:hover, a.btnsignout:hover { background:#666; } a.btnsigninon { background:#ccc!important; color:#666!important; outline:none; } #frmsignin { display:none; background-color:#ccc; position:absolute; top: 89px; width:215px; padding:12px; *margin-top: 5px; font-size:11px; -moz-border-radius:5px; -moz-border-radius-topleft:0; -webkit-border-radius:5px; -webkit-border-top-left-radius:0; border-radius:5px; border-top-left-radius:0; z-index:100; } #frmsignin input, #frmsignin input { display:block; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #666; margin:0 0 5px; padding:5px; width:203px; } #frmsignin p { margin:0; } #frmsignin label { font-weight:normal; } #submitbtn { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#333; border:1px solid #fff; color:#fff; padding:5px 8px; margin:0 5px 0 0; font-weight:bold; } #submitbtn:hover, #submitbtn:focus { border:1px solid #000; cursor:pointer; } .submit { padding-top:5px; } #msg { color:#F00; } #msg img { margin-bottom:-3px; } #msg p { margin:5px 0; } #msg p:last-child { margin-bottom:0px; } h1{ margin:0 auto; }

Модальное окно концентрирует всё внимание на себе и при этом позволяет поместить на форму дополнительную информацию или описание.

А. Подключаем библиотеки в ‹header›:

4. Основной скрипт.

6. Основные стили.

7. Базовые стили для модального окна.

Б. HTML-код формы следующий:

Войти | Личный кабинет Войти E-Mail Пароль Обработка...

2. Кнопка открытия формы.

6-27. Модальное окно.

8-11. Заголовок модального окна.

В. init.js:

// Предзагрузка img1 = new Image(16, 16); img1.src="./img/spinner.gif"; img2 = new Image(220, 19); img2.src="./img/ajax-loader.gif"; // Когда DOM готов $(document).ready(function(){ // Запускаем MODAL BOX если нажата ссылка входа $("#login_link").click(function(){ $("#login_form").modal(); }); // Когда форма отправлена $("#status > form").submit(function(){ // Прячем кнопку "Submit" $("#submit").hide(); // Показываем крутящийся gif $("#ajax_loading").show(); // "this" ссылается на подтверждённую форму var str = $(this).serialize(); // -- Начало вызова AJAX -- $.ajax({ type: "POST", url: "php/do-login.php", // Информация авторизации отправляется сюда data: str, success: function(msg){ $("#status").ajaxComplete(function(event, request, settings){ // Показать кнопку "Submit" $("#submit").show(); // Спрятать крутящийся gif $("#ajax_loading").hide(); if(msg == "OK") // LOGIN OK? { var login_response = " " + " " + " " + "" + " " + " "+ "Вы успешно авторизовались! Пожалуйста, подождите перенаправления... "; $("a.modalCloseImg").hide(); $("#simplemodal-container").css("width","500px"); $("#simplemodal-container").css("height","120px"); $(this).html(login_response); // Ссылается на "status" // После 3 секунд редирект setTimeout("go_to_private_page()", 3000); } else // ошибка? { var login_response = msg; $("#login_response").html(login_response); } }); } }); // -- Конец вызова AJAX -- return false; }); }); function go_to_private_page() { window.location = "php/private.php"; // Личная страница пользователя }

Г. do-login.php: обработчик ajax-запроса

Г. private.php: страница, к которой доступ только после авторизации.

Include "config.php";//если есть соотвествующие куки, то устанавливается сессия, что пользователь авторизован // Проверка, авторизован ли пользователь if(!isSet($_SESSION["username"])) { header("Location: /modal.html"); exit; } echo " Личная страница Приветствую, "; echo $_SESSION["username"]." | Выйти Это ваша личная страница ";

Д. config.php:

Error_reporting(E_ALL ^ E_NOTICE); session_start(); // Старт сессии header("Cache-control: private"); // IE 6 FIX // always modified header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // HTTP/1.1 header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); // HTTP/1.0 header("Pragma: no-cache"); // ---------- LOGIN INFO ---------- // $config_username = "demo"; $config_password = "demo123"; $cookie_name = "siteAuth"; $cookie_time = (3600 * 24 * 30); // 30 дней if(!$_SESSION["username"]) { include_once "autologin.php"; }

E. autologin.php:

If(isSet($cookie_name)) { // Check if the cookie exists if(isSet($_COOKIE[$cookie_name])) { parse_str($_COOKIE[$cookie_name]); // Make a verification if(($usr == $config_username) && ($hash == md5($config_password))) { // Register the session $_SESSION["username"] = $config_username; } } }

З. logout.php:

Include "config.php"; if(isSet($_SESSION["username"])) { unset($_SESSION["username"]); if(isSet($_COOKIE[$cookie_name])) { // remove "site_auth" cookie setcookie ($cookie_name, "", time() - $cookie_time); } header("Location: modal.html"); exit; }

К. stylesheet.css:

Html, body { padding: 0; border: 0px none; font-family: Verdana; font-size: 11px; } /* Label */ label { width: 80px; padding-left: 20px; margin: 5px; float: left; text-align: left; } /* Input text */ input { margin: 5px; padding: 0px; float: left; border: 1px solid #cdcdcd; background-color: white; -moz-border-radius: 2px; } br { clear: left; } .textbox { border: 1px solid #999999; border-top-color: #CCCCCC; border-left-color: #CCCCCC; color: #333333; font: 90% Verdana, Helvetica, Arial, sans-serif; font-size: 11px; } h1 { font-size: 17px; } div { font-family: Verdana; font-size: 11px; } /* "Login" Button */ #submit { margin: 5px; padding: 0px; float: left; width: 50px; background-color: white; } #notification_error { color: red; height: auto; padding: 4px; text-align: center; } #login_response { overflow: auto; } #ajax_loading { display: none; font-size: 12px; font-family: Tahoma; } #logged_in { padding: 5px; margin: 23px 0 100px 43px; padding: 5px; text-align: center; width: 400px; } #status { margin-top: 20px; width: 310px; }

Л. basic.css:

/* Overlay */ #simplemodal-overlay {background-color:#aaaaaa; cursor:wait;} /* Container */ #simplemodal-container {height:180px; width:300px; background-color:#fff; border:1px solid #000000; -moz-border-radius: 5px; } #simplemodal-container a.modalCloseImg {background:url("img/x.png") no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; left:-18px; cursor:pointer;} #simplemodal-container #basicModalContent {padding:8px;}

• Ставим курсор в первое поле формы.

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

А. HTML-код формы следующий:

Второе поле Первое поле Третее поле

4. в это поле будет установлен фокус Б. добавить следующий js:

Function setFocus() { /*устанавливаем фокус на нужное поле*/ document.form_find.find_fio.select(); document.form_find.find_fio.focus(); }

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

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

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

Login Form

remember

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

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 ;
}

Сначала зададим основные стили для 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% ) ;
}

Расположим кнопку справа, для этого зададим ей 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% ) ;
}

Теперь начинается самая трудная часть, потому что мы не можем изменять вид флажков с помощью 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.

Сначала мы подключим последнюю версию библиотеки 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.

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

Если вам необходимо сделать один из разделов своего сайта доступным ограниченному, но неопределенному кругу лиц, проще всего это сделать с помощью регистрации и авторизации пользователей. Есть множество способов авторизации пользователей. Можно использовать как инструменты веб-сервера, так и инструменты языка программирования. Мы поговорим о случае, когда используются сессии PHP .

Вероятно, вы хотели бы увидеть более современный способ создания такой формы. Полное его современное и актуальное представление у меня пока что еще в планах, но зато вы можете увидеть, что форму обратной связи можно построить с помощью объектно-ориентированных приемов в PHP.

Для начала давайте оговорим все шаги, которые сделаем далее. Что нам вообще нужно? Нам нужен сценарий, который будет регистрировать пользователя, авторизовать пользователя, переадресовывать пользователя куда-либо после авторизации. Также нам нужно будет создать страницу, которая будет защищена от доступа неавторизованных пользователей. Для регистрации и авторизации нам необходимо будет создать HTML -формы. Информацию о зарегистрированных пользователях мы будем хранить в базе данных. Это значит, что нам еще нужен скрипт подключения к СУБД . Всю работу у нас будут выполнять функции, которые мы сами напишем. Эти функции мы сохраним в отдельный файл.

Итак, нам нужны следующие файлы:

• соединение с СУБД;
• пользовательские функции;
• авторизация;
• регистрация;
• защищенная страница;
• сценарий завершения работы пользователя;
• сценарий, проверяющий статус авторизации пользователя;
• таблица стилей для простейшего оформления наших страниц.

Всё это будет бессмысленно, если у вас нет соответствующей таблицы в базе данных. Запустите инструмент управления своим СУБД (PhpMyAdmin или командную строку, как удобнее) и выполните в нем следующий запрос:

CREATE TABLE `users` (`id` int(11) NOT NULL AUTO_INCREMENT, `login` char(16) NOT NULL, `password` char(40) NOT NULL, `reg_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Наши файлы со сценариями я назову так (все они будут лежать в одном каталоге):

• database.php;
• functions.php;
• login.php;
• registration.php;
• index.php;
• logout.php;
• checkAuth.php;
• style.css.

Назначение каждого из них, я уверен, вам понятно. Начнем со скрипта соединения с СУБД. Вы его уже видели . Просто сохраните код этого скрипта в файле с именем database.php . Пользовательские функции мы будем объявлять в файле functions.php . Как это всё будет работать? Неавторизованный пользователь пытается получить доступ к защищенному документу index.php , система проверяет авторизован ли пользователь, если пользователь не авторизован, он переадресовывается на страницу авторизации. На странице авторизации пользователь должен видеть форму авторизации. Давайте сделаем её.

Авторизация пользователей Ваш логин: Ваш пароль:

зарегистрируйтесь.

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

/* файл style.css */ .row { margin-bottom:10px; width:220px; } .row label { display:block; font-weight:bold; } .row input.text { font-size:1.2em; padding:2px 5px; } .to_reg { font-size:0.9em; } .instruction { font-size:0.8em; color:#aaaaaa; margin-left:2px; cursor:default; } .error { color:red; margin-left:3px; }

Если всё сделано верно, у вас в броузере должно быть следующее:

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

Регистрация пользователей Укажите ваш логин: Регистрация пользователей Укажите ваш логин: