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

Ошибки

1. Плагин для создания онлайн форм «jFormer»

Создание контактных форм: обратной связи, комментирования, форма входа, форма регистрации с проверкой правильности ввода информации.

2. Пошаговая форма регистрации с использованием jQuery

Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.

3. Пошаговая форма

Заполнение формы в несколько шагов с проверкой правильности заполнения.

4. Контактная форма для сайта

Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.

5. Анимированное переключение между формами на jQuery

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

6. Выезжающая PHP форма обратной связи

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

7. PHP форма регистрации с использованием jQuery и CSS3

Форма с проверкой правильности ввода информации.

8. PHP форма регистрации в стиле Facebook

Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.

9. jQuery контактная форма «SheepIt»

Реализована возможность перед отправкой сообщения добавлять новые поля.

10. Контактная форма «Fancy AJAX Contact Form»

Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.

11. Система авторизации/регистрации на сайте 12. Форма отправки данных

С проверкой правильности заполнения.

13. Плагин jQuery «Contactable»

Для реализации выезжающей формы обратной связи для быстрой отправки сообщения.

Все происходит под управлением PHP, а данные хранятся в базе данных MySQL.

В системе используется отличная выскальзывающая панель , разработанная Web-kreation .

Шаг 1 - MySQL

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

table.sql --
-- Структура таблицы `tz_members`
--
CREATE TABLE `tz_members` (
`id` int(11) NOT NULL auto_increment,
`usr` varchar(32) collate utf8_unicode_ci NOT NULL default "",
`pass` varchar(32) collate utf8_unicode_ci NOT NULL default "",
`email` varchar(255) collate utf8_unicode_ci NOT NULL default "",
`regIP` varchar(15) collate utf8_unicode_ci NOT NULL default "",
`dt` datetime NOT NULL default "0000-00-00 00:00:00",
PRIMARY KEY (`id`),
UNIQUE KEY `usr` (`usr`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Мы определяем id как integer с опцией auto_increment - он будет автоматически назначаться для каждого нового зарегистрированного пользователя. Также usr определяется как unique key - в таблице не допускается существование двух записей с одинаковым именем пользователя.

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

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

Шаг 2 - XHTML

Сначала, нам нужно встроить форму Web-creation в нашу страницу.

demo.php




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





Вход для зарегистрированных пользователей

Имя пользователя:

Пароль:

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







Еще не зарегистрировались? Вводите данные!

Имя пользователя:

Email:

Пароль будет отправлен Вам по почте.





Для зарегистрированных пользователей

Демонстрационные данные


Перейти на страницу пользователя

Выйти из системы










В нескольких местах в коде встречаются операторы PHP, которые проверяют определены ли $_SESSION["usr"] или $_SESSION["id"] . Они имеют значения true только в случае если посетитель страницы зарегистрированный пользователь, что позволяет нам показывать скрытый контент для зарегистрированных посетителей.

После формы мы размещаем остальное содержимое страницы.




Выскальзывающая панель jQuery
Простое управление регистрацией с использованием PHP и jQuery


Какой-то текст...




В коде нет ничего особенного.

Шаг 3 - PHP

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

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

Вот как это реализовано здесь.

demo.php define("INCLUDE_CHECK",true);
require "connect.php";
require "functions.php";
// Данные два файла могут быть включены только если определено INCLUDE_CHECK
session_name("tzLogin");
// Запуск сессии
session_set_cookie_params(2*7*24*60*60);
// Определяет период жизни куки на две недели
session_start();
if($_SESSION["id"] && !isset($_COOKIE["tzRemember"]) && !$_SESSION["rememberMe"])
{
// Если вы вошли в систему, но у вас нет куки tzRemember (рестарт браузера)
// и вы не отметили чекбокс Запомни меня:
$_SESSION = array();
session_destroy();
// Удаляем сессию
}
if(isset($_GET["logoff"]))
{
$_SESSION = array();
session_destroy();
header("Location: demo.php");
exit;
}
if($_POST["submit"]=="Login")
{
// Проверяем, что запрос пришел из формы Входа
$err = array();
// Сохраняем ошибку
if(!$_POST["username"] || !$_POST["password"])
$err = "Все поля должны быть заполнены!";
if(!count($err))
{

$_POST["password"] = mysql_real_escape_string($_POST["password"]);
$_POST["rememberMe"] = (int)$_POST["rememberMe"];
// Подготавливаем все данные
$row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr="{$_POST["username"]}" AND pass="".md5($_POST["password"])."""));
if($row["usr"])
{
// Если все в порядке, то входим в систему
$_SESSION["usr"]=$row["usr"];
$_SESSION["id"] = $row["id"];
$_SESSION["rememberMe"] = $_POST["rememberMe"];
// Сохраняем некоторые данные в сессии
setcookie("tzRemember",$_POST["rememberMe"]);
// Создаем куки tzRemember
}
else $err="Ошибочное имя пользователя или/и пароль!";
}
if($err)
$_SESSION["msg"]["login-err"] = implode("
",$err);
// Сохраняем сообщение об ошибке в сессии
header("Location: demo.php");
exit;
}

Здесь куки tzRemember выступает как контрольный элемент для определения, что надо обеспечить выход из системы пользователю, который не отметил чекбокс “Запомнить меня”. Если куки отсутствует (по причине рестарта браузера) и посетитель не отметил опцию "запомнить меня" мы удаляем сессию.

Сессия сама по себе будет оставаться активной в течении двух недель (так установлено в параметре session_set_cookie_params ).

А вот и вторая часть demo.php .

Else if($_POST["submit"]=="Register")
{
// Если запрос отправлен из формы Регистрации
$err = array();
if(strlen($_POST["username"])32)
{
$err="Имя пользователя должно быть длиной от 3 до 32 символов!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["username"]))
{
$err="Имя пользователя содержит недопустимые символы!";
}
if(!checkEmail($_POST["email"]))
{
$err="Ваш email адрес неправильный!";
}
if(!count($err))
{
// Если нет ошибок
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1,100000)),0,6);
// Сгенерируем случайный пароль
$_POST["email"] = mysql_real_escape_string($_POST["email"]);
$_POST["username"] = mysql_real_escape_string($_POST["username"]);
// подготавливаем данные
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
VALUES(
"".$_POST["username"]."",
"".md5($pass)."",
"".$_POST["email"]."",
"".$_SERVER["REMOTE_ADDR"]."",
NOW()
)");
if(mysql_affected_rows($link)==1)
{
send_mail("demo-test@сайт",
$_POST["email"],
"Демонстрация системы регистрации - генерация пароля",
"Ваш пароль: ".$pass);
$_SESSION["msg"]["reg-success"]="Мы отправили вам email с вашим новым паролем!";
}
else $err="Данное имя пользователя уже используется!";
}
if(count($err))
{
$_SESSION["msg"]["reg-err"] = implode("
",$err);
}
header("Location: demo.php");
exit;
}
$script = "";
if($_SESSION["msg"])
{
// Скрипт показывает выскальзывающую панель на странице загрузки
$script = "

$(function(){
$("div#panel").show();
$("#toggle a").toggle();
});
";
}

Сохраняем все определенные ошибки в массиве $err , который позже присваивается переменной $_SESSION . Таким образом сохраняется доступ к нему после перенаправления браузера.

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

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

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

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


Шаг 4 - CSS

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

demo.css body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Сброс правил */
margin:0px;
padding:0px;
}
body{
color:#555555;
font-size:13px;
background: #eeeeee;
font-family:Arial, Helvetica, sans-serif;
width: 100%;
}
h1{
font-size:28px;
font-weight:bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
letter-spacing:1px;
}
h2{
font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:normal;
letter-spacing:1px;
padding-left:2px;
text-transform:uppercase;
white-space:wrap;
margin-top:4px;
color:#888888;
}
#main p{
padding-bottom:8px;
}
.clear{
clear:both;
}
#main{
width:800px;
/* Центрируем по середине страницы */
margin:60px auto;
}
.container{
margin-top:20px;
background:#FFFFFF;
border:1px solid #E0E0E0;
padding:15px;
/* Скругленные углы */
-moz-border-radius:20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
}
.err{
color:red;
}
.success{
color:#00CC00;
}
a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
.tutorial-info{
text-align:center;
padding:10px;
} Шаг 5 - jQuery

Выскальзываюзая панель имеет свой файл jQuery.

demo.php






В первой строке включается библиотека jQuery из CDN Google. Затем следует заплатка для IE6 PNG для элементов прозрачности. Затем включается скрипт панели

Переменная $script показывает панель на странице загрузки при необходимости.

В сети 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 . Удачи в практике!

В этом уроке мы создадим стильную форму авторизации на сайте, вы можете её найти в 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.


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

Если вам необходимо сделать один из разделов своего сайта доступным ограниченному, но неопределенному кругу лиц, проще всего это сделать с помощью регистрации и авторизации пользователей. Есть множество способов авторизации пользователей. Можно использовать как инструменты веб-сервера, так и инструменты языка программирования. Мы поговорим о случае, когда используются сессии 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; }

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

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

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

© Copyright 2024, ripquality.ru - Компьютерные советы и хитрости.