Форма подписки в стиле "Углеродное волокно" на PHP, jQuery и CSS3

Новое

Фреймворк Bootstrap

Форма подписки в стиле "Углеродное волокно" на PHP, jQuery и CSS3


Исходники	Пример

Сегодня мы будем делать форму в стиле "Углеродное волокно" методом постепенного улучшения. Это значит, что сперва мы добьемся необходимого результата без применения JavaScript и причудливого CSS (вспомним о "старике" IE6), после чего двинемся дальше и добавим стильный внешний вид и магию AJAX и jQuery.

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

Шаг 1 - XHTML

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

demo.html


<div id="carbonForm">
	<h1>Signup</h1>

	<form action="submit.php" method="post" id="signupForm">

		<div class="fieldContainer">
			<div class="formRow"></div>
			<!-- Еще два блока div с классом formRow -->
		</div>

		<div class="signupButton">
			<input type="submit" name="submit" id="submit" value="Signup" />
		</div>

	</form>
</div>

Главный контейнер для формы - div carbonForm. Он отцентрован по горизонтали средствами CSS при помощи свойства "margin", а по вертикали - средствами jQuery. Внутри него находится заголовок и форма с контейнером fieldContainer. Внутри него - три блока formRow, каждый из который имеет следующую структуру:

demo.html

<div class="formRow">
	<div class="label">
		<label for="name">Name:</label>
	</div>

	<div class="field">
		<input type="text" name="name" id="name" />
	</div>
</div>

Каждая пара тэгов label и input находится внутри своих "оберточных" контейнеров, которым задано float:left. Важно, чтобы имя поля для ввода совпадало с его идентификатором, так как мы будем это использовать в дальнейшем, при выводе сообщений об ошибках.

Шаг 2 – CSS

Основной эффект "углеродного волокна" достигается средствами CSS. Помимо прочего, используются некоторые правила из CSS3, которые успешно имитируют такие визуальные эффекты, каких раньше можно было добиться разве что при использовании мощных графических пакетов вроде Photoshop. Ниже представлены только наиболее интересные стили, остальные вы можете увидеть непосредственно в файле styles.css в прилагаемом для скачивания архиве.

styles.css


#carbonForm{
	/* Основной контейнер, содержащий форму */
	background-color:#1C1C1C;
	border:1px solid #080808;
	margin:20px auto;
	padding:20px;
	width:500px;

	-moz-box-shadow:0 0 1px #444 inset;
	-webkit-box-shadow:0 0 1px #444 inset;
	box-shadow:0 0 1px #444 inset;
}

.fieldContainer{
	/* Чуть осветленная скругленная секция, содержащая поля формы */
	background-color:#1E1E1E;
	border:1px solid #0E0E0E;
	padding:30px 10px;

	/* CSS3 тени, используются для создания эффекта внутреннего свечения */
	-moz-box-shadow:0 0 20px #292929 inset;
	-webkit-box-shadow:0 0 20px #292929 inset;
	box-shadow:0 0 20px #292929 inset;
}

#carbonForm,.fieldContainer,.errorTip{
	/* Скругляем блоки */
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}

.formRow{
	height:35px;
	padding:10px;
	position:relative;
}

.label{
	float:left;
	padding:0 20px 0 0;
	text-align:right;
	width:70px;
}

label{
	font-family:"Century Gothic","Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:11px;
	letter-spacing:1px;
	line-height:35px; /* Neat line height trick */
}

.field{
	float:left;
}

.field input{
	/* Поля ввода */
	border:1px solid white;
	color:#666666;
	font-family:Arial,Helvetica,sans-serif;
	font-size:22px;
	padding:4px 5px;
	background:url("img/box_bg.png") repeat-x scroll left top #FFFFFF;
	outline:none;
}

#submit{
	/* Кнопка отправки */
	border:1px solid #f4f4f4;
	cursor:pointer;
	height:40px;
	text-indent:-9999px;
	text-transform:uppercase;
	width:110px;

	background:url("img/submit.png") no-repeat center center #d0ecfd;

	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}

#submit.active{
	/* когда кнопка в состоянии active, фоном становится эта картинка */
	background-image:url("img/preloader.gif");
}

input:hover,
input:focus{
	/* CSS3 эффект свечения */
	-moz-box-shadow:0 0 8px lightblue;
	-webkit-box-shadow:0 0 8px lightblue;
	box-shadow:0 0 8px lightblue;
}

Большинство из приведенных правил очень просты. Интересным моментом может показаться обработка нажатия кнопки, так как добиться кроссбраузерности в данном случае не так просто.

Чтобы спрятать текст кнопки, мы можем использовать отрицательное значения для свойства "text-indent", но в IE такой прием работает только, если мы используем также и правило "text-transform" со значением "uppercase". Мы также добавляем прозрачную фоновую картинку, на которой шрифтом Century Gothic написано "Submit", которая заменяется специальной gif-картинкой, имитирующей процесс загрузки в том случае, если кнопке назначен класс "active".

Мы также используем некоторые эффекты CSS3 с применением специфических свойств для отдельных браузеров для лучшей совместимости. Border-radius используется для скругления углов, а box-shadow позволяет имитировать эффекты свечения и тени.

Шаг 3 - jQuery

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

script.js


$(document).ready(function(){
	// $(document).ready() выполняется по завершению загрузки страницы

	// Слежение за событием "отправка формы"
	$('#signupForm').submit(function(e){

		// Если еще не завершена предыдущая отправка
		if($('#submit').hasClass('active')) return false;

		// Добавляем класс active для кнопки, показывает gif-картинку :
		$('#submit').addClass('active');

		// Убираем текущие сообщения об ошибках
		$('.errorTip').remove();

		// Адресуем POST-запрос ajax файлу submit.php:
		$.post($('#signupForm').attr('action'),
			$('#signupForm').serialize()+'&fromAjax=1',function(response){

			if(!response.status)
			{
				// Если случилась какая-то ошибка при вводе

				// Проходим циклом по всем полям,
				// проверяя, где допущена ошибка
				$('input[type!=submit]').each(function(){
					var elem = $(this);
					var id = elem.attr('id');

					if(response[id])
						showTooltip(elem,response[id]);
				});
			}
			else location.replace(response.redirectURL);

			$('#submit').removeClass('active');
		},'json');

		e.preventDefault();
	});

	$(window).resize();
});

// Центровка формы по вертикали при изменении размера окна браузера
$(window).resize(function(){
	var cf = $('#carbonForm');

	$('#carbonForm').css('margin-top',($(window).height()-cf.outerHeight())/2)
});

// Вспомогательная функция, создающая сообщения об ошибках
function showTooltip(elem,txt)
{
	// elem - поле, txt - текст ошибки
	$('<div class="errorTip">').html(txt).appendTo(elem.closest('.formRow'));
}

Нажатие на кнопку (или нажатие "Enter" во время ввода текста в какое-либо поле) приводит к отправке формы. Функция, связанная с событием "нажатие кнопки" предотвращает это событие с помощью e.preventDefault(); и адресует вместо этого AJAX-запрос файлу submit.php.

Ответ обрабатывается как код JSON (объект Javascript), который содержит специальное свойство статуса. На основании его значения скрипт или показывает сообщения об ошибках около полей, или перенаправляет браузер на указанный URL.

Отрывок с примерами сообщений об ошибках


{
   "status"  : 0,	// Показывает, что ответ содержит ошибку
   "email"   : "Please fill in a valid email!",      // Сообщение об ошибке
   "pass"    : "Please fill in a valid password!"    // Сообщение об ошибке
}

Сообщения об ошибках генерируются скриптом по мере обхода в цикле всех полей формы и проверки того, существуют ли их "id" как свойства в объекте ответа сервера. Если они существуют, создается всплывающее сообщение об ошибке с помощью функции showTooltip().

Также обратите внимание на то, как мы используем метод serialize() в 18 строке для того, чтобы отправить все поля формы за один раз. На этой же линии мы установили fromAjax=1, что сообщает PHP-интерпретатору о том, что нужно вернуть ответ как JSON.

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

Шаг 4 - PHP

Замечательно в этой форме то, что ее можно использовать даже при отключенном JavaScript. Это возможно потому, что атрибут "action" для формы указан как "submit.php". Это означает, что нам нужно лишь однажды осуществить валидацию вне зависимости от того, как была отправлена форма.

submit.php


// Error reporting:
error_reporting(E_ALL^E_NOTICE);

// URL на который идет редирект при корректном заполнении

$redirectURL = 'http://demo.tutorialzine.com/2010/04/carbon-signup-form/demo.html';

$errors = array();

// Проверяем введенные данные на ошибки и добавляем их (ошибки) в массив $errors

if(!$_POST['name'] || strlen($_POST['name'])<3 || strlen($_POST['name'])>50)
{
	$errors['name']='Пожалуйста, введите правильное имя!<br />Должно иметь от 3 до 50 символов.';
}

if(!$_POST['email'] || !preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email']))
{
	$errors['email']='Пожалуйста, введите корректный email!';
}

if(!$_POST['pass'] || strlen($_POST['pass'])<5)
{
	$errors['pass']='Пожалуйста, введите корректный пароль!<br />Должен содержать не менее 5 символов.';
}

// Проверяем, был ли запрос послан с помощью AJAX
// (мы вручную посылаем переменную fromAjax вместе с AJAX-запросом):

if($_POST['fromAjax'])
{
	if(count($errors))
	{
		$errString = array();
		foreach($errors as $k=>$v)
		{
			// Имя поля, где произошла ошибка и текст ошибки сгруппированы как пара "ключ-значение"
			$errString[]='"'.$k.'":"'.$v.'"';
		}

		// JSON ответ об ошибке:
		die	('{"status":0,'.join(',',$errString).'}');
	}

	// JSON успешный ответ. Возвращает URL для редиректа:
	echo '{"status":1,"redirectURL":"'.$redirectURL.'"}';

	exit;
}

// Если запрос производился не через AJAX (вероятно, был отключен JavaScript):

if(count($errors))
{
	echo '<h2>'.join('<br /><br />',$errors).'</h2>';
	exit;
}

// Непосредственная переадресация пользователя при выключенном JS:

header("Location: ".$redirectURL);

Все встречающиеся ошибки заносятся в массив $errors. В зависимости от того, использовалась ли конструкция fromAjax, они возвращаются либо как объект JSON, либо непосредственно выводятся на экран.

Теперь наша форма в стиле "углеродное волокно" готова!

Вывод

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

По материалам tutorialzine.com
Перевод - Дмитрий Науменко

P.S. Ищете комплексные знания по таким темам, как JavaScript, PHP, Ajax, CSS и другим? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоиться в мире веб-разработки:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

	PHP: Получение информации об объекте или классе, методах, свойствах и наследовании
	CodeIgniter: жив или мертв?
	Функции обратного вызова, анонимные функции и механизм замыканий
	Применение функции к каждому элементу массива
	Слияние массивов. Преобразование массива в строку
	Деструктор и копирование объектов с помощью метода __clone()
	Эволюция веб-разработчика или Почему фреймворк - это хорошо?
	Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)
	PHP: Удаление элементов массива
	Ключевое слово final (завершенные классы и методы в PHP)
	50 классных сервисов, программ и сайтов для веб-разработчиков