В этом уроке мы создадим стильную форму авторизации на сайте, вы можете её найти в 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
;
}
Сначала зададим основные стили для 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.
Шаг 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.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
3.8 из 5
Буэнос диаз, амигос!
Сегодня мы с вами сделаем необычную форму регистрации-авторизации-напоминания пароля.
Использовать будем jQuery и jQuery easing plugin, который расширяет возможности анимации jQuery. Об этом плагине мы уже писали. Сейчас же будем использовать на реальном примере.
NB. У этой статьи есть .
Суть того, что я хочу сделать заключается в следующем. Все три формы: регистрация, авторизация и напоминание пароля — на странице есть. Но две из них не видны. При клике на соответствующую псевдоссылку (про ссылки всем советую прочитать статью Павла Марковнина) появляется нужная форма.
В общем-то смотрим пример, и все станет понятно:
HTML и CSSКод страницы будет выглядеть примерно следующим образом:
следующие строчки в css
делают возможным следующую картинку в браузере:
Каждый loginBlock содержит в себе инпуты, кнопки и блоки для показа ошибок. Взглянем на signin:
Блок #error1 изначально невидим и пуст. Если валидация полей не будет пройдена, мы будем его заполнять текстом ошибки и показывать.
JavaScriptПервое, что мы делаем — на $(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-код форм следующий:
Имя: Фамилия: Email: Страна: Выбор США Канада Копировать Данные доставки Имя: Фамилия: Email: Страна: Выбор США КанадаДанные оплаты.
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-запроса
$config = array(); $config["email"] = "[email protected]"; $config["password"] = "demo123"; error_reporting(E_ALL ^ E_NOTICE); //отобразить все ошибки, кроме notice // Инициализация сессии session_id(); session_start(); header("Cache-control: private"); // IE 6 FIX if($_POST["action"] == "user_login") { $post_email = $_POST["email"]; $post_password = $_POST["password"]; // проверяем логин и пароль if($post_email == $config["email"] && $post_password == $config["password"]) { // Всё правильно? регистрируем сессию и перенаправляем пользователя к его "Личному кабинету" $username = $post_email; $_SESSION["username"] = $username; if($_POST["remember_me"]) { // устанавливаем cookies на месяц setcookie ("remember_me", true, (time() + TIME_DIFF) + (3600 * 24 * 30)); setcookie ("info", $user_id.",".md5($password), (time() + TIME_DIFF) + (3600 * 24 * 30)); } echo "OK"; // отсылаем ответ успеха для "init.js" } else { $auth_error = " Данные авторизации неверные. "; echo $auth_error; } }Г. 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(); }
ЗаключениеНаша задача состоит в том, чтобы сделать формы регистрации и авторизации такими же милыми и приятными, как, скажем, стюардессы. Надеюсь, мои примеры будут полезными и станут основой для создания ваших собственных шедевров формостроения.
Если вам необходимо сделать один из разделов своего сайта доступным ограниченному, но неопределенному кругу лиц, проще всего это сделать с помощью регистрации и авторизации пользователей. Есть множество способов авторизации пользователей. Можно использовать как инструменты веб-сервера, так и инструменты языка программирования. Мы поговорим о случае, когда используются сессии 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; }
Если всё сделано верно, у вас в броузере должно быть следующее:
Конечно же у нас нет пока ни одного зарегистрированного пользователя, и чтобы авторизоваться, нужно зарегистрироваться. Давайте сделаем форму регистрации.
Регистрация пользователей
Укажите ваш логин:
Регистрация пользователей
Укажите ваш логин: