Упрощаем регистрацию и вход на сайт

Сергей Маковецкий

17 Ноя 2011

(5,00 из 5 на основе 2 оценок)

Loading ...

1 309

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

Упрощаем формы регистрации

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

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

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

Упрощаем регистрацию и вход на сайт

Плагин jQuery для скрытия/открытия пароля

Пример

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

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
	<script src="js/show_password.js" type="text/javascript"><!--mce:1--></script>
	<script src="js/init.js" type="text/javascript"><!--mce:2--></script>

1. библиотека jQuery
2. скачать плагин
3-7. инициализация на элементе

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

<form id="myform1" action="#" method="post">
	<label class="form" for="myname1">Логин:</label>
<input id="myname1" name="myname1" type="name" />
 
	<label class="form" for="testpassword1">Пароль: </label>
<input id="testpassword1" name="mypassword1" type="password" />
</form>

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›:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"><!--mce:3--></script>
<script src="js/zip_city.js" type="text/javascript"><!--mce:4--></script>

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

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

Индекс
<input id="txtZip" name="txtZip" type="text" />
Город
<input id="txtCity" name="txtCity" type="text" />
Страна
<input id="txtCountry" name="txtCountry" type="text" />

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[1];	//устанавливаем значения для поля города
				document.getElementById("txtCountry").value = ziparray[2];  //устанавливаем значения для поля страны
			}
		}
	}
	xmlhttp.send(null);
}
//функция обрезки пробелов
function trim(s)
{
	var l=0; var r=s.length -1;
	while(l &lt; s.length &amp;&amp; s[l] == ' ')
	{	l++; }
	while(r &gt; l &amp;&amp; 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)&gt;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:<strong>Query:</strong> ".$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 ;

Скачать файлы примера

Упрощаем регистрацию и вход на сайт, 1

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

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

AJAX Auto-Complete под jQuery

Пример

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:5--></script>
<script src="js/jquery.autocomplete.js" type="text/javascript"><!--mce:6--></script>
<script src="js/init.js" type="text/javascript"><!--mce:7--></script>

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

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

Страна
<input id="query" name="q" type="text" />

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']) &amp;&amp; (!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:<strong>Query:</strong> ".$q."".mysql_error($conn));		/*получаем результат запроса*/
 
	if(mysql_num_rows($res)&gt;0){
		while($row = mysql_fetch_row($res)){
			$variants[] = "'".$row[0]."'";		/*заполняем массив вариантов*/
		}
		$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;
	}

Скачать файлы примера

Упрощаем регистрацию и вход на сайт, 2

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

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

Копирование адреса оплаты и адреса доставки при помощи jQuery

Пример

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:8--></script>
<script src="js/jquery.select.js" type="text/javascript"><!--mce:9--></script>  <!--Необходим для правильной работы с выпадающим меню-->
<script src="js/init.js" type="text/javascript"><!--mce:10--></script>

1. библиотека jQuery
2. jQuery Select Plugin
3. основной скрипт

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

<form id="addressform">
 
Данные оплаты
<div id="billing_fields">
	Имя:
<input name="bill_firstname" type="text" />
	Фамилия:
<input name="bill_lastname" type="text" />
	Email:
<input name="bill_email" type="text" />
	Страна:
<select id="bcountry" name="country">
<option>Выбор</option>
<option value="USA">США</option>
<option value="Canada">Канада</option>
</select></div>
<input id="copyaddress" type="checkbox" /> Копировать 
 
Данные доставки
<div id="shipping_fields">
	Имя:
<input name="ship_firstname" type="text" />
	Фамилия:
<input name="ship_lastname" type="text" />
	Email:
<input name="ship_email" type="text" />
	Страна:
<select id="scountry" name="country">
<option>Выбор</option>
<option value="USA">США</option>
<option value="Canada">Канада</option>
</select></div>
</form>

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("");
        }
    });
});

Скачать файлы примера

Копирование введенных данных в другое поле ввода при помощи jQuery

Упрощаем регистрацию и вход на сайт, 3

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

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

Влияние капчи на уровень конверсии

Пример

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

<form action="honey.php" method="GET">
	Имя
<input type="text" />
	Фамилия
<input type="text" />
	E-Mail
<input type="text" />
<div id="honeypotsome-div" style="display: none;">
		Скрытое поле. Если заполнили его, то вы - бот
<input name="body" type="text" /></div>
<input onclick="javascript:check()" type="submit" value="Найти" />
</form>

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

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

Скачать файлы примера

Упрощаем регистрацию и вход на сайт, 5

Упрощаем формы авторизации

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

Упрощаем регистрацию и вход на сайт, 6

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

На выбор – два варианта: выпадающая форма и модальное окно.

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

Простая и эффективная выпадающая форма авторизации для jQuery

Выпадающая AJAX форма авторизации для jQuery

Пример

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:11--></script>
<script src="js/jquery.form-2.4.0.min.js" type="text/javascript"><!--mce:12--></script>
<script src="js/jqeasy.dropdown.js" type="text/javascript"><!--mce:13--></script>

1. библиотека jQuery
2. jQuery Form Plugin
3. основной скрипт

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

<div id="container">
<div id="signbtn">
		<a rel="nofollow" class="btnsignin" href="/dropdown.html">Войти</a></div>
<div id="frmsignin">
<form id="signin" action="php/dropdown.php" method="post">
 <!--Здесь указывается адрес файла-обработчика-->
 
		<label for="username">Логин</label>
<input id="username" title="username" name="username" type="text" tabindex="1" />
 
		<label for="password">Пароль</label>
<input id="password" title="password" name="password" type="password" tabindex="2" />
<input id="submitbtn" type="submit" value="Войти" tabindex="3" />
<input id="remember" name="remember" type="checkbox" value="1" tabindex="4" />
		<label for="remember">Запомни меня</label>
</form></div>
Для авторизации введите
	Логин: login
	Пароль: password</div>

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('<a rel="nofollow" class="btnsignout" href="dropdown.html">Выйти</a>');/*изменяем кнопку для выхода*/
			} else {
				$('#msg').html(data);
				$('#username').focus();
			}
		}
	});
});
 
function validate(formData, jqForm, options) { /*процедура валидации введённых данных, содержит обработку вывода ошибки*/
	var form = jqForm[0];
	var un = $.trim(form.username.value);
	var pw = $.trim(form.password.value);
	var unReg = /^[A-Za-z0-9_]{3,20}$/;
	var pwReg = /^[A-Za-z0-9!@#$%&amp;*()_]{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, !, @, #, $, %, &amp;, *, (, ), _).
 
';
		hasError = true;
	}
 
	if (!hasError) {
		$('#msg').html('
 
<img src="loading.gif" alt="loading" /> запрос...
 
');
	} else {
		$('#msg').html(errmsg);
	return false;
	}
}

Г. dropdown.php:

if(($_POST['username']=='login') &amp;&amp; ($_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[type=text], #frmsignin input[type=password] {
    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;
}

Скачать файлы примера

Упрощаем регистрацию и вход на сайт, 7

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

Как внедрить AJAX форму авторизации для jQuery в модальное всплывающее окно
Туториал по созданию простого модального окна для jQuery

Пример

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:14--></script>
 
<script src="js/jquery.simplemodal.js" type="text/javascript"><!--mce:15--></script>
<script src="js/init.js" type="text/javascript"><!--mce:16--></script>

1. библиотека jQuery
3. A jQuery plugin to create a modal dialog
4. основной скрипт
6. основные стили
7. базовые стили для модального окна

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

<span style="font-size: 15px;">
	<a rel="nofollow" id="login_link" href="#">Войти</a> | Личный кабинет
</span>
<div id="login_form" style="display: none;">
<div id="status" style="margin-top: 20px; width: 310px;">
<h1><img src="img/key.png" alt="" align="absmiddle" /> Войти</h1>
<div id="login_response"><!-- spanner --></div>
<form id="login" action="javascript:alert('success!');">
<input name="action" type="hidden" value="user_login" />
<input name="module" type="hidden" value="login" />
 
			<label>E-Mail</label>
<input name="email" type="text" />
			<label>Пароль</label>
<input name="password" type="password" />
 
			<label> </label>
<input id="submit" class="big" name="Login" type="submit" value="Login" />
<div id="ajax_loading">
			<img src="img/spinner.gif" alt="" align="absmiddle" /> Обработка...</div>
</form></div>
</div>

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 &gt; 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 = '
<div id="logged_in">' +
	 '
<div style="width: 350px; float: left; margin-left: 70px;">' +
	 '
<div style="width: 40px; float: left;">' +
	 '<img style="margin: 10px 0px 10px 0px;" src="img/ajax-loader.gif" alt="" align="absmiddle" />' +
	 '</div>
' +
	 '
<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+
	 "Вы успешно авторизовались!  Пожалуйста, подождите перенаправления...</div>
</div>
";  
 
$('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'; // Личная страница пользователя
}</div>

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

$config = array();
 
$config['email'] = 'demo@demo.com';
$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'] &amp;&amp; $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 = '
<div id="notification_error">Данные авторизации неверные.</div>
';
 
    echo $auth_error;
	}
}

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

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

Д. 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';
}

Ж. 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) &amp;&amp; ($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;}

Скачать файлы примера

Упрощаем регистрацию и вход на сайт, 8

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

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

Пример

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

<form action="index.php" method="GET">
	Второе поле
<input id="txtZip" type="text" />
	Первое поле
<input id="txtCity" name="find_fio" type="text" />
	Третее поле
<input id="txtCountry" type="text" />
<input type="submit" value="Найти" />
</form>

4. в это поле будет установлен фокус

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

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

Упрощаем регистрацию и вход на сайт, 9

Заключение

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