В тексте HTML-документа разрешено применять не все символы, которые вы видите на клавиатуре. Впрочем, это логично. Если каждый тег начинается с символа (<) и заканчивается символом (>), то вполне логично, что эти символы нельзя указывать внутри обычного текста. Эти символы имеют особое значение в HTML-документах. Когда браузер их видит он думает, что это HTML-теги и пытается интерпретировать их как таковые.
Для решения проблемы с добавлением символов, запрещенных к вводу в тексте HTML-документа, был разработан набор спецсимволов – последовательностей, которые заменяют запрещенные для ввода с клавиатуры символы. Символы, которые не присутствуют на вашей клавиатуре, также могут быть заменены спецсимволами. Каждая такая последовательность (ссылка-мнемоника) обязательно начинается с символа амперсанда (&) и заканчиваются точкой с запятой (;). Между (&) и (;) можно ввести:

• имя спецсимвола (&имя;);
• числовой код, который вводится после знака ‰(#), то есть при наборе спецсимвола путем указания его числового кода нужно использовать следующую запись: (&#код;);

Числовой код может быть представлен в десятичном или шестнадцатеричном виде.
Например, чтобы отобразить знак меньше (<) мы должны написать: < (имя символа) или &#60; (числовой код в десятичной системе) или &#x0003C; (числовой код в шестнадцатиричной системе).

Неразрывный пробел

Основное назначение неразрывного пробела () (от non-breaking space ) — разделять слова, но запрещать в этом месте переход на новую строку. Поскольку размер окна браузера непостоянен, переход на новую строку в абзаце происходит автоматически. При этом браузер будет разрывать строку в любом месте, где стоит пробел или дефис. Согласно правилам орфографии существуют языковые конструкции, которые нельзя разрывать. К конструкциям с неразрывным пробелом, например, можно отнести:

• фамилии с инициалами;
• длинные тире с предшествующим им словом;
• односложные слова с последующим словом;
• цифры с последующими единицами измерения.

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

• 15 м/с
• 100 км/час

Как вы уже знаете, в HTML несколько идущих подряд обычных пробелов заменяются одним пробелом. Если вы напишете 10 пробелов в тексте, браузер удалит 9 из них. Чтобы добавить в тексте реальные пробелы, вы можете использовать неразрывный пробел () .

Кавычки.

В полиграфии существует три вида кавычек: двойные угловые кавычки или "елочки" (« »), типографские кавычки (“ ”) и рукописные "лапки" („ ”). При работе с программными кодами вы будете пользоваться двойными прямыми кавычками (" ") и одинарными прямыми кавычками (" ").
По традиции в русском языке основным видом кавычек считаются “елочки”. В HTML "елочкам" соответствуют символы « и » . Во многих изданиях вместо "елочек" используются также типографские кавычки и двойные прямые кавычки.
Левой и правой типографским кавычкам соответствуют символы “ и ” соответственно, а нижней левой кавычке — „ .
Прямым двойным кавычкам соответствует спецсимвол " .

Применение спецсимволов кавычек показано в следующем примере:

Пример: Использование кавычек

Дефис и тире.

В полиграфии существует три очень похожих друг на друга знака: длинное тире, короткое тире и дефис. Из них на компьютерной клавиатуре есть только один — это дефис. Именно его обычно и используют во всех случаях, когда в тексте нужно поставить дефис или тире. Тем не менее следует придерживаться определенных правил пунктуации относительно применения этих знаков.
Так, дефис (-) применяется только внутри слов или между цифрами. Длинное тире (—), ставится между словами в предложении и отделяется от этих слов пробелами. Длинному тире соответствует ссылка-мнемоника — . Короткое тире (-) ставится между цифрами без букв или между словами, которые набраны прописными буквами, а также используется в качестве знака "минус" в математических формулах. Между коротким тире и словами пробел не ставится. Короткому тире соответствует ссылка-мнемоника - .

Применение дефиса и тире показано в следующем примере:

Пример: Спецсимволы — и -

• Попробуй сам »

Время - деньги...

Веб-страница что-то слишком долго открывается.
Она должна загружаться за 2-4 секунды.
Время - деньги...

Перечень некоторых популярных спецсимволов HTML

Символ	Описание	Мнемоническое имя	Числовой код
	неразрывный пробел
<	меньше чем	<
>	больше чем	>	>
&	амперсанд	&	&
"	прямая двойная кавычка	"	"
"	апостроф	"	"
«	левая двойная угловая кавычка	«	«
»	правая двойная угловая кавычка	»	»
‘	левая одинарная кавычка	‘	‘
’	правая одинарная кавычка	’	’
‚	нижняя одинарная кавычка	‚	‚
“	левая двойная кавычка	“	“
”	правая двойная кавычка	”	”
„	нижняя двойная кавычка	„	„
€	euro	€	€
	копирайт		©
®	знак зареrистрированной торrовой марки	®	®

Разновидности спецсимволов

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

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

В этой статье вы узнаете, как создать форму регистрации и авторизации , используя HTML, JavaScript, PHP и MySql. Такие формы используются почти на каждом сайте, в независимости от его типа. Они создаются и для форума, и для интернета магазина и для социальных сетей (такие как например Facebook, Twiter, Odnoklassniki) и для многих других типов сайтов.

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

Создание таблицы в Базе Данных

Для того чтобы реализовать регистрацию пользователей, в первую очередь нам нужна База Данных. Если она у Вас уже есть, то замечательно, иначе, Вам нужно её создавать. В статье , я подробно объясняю, как сделать это.

И так, у нас есть База Данных (сокращённо БД), теперь нам нужно создать таблицу users в которой будем добавлять наших зарегистрированных пользователей.

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

Значит, подумали, представили какие поля будут у нашей формы и создаём таблицу users с такими полями:

• id - Идентификатор. Поле id должно быть у каждой таблицы из БД.
• first_name - Для сохранений имени.
• last_name - Для сохранений фамилии.
• email - Для сохранений почтового адреса. E-mail мы будем использовать в качестве логина, поэтому это поле должна быть уникальной, то есть иметь индекс UNIQUE.
• email_status - Поле для указания, подтверждена ли почта или нет. Если почта подтверждена, то оно будет иметь значение 1, иначе значение 0.
• password - Для сохранений пароля.

Если Вы хотите чтобы Ваша форма регистрации имела ещё какие-то поля, то Вы можете их здесь также добавить.

Всё, наша таблица users готова. Переходим к следующему этапу.

Подключение к Базе Данных

Базу данных мы создали, теперь необходимо к ней подключиться. Подключение будем осуществлять с помощью PHP расширения MySQLi.

В папке нашего сайта, создаём файл с именем dbconnect.php , и в нём пишем следующий скрипт:

Ошибка подключения к БД. Описание ошибки: ".mysqli_connect_error()."

"; exit(); } // Устанавливаем кодировку подключения $mysqli->set_charset("utf8"); //Для удобства, добавим здесь переменную, которая будет содержать название нашего сайта $address_site = "http://testsite.local"; ?>

Этот файл dbconnect.php нужно будет подключить к обработчикам форм.

Обратите внимание на переменную $address_site , здесь я указал название моего тестового сайта, над которым буду работать. Вы соответственно, укажите название Вашего сайта.

Структура сайта

Теперь давайте разберёмся с HTML структурой нашего сайта.

Шапку и подвал сайта вынесем в отдельные файлы, header.php и footer.php . Их будем подключать на всех страницах. А именно на главной (файл index.php ), на страницу с формой регистрации (файл form_register.php ) и на страницу с формой авторизации (файл form_auth.php ).

Блок с нашими ссылками, регистрация и авторизация , добавим в шапку сайта, чтобы они отображались на всех страницах. Одна ссылка будет ввести на страницу с формой регистрации (файл form_register.php ) а другая на страницу с формой авторизации (файл form_auth.php ).

Содержимое файла header.php:

Название нашего сайта

В итоге, главная страница, у нас выглядит так:

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

Теперь перейдём к форме регистрации. Как Вы уже поняли, она у нас находится в файле form_register.php .

Идём в Базу Данных (в phpMyAdmin), открываем структуру таблицы users и смотрим какие поля нам нужны. Значит, нам нужны поля для ввода имени и фамилии, поле для ввода почтового адреса(Email) и поле для ввода пароля. И ещё в целях безопасности добавим поле для ввода капчи.

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

Перед выводом формы добавляем блок для вывода сообщений об ошибках из сессии.

И ещё момент, если пользователь уже авторизован, и он ради интереса заходит на страницу регистрации напрямую, написав в адресную строку браузера адрес_сайта/form_register.php , то мы в этом случае вместо формы регистрации, выведем ему заголовок о том, что он уже зарегистрирован.

В общем, код файла form_register.php у нас получился таким:

Вы уже зарегистрированы

В браузере, страница с формой регистрации выглядит так:

С помощью атрибута required , мы сделали все поля обязательными к заполнению.

Обратите внимание на код формы регистрации где выводится капча :

Мы в значение атрибута src для изображения, указали путь к файлу captcha.php , который генерирует данную капчу.

Посмотрим на код файла captcha.php :

Код хорошо закомментирован, поэтому я остановлюсь только на одном моменте.

Внутри функции imageTtfText() , указан путь к шрифту verdana.ttf . Так вот для корректной работы капчи, мы должны создать папку fonts , и поместить туда файл шрифта verdana.ttf . Его Вы можете найти и скачать из интернета, или взять из архива с материалами данной статьи .

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

Проверка email на валидность с помощью jQuery

Любая форма нуждается в проверки на валидность введённых данных, как на стороне клиента (с помощью JavaScript, jQuery), так и на стороне сервера.

Особенную внимательность мы должны уделить полю Email. Очень важно чтобы введённый почтовый адрес был валидным.

Для данного поля input, мы задали тип email (type="email"), это нас немножко предостерегает от неправильных форматов. Но, этого недостаточно, потому что через инспектор кода, которого предоставляет нам браузер, можно легко изменить значение атрибута type с email на text , и всё, наша проверка будет уже недействительна.

И в таком случае, мы должны сделать более надёжную проверку. Для этого, воспользуемся библиотекой jQuery от JavaScript.

Для подключения библиотеки jQuery, в файле header.php между тегами , перед закрывающего тега , добавляем эту строчку:

Сразу после этой строчки, добавим код проверки валидации email. Здесь же добавим код проверки длины введённого пароля. Его длина должна быть не меньше 6 символов.

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

И так, с проверкой формы на клиентской части мы закончили. Теперь мы можем отправить её на сервер, где также сделаем пару проверок и добавим данные в БД.

Регистрация пользователя

Форму мы отправляем на обработку файлу register.php , через метод POST. Название данного файла обработчика, указано в значение атрибута action . А метод отправки указано в значение атрибута method .

Открываем этот файл register.php и первое что нам нужно сделать, это написать функцию запуска сессии и подключить созданный нами ранее файл dbconnect.php (В этом файле мы сделали подключение к БД). И ещё, сразу объявим ячейки error_messages и success_messages в глобальном массиве сессии. В error_mesages будем записывать все сообщения об ошибках возникающие при обработке формы, а в succes_messages , будем записывать радостные сообщения.

Перед тем как продолжить, мы должны проверить, была ли вообще отправлена форма . Злоумышленник, может посмотреть на значение атрибута action из формы, и узнать какой файл занимается обработкой данной формы. И ему может прийти в голову мысль перейти напрямую в этот файл, набирая в адресной строке браузера такой адрес: http://арес_сайта/register.php

Поэтому нам нужно проверить наличие ячейки в глобальном массиве POST, имя которой соответствует имени нашей кнопки "Зарегистрироваться" из формы. Таким образом мы проверяем была ли нажата кнопка "Зарегистрироваться" или нет.

Если злоумышленник попытается перейти напрямую в этот файл, то он получить сообщение об ошибке. Напоминаю, что переменная $address_site содержит название сайта и оно было объявлено в файле dbconnect.php .

Ошибка! главную страницу .

"); } ?>

Значение капчи в сессии было добавлено при её генерации, в файле captcha.php . Для напоминания покажу ещё раз этот кусок кода из файла captcha.php , где добавляется значение капчи в сессию:

Теперь приступим к самой проверке. В файле register.php , внутри блока if, где проверяем была ли нажата кнопка "Зарегистрироваться", а точнее где указан комментарий " // (1) Место для следующего куска кода " пишем:

//Проверяем полученную капчу //Обрезаем пробелы с начала и с конца строки $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha)){ //Сравниваем полученное значение с значением из сессии. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")){ // Если капча не верна, то возвращаем пользователя на страницу регистрации, и там выведем ему сообщение об ошибке что он ввёл неправильную капчу. $error_message = "

Ошибка! Вы ввели неправильную капчу

"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } // (2) Место для следующего куска кода }else{ //Если капча не передана либо оно является пустой exit("

Ошибка! Отсутствует проверечный код, то есть код капчи. Вы можете перейти на главную страницу .

"); }

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

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

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

Этот код вставляем в указанное место "// (2) Место для следующего куска кода ".

/* Проверяем если в глобальном массиве $_POST существуют данные отправленные из формы и заключаем переданные данные в обычные переменные.*/ if(isset($_POST["first_name"])){ //Обрезаем пробелы с начала и с конца строки $first_name = trim($_POST["first_name"]); //Проверяем переменную на пустоту if(!empty($first_name)){ // Для безопасности, преобразуем специальные символы в HTML-сущности $first_name = htmlspecialchars($first_name, ENT_QUOTES); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Ваше имя

Отсутствует поле с именем

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["last_name"])){ //Обрезаем пробелы с начала и с конца строки $last_name = trim($_POST["last_name"]); if(!empty($last_name)){ // Для безопасности, преобразуем специальные символы в HTML-сущности $last_name = htmlspecialchars($last_name, ENT_QUOTES); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Вашу фамилию

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Отсутствует поле с фамилией

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["email"])){ //Обрезаем пробелы с начала и с конца строки $email = trim($_POST["email"]); if(!empty($email)){ $email = htmlspecialchars($email, ENT_QUOTES); // (3) Место кода для проверки формата почтового адреса и его уникальности }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Ваш email

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["password"])){ //Обрезаем пробелы с начала и с конца строки $password = trim($_POST["password"]); if(!empty($password)){ $password = htmlspecialchars($password, ENT_QUOTES); //Шифруем папроль $password = md5($password."top_secret"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Ваш пароль

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } // (4) Место для кода добавления пользователя в БД

Особенную важность имеет поле email . Мы должны проверить формат полученного почтового адреса и его уникальность в БД. То есть не зарегистрирован ли уже какой-то пользователь с таким же почтовым адресом.

В указанном месте "// (3) Место кода для проверки формата почтового адреса и его уникальности " добавляем следующий код:

//Проверяем формат полученного почтового адреса с помощью регулярного выражения $reg_email = "/^**@(+(*+)*\.)++/i"; //Если формат полученного почтового адреса не соответствует регулярному выражению if(!preg_match($reg_email, $email)){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Вы ввели неправельный email

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } //Проверяем нет ли уже такого адреса в БД. $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); //Если кол-во полученных строк ровно единице, значит пользователь с таким почтовым адресом уже зарегистрирован if($result_query->num_rows == 1){ //Если полученный результат не равен false if(($row = $result_query->fetch_assoc()) != false){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Пользователь с таким почтовым адресом уже зарегистрирован

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Ошибка в запросе к БД

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); } /* закрытие выборки */ $result_query->close(); //Останавливаем скрипт exit(); } /* закрытие выборки */ $result_query->close();

И так, мы закончили со всеми проверками, пора добавить пользователя в БД. В указанном месте " // (4) Место для кода добавления пользователя в БД " добавляем следующий код:

//Запрос на добавления пользователя в БД $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, last_name, email, password) VALUES ("".$first_name."", "".$last_name."", "".$email."", "".$password."")"); if(!$result_query_insert){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Ошибка запроса на добавления пользователя в БД

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); }else{ $_SESSION["success_messages"] = "

Регистрация прошла успешно!!!
Теперь Вы можете авторизоваться используя Ваш логин и пароль.

"; //Отправляем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); } /* Завершение запроса */ $result_query_insert->close(); //Закрываем подключение к БД $mysqli->close();

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

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

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

Запуск сессии также происходит в файле header.php , поэтому в файле form_auth.php сессию запускать не нужно, потому что получим ошибку.

Как я уже сказал, скрипт проверки формата почтового адреса и длины пароля здесь также действует. Поэтому если пользователь введёт неправильный почтовый адрес или короткий пароль, то он сразу же получить сообщение об ошибке. А кнопка войти станет не активной.

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

Авторизация пользователя

В значение атрибута action у форы авторизации указан файл auth.php , это значит, что форма будет обрабатываться именно в этом файле.

И так, открываем файл auth.php и пишем код для обработки формы авторизации. Первое что нужно сделать это запустить сессию и подключить файл dbconnect.php для соединения с БД.

//Объявляем ячейку для добавления ошибок, которые могут возникнуть при обработке формы. $_SESSION["error_messages"] = ""; //Объявляем ячейку для добавления успешных сообщений $_SESSION["success_messages"] = "";

/* Проверяем была ли отправлена форма, то есть была ли нажата кнопка Войти. Если да, то идём дальше, если нет, то выведем пользователю сообщение об ошибке, о том что он зашёл на эту страницу напрямую. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"])){ //(1) Место для следующего куска кода }else{ exit("

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

"); }

//Проверяем полученную капчу if(isset($_POST["captcha"])){ //Обрезаем пробелы с начала и с конца строки $captcha = trim($_POST["captcha"]); if(!empty($captcha)){ //Сравниваем полученное значение с значением из сессии. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")){ // Если капча не верна, то возвращаем пользователя на страницу авторизации, и там выведем ему сообщение об ошибке что он ввёл неправильную капчу. $error_message = "

Ошибка! Вы ввели неправильную капчу

"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } }else{ $error_message = "

Ошибка! Поле для ввода капчи не должна быть пустой.

"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } //(2) Место для обработки почтового адреса //(3) Место для обработки пароля //(4) Место для составления запроса к БД }else{ //Если капча не передана exit("

Ошибка! Отсутствует проверочный код, то есть код капчи. Вы можете перейти на главную страницу .

"); }

Если пользователь ввёл проверочный код правильно, то идём дальше, иначе возвращаем его на страницу авторизации.

Проверка почтового адреса

//Обрезаем пробелы с начала и с конца строки $email = trim($_POST["email"]); if(isset($_POST["email"])){ if(!empty($email)){ $email = htmlspecialchars($email, ENT_QUOTES); //Проверяем формат полученного почтового адреса с помощью регулярного выражения $reg_email = "/^**@(+(*+)*\.)++/i"; //Если формат полученного почтового адреса не соответствует регулярному выражению if(!preg_match($reg_email, $email)){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Вы ввели неправильный email

"; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Поле для ввода почтового адреса(email) не должна быть пустой.

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Отсутствует поле для ввода Email

"; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } //(3) Место для обработки пароля

Если пользователь ввёл почтовый адрес в неправильном формате или значение поля почтового адреса является пустой, то мы возвращаем его на страницу авторизации где выводим ему сообщение об этом.

Проверка пароля

Следующее поле для обработки, это поле с паролем. В указанное место "//(3) Место для обработки пароля ", пишем:

If(isset($_POST["password"])){ //Обрезаем пробелы с начала и с конца строки $password = trim($_POST["password"]); if(!empty($password)){ $password = htmlspecialchars($password, ENT_QUOTES); //Шифруем пароль $password = md5($password."top_secret"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Укажите Ваш пароль

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Отсутствует поле для ввода пароля

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); }

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

Теперь необходимо сделать запрос к БД на выборке пользователя у которого почтовый адрес равен полученному почтовому адресу и пароль равен полученному паролю.

//Запрос в БД на выборке пользователя. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = "".$password."""); if(!$result_query_select){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Ошибка запроса на выборке пользователя из БД

"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); }else{ //Проверяем, если в базе нет пользователя с такими данными, то выводим сообщение об ошибке if($result_query_select->num_rows == 1){ // Если введенные данные совпадают с данными из базы, то сохраняем логин и пароль в массив сессий. $_SESSION["email"] = $email; $_SESSION["password"] = $password; //Возвращаем пользователя на главную страницу header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/index.php"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "

Неправильный логин и/или пароль

"; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } }

Выход с сайта

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

В шапке сайта (файл header.php ), с помощью сессии мы проверяем, авторизован ли уже пользователь. Если нет, то выводим ссылки регистрации и авторизации, в противном случае (если он авторизован) то вместо ссылок регистрации и авторизации выводим ссылку Выход .

Модифицированный кусок кода из файла header.php :

Регистрация

Выход

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

Код файла logout.php:

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

Ещё мы научились проверять вводимые данные, как на стороне клиента (в браузере, с помощью JavaScript, jQuery) так и на стороне сервера (с помощью языка PHP). Также мы научились реализовать процедуру выхода с сайта .

Все скрипты проверены и рабочие. Архив с файлами этого маленького сайта Вы можете скачать по этой ссылке .

В будущем я напишу статью где опишу . И ещё планирую написать статью где объясню, (без перезагрузки страницы). Так что, для того чтобы быть в курсе о выходе новых статей можете подписаться на мой сайт.

При возникновении вопросов обращайтесь, также, если вы заметили, какую-то ошибку в статье прошу вас, сообщите, мне об этом.

План урока (Часть 5):

1. Создаем HTML структуру для формы авторизации
2. Обрабатываем полученные данные
3. Выводим приветствие пользователя в шапку сайта

Понравилась статья?

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

• символы, которые невозможно ввести с помощью клавиатуры (например символ копирайта)
• символы предназначенные для разметки (например знак больше или меньше)

Такие символы добавляются с помощью числового кода или имени.

Символ	Числовой код	Имя символа	Описание
"	"	"	знак кавычки
"	"	"	апостроф
&	&	&	амперсанд
<		<	знак меньше
>	>	>	знак больше
			неразрывный пробел (Неразрывный пробел - это пробел отображающийся внутри строки как обычный пробел, но не позволяющий программам отображения и печати разорвать в этом месте строку.)
¡	¡	¡	перевернутый восклицательный знак
¢	¢	¢	цент
£	£	£	фунт
¤	¤	¤	валюты
¥	¥	¥	йен
¦	¦	¦	сломанная вертикальная черта
§	§	§	секция
¨	¨	¨	интервал (кириллица)
	©		знак копирайта
ª	ª	ª	женский порядковый показатель
«	«	«	французские кавычки (ёлочки) - левая
¬	¬	¬	отрицание-выражения
®	®	®	зарегистрированная торговая марка
¯	¯	¯	макрон интервал
°	°	°	градус
±	±	±	плюс или минус
²	²	²	верхний индекс 2
³	³	³	верхний индекс 3
´	´	´	острый интервал
µ	µ	µ	микро
¶	¶	¶	параграф
·	·	·	средняя точка
¸	¸	¸	интервал седиль
¹	¹	¹	верхний индекс 1
º	º	º	мужской порядковый показатель
»	»	»	французские кавычки (ёлочки) - правая
¼	¼	¼	1/4 часть
½	½	½	1/2 часть
¾	¾	¾	3/4 части
¿	¿	¿	перевернутый знак вопроса
×	×	×	умножение
÷	÷	÷	деление
́	́		ударение
Œ	Œ	Œ	лигатура прописная OE
œ	œ	œ	строчная лигатура oe
Š	Š	Š	S с короной
š	š	š	строчная S с короной
Ÿ	Ÿ	Ÿ	прописная Y с диадемой
ƒ	ƒ	ƒ	f с крюком
ˆ	ˆ	ˆ	дикриатический акцент
˜	˜	˜	маленькая тильда
–	–	-	тире
—	—	—	длинное тире
‘	‘	‘	левая одиночная кавычка
’	’	’	правая одиночная кавычка
‚	‚	‚	нижняя одиночная кавычка
“	“	“	левые двойные кавычки
”	”	”	правые двойные кавычки
„	„	„	нижние двойные кавычки
†	†	†	кинжал
‡	‡	‡	двойной кинжал
		.	пуля
…	…	…	горизонтальное многоточие
‰	‰	‰	промилле (тысячные доли)
′	′	′	минуты
″	″	″	секунды
‹	‹	‹	одиночная левая угловая кавычка
›	›	›	одиночная правая угловая кавычка
‾	‾	‾	надчеркивание
€	€	€	евро
™	™ или ™	™	торговая марка
←	←	←	стрелка влево
			стрелка вверх
→	→	→	стрелка вправо
↓	↓	↓	стрелка вниз
↔	↔	↔	двухсторонняя стрелка
↵	↵	↵	стрелка возврата каретки
⌈	⌈	⌈	левый верхний угол
⌉	⌉	⌉	правый верхний угол
⌊	⌊	⌊	левый нижний угол
⌋	⌋	⌋	правый нижний угол
◊	◊	◊	ромб
♠	♠	♠	пики
♣	♣	♣	крести
			черви
♦	♦	♦	буби

Математические символы, поддерживаемые в HTML

Символ	Числовой код	Имя символа	Описание
∀	∀	∀	для любых, для всех
∂	∂	∂	часть
∃	∃	∃	существует
∅	∅	∅	пустое множество
∇	∇	∇	оператор Гамильтона ("набла")
∈	∈	∈	принадлежит множеству
∉	∉	∉	не принадлежит множеству
∋	∋	∋	или
∏	∏	∏	произведение
∑	∑	∑	сумма
−	−	−	минус
∗	∗	∗	умножение или оператор сопряженный к
×	×	×	знак умножения
√	√	√	квадратный корень
∝	∝	∝	пропорциональность
∞	∞	∞	бесконечность
⋮	⋮		кратность
∠	∠	∠	угол
∧	∧	∧	и
∨	∨	∨	или
∩	∩	∩	пересечение
∪	∪	∪	объединение
∫	∫	∫	интеграл
∴	∴	∴	поэтому
∼	∼	∼	подобно
≅	≅	≅	сравнимо
≈	≈	≈	приблизительно равно
≠	≠	≠	не равно
≡	≡	≡	идентично
≤	≤	≤	меньше или равно
⩽	⩽ ⩽	⩽ ⩽	меньше или равно
≥	≥	≥	больше или равно
⩾	⩾ ⩾	⩾ ⩾	больше или равно
⊂	⊂	⊂	подмножество
⊃	⊃	⊃	надмножестов
⊄	⊄	⊄	не подмножество
⊆	⊆	⊆	подмножество
⊇	⊇	⊇	надмножество
⊕	⊕	⊕	прямая сумма
⊗	⊗	⊗	тензерное произведение
⊥	⊥	⊥	перпендикуляр
⋅	⋅	⋅	оператор точка

Греческий и коптский алфавиты

Символ	Числовой код	Шестнадцатеричный код	Имя символа
Ͱ	Ͱ	Ͱ
ͱ	ͱ	ͱ
Ͳ	Ͳ	Ͳ
ͳ	ͳ	ͳ
ʹ	ʹ	ʹ
͵	͵	͵
Ͷ	Ͷ	Ͷ
ͷ	ͷ	ͷ
ͺ	ͺ	ͺ
ͻ	ͻ	ͻ
ͼ	ͼ	ͼ
ͽ	ͽ	ͽ
;	;	;
΄	΄	΄
΅	΅	΅
Ά	Ά	Ά
·	·	·
Έ	Έ	Έ
Ή	Ή	Ή
Ί	Ί	Ί
Ό	Ό	Ό
Ύ	Ύ	Ύ
Ώ	Ώ	Ώ
ΐ	ΐ	ΐ
Α	Α	Α	Α
Β	Β	Β	Β
Γ	Γ	Γ	Γ
Δ	Δ	Δ	Δ
Ε	Ε	Ε	Ε
Ζ	Ζ	Ζ	Ζ
Η	Η	Η	Η
Θ	Θ	Θ	Θ
Ι	Ι	Ι	Ι
Κ	Κ	Κ	Κ
Λ	Λ	Λ	Λ
Μ	Μ	Μ	Μ
Ν	Ν	Ν	Ν
Ξ	Ξ	Ξ	Ξ
Ο	Ο	Ο	Ο
Π	Π	Π	Π
Ρ	Ρ	Ρ	Ρ
Σ	Σ	Σ	Σ
Τ	Τ	Τ	Τ
Υ	Υ	Υ	Υ
Φ	Φ	Φ	Φ
Χ	Χ	Χ	Χ
Ψ	Ψ	Ψ	Ψ
Ω	Ω	Ω	Ω
Ϊ	Ϊ	Ϊ
Ϋ	Ϋ	Ϋ
ά	ά	ά
έ	έ	έ
ή	ή	ή
ί	ί	ί
ΰ	ΰ	ΰ
α	α	α	α
β	β	β	β
γ	γ	γ	γ
δ	δ	δ	δ
ε	ε	ε	ε
ζ	ζ	ζ	ζ
η	η	η	η
θ	θ	θ	θ
ι	ι	ι	ι
κ	κ	κ	κ
λ	λ	λ	λ
μ	μ	μ	μ
ν	ν	ν	ν
ξ	ξ	ξ	ξ
ο	ο	ο	ο
π	π	π	π
ρ	ρ	ρ	ρ
ς	ς	ς	ς
σ	σ	σ	σ
τ	τ	τ	τ
υ	υ	υ	υ
φ	φ	φ	φ
χ	χ	χ	χ
ψ	ψ	ψ	ψ
ω	ω	ω	ω
ϊ	ϊ	ϊ
ϋ	ϋ	ϋ
ό	ό	ό
ύ	ύ	ύ
ώ	ώ	ώ
Ϗ	Ϗ	Ϗ
ϐ	ϐ	ϐ
ϑ	ϑ	ϑ	ϑ
ϒ	ϒ	ϒ	ϒ
ϓ	ϓ	ϓ
ϔ	ϔ	ϔ
ϕ	ϕ	ϕ	ϕ
ϖ	ϖ	ϖ	ϖ
ϗ	ϗ	ϗ
Ϙ	Ϙ	Ϙ
ϙ	ϙ	ϙ
Ϛ	Ϛ	Ϛ
ϛ	ϛ	ϛ
Ϝ	Ϝ	Ϝ	Ϝ
ϝ	ϝ	ϝ	ϝ
Ϟ	Ϟ	Ϟ
ϟ	ϟ	ϟ
Ϡ	Ϡ	Ϡ
ϡ	ϡ	ϡ
Ϣ	Ϣ	Ϣ
ϣ	ϣ	ϣ
Ϥ	Ϥ	Ϥ
ϥ	ϥ	ϥ
Ϧ	Ϧ	Ϧ
ϧ	ϧ	ϧ
Ϩ	Ϩ	Ϩ
ϩ	ϩ	ϩ
Ϫ	Ϫ	Ϫ
ϫ	ϫ	ϫ
Ϭ	Ϭ	Ϭ
ϭ	ϭ	ϭ
Ϯ	Ϯ	Ϯ
ϯ	ϯ	ϯ
ϰ	ϰ	ϰ	ϰ
ϱ	ϱ	ϱ	ϱ
ϲ	ϲ	ϲ
ϳ	ϳ	ϳ
ϴ	ϴ	ϴ
ϵ	ϵ	ϵ	ϵ
϶	϶	϶	϶
Ϸ	Ϸ	Ϸ
ϸ	ϸ	ϸ
Ϲ	Ϲ	Ϲ
Ϻ	Ϻ	Ϻ
ϻ	ϻ	ϻ
ϼ	ϼ	ϼ
Ͻ	Ͻ	Ͻ
Ͼ	Ͼ	Ͼ
Ͽ	Ͽ	Ͽ

Зачем нужны спецсимволы и как ими пользоваться

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

Рассмотрим, как это работает. Для каждого символа, который считается специальным или который вы хотите использовать на своей веб-странице, но который невозможно напечатать в вашем редакторе (например, символ авторского права), вы находите аббревиатуру и печатаете ее в html-коде вместо нужного символа. Например, для символа ">" аббревиатура - > , а для символа "<" - < .

Допустим, вы хотели напечатать «Элемент очень важен» на своей странице. Вместо этого вам придется воспользоваться ссылками на нужные вам символы для корректного отображения записи, и в итоге ваша запись в коде должна будет выглядеть так:

Элемент очень важен

Попробовать »

Еще один специальный символ, о котором вам нужно знать - символ & (амперсанд). Если вы хотите, чтобы он отображался на вашей HTML-странице, используйте ссылку & вместо символа &.

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 .

HTML

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required ; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.

Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).

Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes .

CSS

Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!

Стилизуем формы, используя CSS3

Во-первых, давайте назначим нашим формам базовый стиль.

#subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; }

Здесь мы назначим свойства для шапки:

/**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); }

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text , поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; }

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.

/* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }

Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon ? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

@font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; }

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon) , чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; }

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

/* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; }

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

P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; }

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

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

#register{ z-index: 21; opacity: 0; }

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none . Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }

Вот, что происходит: когда мы кликаем на кнопку Присоединиться , мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft . Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!

Теги: Добавить метки

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.

HTML Code for registration form

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.

In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.

registration.html

Registration form

Id:
Name:
Course:
Branch:
Rollno:
Email_Address:
User_Name:
About Us:
Password: