напусни

електронна поща парола

2. Бутон за отваряне на формуляра.

6-27. Модално викно.

8-11. Заглавието на модалния прозорец.

B. init.js:

// Re-img1 = Ново изображение (16, 16);  img1.src="./img/spinner.gif";  img2 = Ново изображение(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").hide( ); // Показване на gif $, какво да се обвие) ("#ajax_loading").show(); // "това" се използва за валидиране на формуляра var str = $(this).serialize(); // - - AJAX wiki cob -- $.ajax( ( тип: "POST", url: "php/do-login.php", // Информацията за влизане се редактира тук данни: str, успех: function(msg)( $(" #status"). ajaxComplete(function(event, request, settings)( // Показване на бутона "Изпращане" $("#submit").show(); // Показване на gif за завъртане $("#ajax_loading") .hide(); if(msg == "OK") // ВХОД ОК? ( var login_response = "

D. do-login.php: ajax-компютър

$config = масив ();  $config["email"] = " [защитен с имейл]$config["password"] = "demo123";  );  // IE 6 FIX if($_POST["action"] == "user_login") ( $post_email = $_POST["email"]; $post_password = $_POST["password"]; // проверете вход и парола, ако ($post_email == $config["email"] && $post_password == $config["password"]) ( // Всичко правилно ли е? Регистриране на сесията и пренасочване на пощата към "Специален акаунт" $username = $post_email ; $_SESSION ["username"] = $username; if($_POST["remember_me"]) ( // задаване на бисквитки за един месец 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" ) друго ( $auth_error = "

"; echo $auth_error;))

G.private.php:страна, до която достъпът е по-малък след оторизация.

Включете "config.php";//Ако това е валидна бисквитка, тогава сесията е настроена да съответства на упълномощавания // Проверете отново дали пълномощията са правилни if(!isSet($_SESSION["username"])) ( header("Location : /modal .html"); изход; ) echo "Специално парти на Витаю, "; echo $_SESSION["username"]." | Разберете Това е вашата специална страница ";

D. config.php:

отчитане на грешка (E_ALL ^ ​​E_NOTICE); сесия_старт(); // Стартиране на сесията header("Cache-control: private"); / / IE 6 FIX / / винаги модифицирана заглавка ("Последна промяна: ". // 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"); // ---------- ИНФОРМАЦИЯ ЗА ВХОД --- ------- // $config_username = "demo"; $config_password = "demo123"; $cookie_name = "siteAuth"; $cookie_time = (3600*24*30); // 30 дни if(!$_SESSION ["потребителско име"]) ( include_once "autologin.php"; )

e.autologin.php:

If(isSet($cookie_name)) ( // Проверете дали бисквитката съществува if(isSet($_COOKIE[$cookie_name]))) ( parse_str($_COOKIE[$cookie_name]); // Направете проверка if(($usr = = $config_username) && ($hash == md5($config_password))) ( // Регистрирайте сесията $_SESSION["username"] = $config_username; ) )

Z.logout.php:

включва "config.php"; if(isSet($_SESSION["username"])) ( unset($_SESSION["username"]); if(isSet($_COOKIE[$cookie_name]))) ( // премахване на бисквитка "site_auth" setcookie ($cookie_name , "", time() - $cookie_time); ) header("Местоположение: modal.html"); изход; )

K.stylesheet.css:

Html, тяло ( padding: 0; граница: 0px няма; font-family: Verdana; font-size: 11px; ) /* Label */ label (ширина: 80px; padding-left: 20px; поле: 5px; float: вляво ; text-align: left; ) /* Въвеждане на текст */ input ( margin: 5px; padding: 0px; float: left; border: 1px solid #cdcdcd; background-color: white; ) br ( clear: left; ) . текстово поле ( Border: 1px плътен #999999; Border-top-color: #CCCCCC; Border-left-color: #CCCCCC; цвят: #333333; шрифт: 90% Verdana, Helvetica, Arial, sans-serif; размер на шрифта: 11px; ) h1 ( font-size: 17px; ) div ( font-family: Verdana; font-size: 11px; ) /* Бутон "Вход" */ #submit ( margin: 5px padding: 0px; float: left; width; : 50px; background-color: white; ) #notification_error (цвят: червен; височина: auto; padding: 4px; #ajax_loading ( display: none; font-size: 12px; font-family: Tahoma; ) #logged_in ( padding: 5px; поле: 23px 0 100px 43px; padding: 5px ; text-align: center; ширина: 400px; ) #status ( margin-top: 20px; ширина: 310px; )

L. basic.css:

/* Overlay */ #simplemodal-overlay (background-color:#aaaaaa; cursor:wait;) /* Container */ #simplemodal-container (височина:180px; ширина: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; z-index:3200;position: absolute;top:-15px;left:-18px;cursor:pointer;) #simplemodal-container

• Поставяме курсора на първото поле на формуляра.

За да не се раздвижват ползавачът бигати окото, което носят отстрани на полетата, където трябва да въведете текста, можем автоматично да вмъкнем курсора. И мръсотията, лесно е да се страхуват, но е приемливо за тях.

A. HTML код за формата на аванси:

Друго поле Първо поле Трето поле  

4. кое поле ще има фокус Б. добавете обиден js:

Функция setFocus() ( /*задаване на фокус върху задължителното поле*/ document.form_find.find_fio.select(); document.form_find.find_fio.focus(); )

Висновок

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

В тези статистики знаете как да създадете регистрационен формуляр и упълномощаване, хакване на HTML, JavaScript, PHP и MySql. Такива форми використ mayzhe на сайта на кожата независимо от този тип. Вонята е създадена за форума, за онлайн магазина, за социалните мрежи (като Facebook, Twiter, Odnoklassniki) и за богати други видове сайтове.

Ако имате уебсайт на вашия локален компютър, тогава се чудя какво вече имате. Нищо не е практично без него.

Създаване на таблици в базата данни

За да осъществим регистрацията на koristuvachiv, на първо място се нуждаем от база данни. Ако вече е там, значи е чудо, в противен случай трябва да го направите. В статията ще обясня в доклад, като работник.

И така, имаме база данни (базата от данни е съкратена), сега трябва да създадем таблица потребителив допълнение към нашите регистрации на coristuvachs.

Как да създадете таблица в базата данни, обясних в статията. Преди това, как да създадем таблица, трябва да посочим как полетата са достойни. Qi полетата съвпадат с полетата от формуляра за регистрация.

И така, помислихме си, представихме си какви полета ще има нашият формуляр и създадем таблица потребителис тези полета:

• документ за самоличност- Идентификатор. Поле документ за самоличностможе да е в таблицата на кожата от базата данни.
• първо име- За да запазите името.
• фамилия- За запазване на привилегията.
• електронна поща- За да запазите пощенския адрес. Имейл, който ще спечелим като вход, така че полето може да бъде уникално, така че индексът майка УНИКАЛЕН.
• имейл_статус- Полето за въвеждане, което се потвърждава по пощата. Ако имейлът бъде потвърден, той ще има стойност 1, в противен случай стойността е 0. В противен случай стойността на полето ще бъде стойност 0.
• парола- За да запазите паролата си.

Всички полета от тип „VARCHAR“ може да имат NULL стойности след промоцията.

Ако искате вашата регистрационна форма да е по-малка от полетата, можете да ги добавите и тук.

Всичко, нашата маса потребителиготов. Нека да преминем към следващата стъпка.

Връзка с база данни

Създадохме база данни, сега е необходимо да се свържем с нея. Връзката ще е необходима за помощта на разширението MySQLi PHP.

Създаваме файл с имената на бащата на нашия сайт dbconnect.php, аз в новия скрипт пишем:

Извинете връзка с базата данни. Пардон Описание: ".mysqli_connect_error()."

"; exit(); ) // Задайте кодирането на връзката $mysqli->set_charset("utf8"); //За по-голяма яснота ще го променя тук като начин да назовем нашия сайт $address_site = "http ://testsite.local" ; ?>

Tsey файл dbconnect.phpще е необходимо да се свържете с колекцията от формуляри.

Отдавай уважение на промяната $address_site, тук съм въвел името на моя тестов сайт, над яким працюватима. Трябва да посочите името на вашия сайт.

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

Сега нека да разгледаме HTML структурата на нашия сайт.

Шапката беше поставена на сайта в okremi файлове, header.phpі footer.php. Їx е свързан от всички страни. И самият на главния (файл index.php), отстрани на регистрационната форма (файл form_register.php) и отстрани с формуляра за разрешение (файл form_auth.php).

Блокирайте с нашите съобщения, Регистрацияі разрешение, dodamo в заглавката на сайта, така че вонята се появи от всички страни. Ще бъде въведена една заявка страна с регистрационната форма(файл form_register.php) и іnsha от страната z формуляр за разрешение(файл form_auth.php).

Във файла header.php:

Име на нашия сайт

Zreshtoy, отстрани на главата, изглеждаме така:

Очевидно може да имате различна структура на вашия сайт, но това не е важно за нас. Головне, щоб були сила (бутони) регистрация и оторизация.

Сега да преминем към формата за регистрация. Як Ви вече разбра, че имаме файл form_register.php.

Idemo към базата данни (в phpMyAdmin), показващ структурата на таблицата потребителии да се чудим на нивите, от които се нуждаем. Също така са ни необходими полета за въвеждане на име и псевдоним, поле за въвеждане на пощенски адрес (Email) и поле за въвеждане на парола. И от съображения за безопасност добавете поле за въвеждане на captcha.

На сървъра, в резултат на обработката на регистрационния формуляр, можете да получите различни помилвания, но не можете да се регистрирате чрез yakі koristuvach. Следователно, за да разбере ползавачът защо да не премине през регистрацията, е необходимо да ви информира за помилването.

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

І още един момент, сякаш вече е оторизиран и за интерес да влезете в регистрационната страна без посредник, като напишете в адресната лента на браузъра адрес на уебсайт/form_register.php, след това ще заменим формуляра за регистрация, ще ви покажем заглавието на този, който има регистрационния номер.

Захал кодов файл form_register.phpимаме такива изгледи:

Вече сте регистриран

В браузъра страницата с формуляра за регистрация изглежда така:

За помощ задължителен атрибут, ние zrobili всички полета obov'zkovymi за попълване.

Върнете уважение към кода на регистрационния формуляр показване на captcha:

Може да имаме стойността на атрибута src за изображението, посочете пътя до файла captcha.phpкойто генерира тази captcha.

Вижте кодовия файл captcha.php:

Кодът е любезно коментиран, така че ще спра в един момент.

Средни функции imageTtfText(), посочи пътя към шрифта verdana.ttf. Така оста за правилната роботизирана captcha, можем да създадем папка шрифтове, и поставете файла с шрифта там verdana.ttf. Yogo Можете да знаете, че zavantazhity от Интернет, или да вземете от архива с материалите на тази статия.

С HTML структурата, която завършихме, дойде време да се сринем далече.

Проверка на имейла за валидност с помощта на jQuery

Така или иначе, формулярът ще трябва да бъде проверен за валидността на въведените данни, както от страна на клиента (с помощта на JavaScript, jQuery), така и от страна на сървъра.

Ние особено уважаваме добавянето на полето Имейл. Също така е важно въведеният пощенски адрес да е валиден.

За това поле за въвеждане сме задали типа на имейл (type="email"), така че сме предпазени от лоши формати. Това, което липсва е, че чрез инспектора на кода, който ни дава браузърът, можете лесно да промените стойността на атрибута Типз електронна пощана текст, и това е всичко, нашата повторна проверка вече няма да е валидна.

И в този момент може да се наложи да работим върху по-голям ремонт. За когото е по-бързо с библиотеката jQuery като JavaScript.

За да свържете библиотеката jQuery към файла header.phpмежду таговете , преди затварящ маркер , добавете този ред:

В следващия ред добавете кода за потвърждение за валидиране на имейл. Тук добавяме кода за потвърждение на въведената парола. Його дожина може да бъде не по-малко от 6 знака.

За помощ на този скрипт ще проверим пощенския адрес за валидност. Ако сте въвели грешен имейл, ние ще ви покажем извинение за процеса и ще деактивираме бутона за редактиране на формуляра. Ако всичко е наред, тогава изчистваме извинението и активираме бутона за корекция на формуляра.

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

Регистрация на кореспондент

Принуждаваме формуляра да обработи файла register.phpчрез метода POST. Именуване на примерния файл, посочен в стойността на атрибута действие. И методът за редактиране е посочен за стойността на атрибута метод.

Отворете целия файл register.phpИ първо, това, което трябва да направим, е да напишем функция за стартиране на сесията и свързване на творенията от нас преди файла dbconnect.php(Връзката с базата данни е направена за този файл). И все пак, веднага ще озвучи средата съобщения за грешкаі успех_съобщенияв глобалния сесиен масив. AT съобщения за грешкаще запишем цялата информация за помилванията, които са виновни за обработката на формуляра, и в успех_съобщения, запишете радио информацията.

Преди това, как да продължим, ние сме виновни за перверзиране, bula vzagalі коригирана форма. Нападателят може да разгледа стойността на атрибута действиеот формуляра и да разпознае кой файл се обработва от дадения формуляр. Мога да ви спестя мисълта да отидете директно към целия файл, като напишете следния адрес в адресната лента на браузъра: http://ares_site/register.php

Следователно трябва да променим присъствието на средата на глобалния POST масив, за да посочим името на нашия бутон „Регистрация“ във формуляра. В този ранг почитаме, че бутонът "Регистрация" е натиснат.

Веднага щом нападателят се опита да отиде директно до файла, той няма да бъде напомнен за помилването. Познавайки какво е променен $address_site, за да замени името на сайта, и той беше зашеметен от файла dbconnect.php.

Моля!страна на главата.

"); } ?>

Стойността на captcha в сесията е добавена по време на нейното генериране на файла captcha.php. За да познаете, още веднъж ще покажа цялата работа на кода от файла captcha.php, където стойността на captcha се добавя към сесията:

Сега да преминем към самата ревизия. Във файла register.php, в средата на блока if, отменете проверката, че е натиснат бутонът „Регистрация“ или по-скоро коментарът „ // (1) Място за обиден shmatka codeние пишем:

//Проверка на captcha изключена //Премахване на горната част на главата и края на реда $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( // Възможност за извличане на стойности от сесията. if(($_SESSION["rand"] != $captcha) && ($ _SESSION ["rand"] != ""))( // Ако captcha не е правилен, тогава го върнете обратно към страната за регистрация и там ще видите предупреждение за извинението, че captcha е грешна. $error_message = "

Моля!Въвели сте грешна captcha

"; // Вземете известия за помилване в сесията. $_SESSION["error_messages"] = $error_message; // Преместете съобщението в заглавката на страната на регистрация("HTTP/1.1 301 преместено за постоянно"); header("Местоположение: ". $address_site ."/form_register.php"); //Зупиняемо скрипт exit(); ) // (2) Място за код на обидни неща )else( //Такава captcha не беше прехвърлена иначе празен exit("

Моля!Текущият код за повторна проверка, това е captcha кодът. Можете да отидете на главната страница.

"); }

Дали, трябва да обработим данните от POST масива. Nasampered, трябва да преобразуваме глобалния POST масив, така че да има средни, чиито имена съответстват на имената на полетата, въведени от нашия формуляр.

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

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

Този код се поставя на посоченото място " // (2) Място за обиден shmatka code".

/* Ревизирайте както в глобалния масив $_POST и базирайте данните във формуляра и поставете изпратените данни в промяната по подразбиране. = trim($_POST["first_name"]); // Променете го на празно if(!empty($first_name))( // За безопасност преобразувайте специални знаци в HTML обект $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Вземете известието за помилване в сесията .$ _SESSION["error_messages"] .= "

Въведете вашето име

Няма полета за имена

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$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"] .= "

Въведете вашето име

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_register.php"); //Изпълнете скрипт exit(); ) ) else ( // Дръж сесията информирана за помилването. $_SESSION["error_messages"] .= "

Няма поле с псевдоним

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$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"] .= "

Въведете своя имейл

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_register.php"); //Изпълнете скрипт exit(); ) ) else ( // Дръж сесията информирана за помилването. $_SESSION["error_messages"] .= "

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$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"] .= "

Въведете паролата си

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_register.php"); //Изпълнете скрипт exit(); ) ) else ( // Дръж сесията информирана за помилването. $_SESSION["error_messages"] .= "

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_register.php"); //Изпълнете скрипта exit(); ) // (4) Място за кода за добавяне на koristuvach към базата данни

Особено важно е полето електронна поща. Ние сме отговорни за промяната на формата на получения пощенски адрес и уникалността на базата данни. Тобто чи не е регистриран вече като користувач от такъв пощенски адрес.

На уреченото място // (3) Кодово пространство за повторна проверка на формата и уникалността на пощенския адрес„Добавяне на следния код:

//Променете формата на получения пощенски адрес за допълнителен регулярен израз $reg_email = "/^**@(+(*+)*\.)++/i"; // Форматът на получения пощенски адрес обаче не е валиден обикновен вираз if(!preg_match($reg_email, $email))( // Вземете известия за помилване в сесията. $_SESSION["error_messages"] .= "

Въведохте невалиден имейл

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_register.php"); //Изпълнете скрипта exit(); ) // Проверете дали вече няма такъв адрес в базата данни $result_query = $mysqli->query("ИЗБЕРЕТЕ `имейл` ОТ `потребители` КЪДЕ `email`="". ->num_rows == 1)( //Също така извличането на резултата не завършва false if(($row = $result_query->fetch_assoc()) != false) ( // Дръж сесията информирана за помилването. $_SESSION["error_messages" ] .= "

Koristuvach от такъв пощенски адрес вече регистриран

"; //Преместете акаунта в заглавката от страната на регистрацията("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_register.php"); )else( // Изберете известие за помилване в сесията .$_SESSION["error_messages"] .= "

Извинете при искане към базата данни

"; //Преместете адреса в заглавката от страната на регистрацията("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_register.php"); ) /* затворете селекцията */ $ result_query-> close(); //Изпълнение на скрипта exit(); ) /* затваряне на селекциите */ $result_query->close();

И така, завършихме с много ревизии, дойде време да добавим coristuvach към базата данни. На уреченото място // (4) Пространство за добавяне на код към базата данни„Добавяне на следния код:

//Заявка за добавяне на koristuvach към базата данни $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"] .= "

Извинете за искането за добавяне на koristuvach към базата данни

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_register.php"); //Изпълнете скрипта exit(); ) else( $_SESSION["success_messages"] = "

Регистрацията беше успешна!!!
Сега можете да влезете с вашето потребителско име и парола.

// Преместен обратно към заглавката на страната за разрешение ("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_auth.php"); ) /* Завършване на заявката */ $result_query_insert-> close();// Затваряне на връзката с базата данни $mysqli->close();

Веднага след като е имало помилване при искане за добавяне на coristuvacha към базата данни, ние ще добавим известие за помилването преди сесията, че обръщаме coristuvacha към страната за регистрация.

Иначе, сякаш всичко е минало добре, в сесията също добавяме информация, но вече приета, и казваме на потребители, че регистрацията е успешна. Пренасочвам ви към страната с формуляра за разрешение.

Във файла се намира скрипт за проверка на формата на пощенския адрес и истинската парола header.phpза това, вие ще бъдете виновни за работа на полета с tsієї форми.

Стартирането на сесията също е свързано с файла header.phpкъм файла form_auth.phpНе е необходимо да започваме сесията, защото ще вземем помилване.

Както вече казах, скриптът за повторна проверка на формата на пощенския адрес и паролата тук е един и същ. Ето защо, ако сте въвели грешен пощенски адрес или кратка парола, трябва незабавно да премахнете уведомлението за помилването. Бутон напуснистават неактивни.

След приемането на бутон за помилване напуснистава активен и е възможно да изпратите формуляра до сървъра, той няма да бъде обработен.

Упълномощаване на кореспондент

Стойност на атрибута действиеуказан файл за оторизация на fori auth.php Tse означава, че формулярът ще бъде обработен сам в същия файл.

И така, отворете файла auth.phpи напишете кода за обработка на формуляра за оторизация. Първо, трябва да стартирате сесията и да свържете файла dbconnect.phpза z'ednannya іz DB.

//Ogoloshuєmo средносрочно помилване, yakі може vyniknuti pіd час obrobki форми. $_SESSION["error_messages"] = ""; //Звучи средата за добавяне на успешни известия $_SESSION["success_messages"] = "";

/* Проверете дали формулярът е изпратен, защото е щракнат върху бутона Изпращане. Така както е, тогава го раздадохме, все едно не, после внасяме напомняния на Користувачев за помилването, че вината на зайчетата е от дясната страна без средата. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Място за обиден кодов фрагмент )else( exit("

Моля!Безпроблемно си отишъл на тази страна, за това няма пари. Можете да отидете на главната страница.

"); }

//Отрежете captcha if(isset($_POST["captcha"]))( //Отрежете пробата от кочана и от края на реда $captcha = trim($_POST["captcha"]); if( !empty($captcha ) ))( // Възможно е да се пропуснат стойностите от стойностите от сесията. if(($_SESSION["rand"] != $captcha) && ($_SESSION[" rand"] != ""))( // Тази captcha не е verna , след това се върнете към страната за разрешение и там ще видите предупреждение за извинението, че captcha е грешна. $error_message = "

Моля!Въвели сте грешна captcha

"; // Вземете известия за помилване в сесията. $_SESSION["error_messages"] = $error_message; // Преместете съобщението в заглавката на страната за упълномощаване("HTTP/1.1 301 преместено за постоянно"); header("Местоположение: ". $address_site ."/form_auth.php"); //Изпълнете скрипт exit(); ) )else( $error_message = "

Моля!Полето за въвеждане на captcha не е виновно, че е празно.

"; // Вземете известия за помилване в сесията. $_SESSION["error_messages"] = $error_message; // Преместете съобщението в заглавката на страната за упълномощаване("HTTP/1.1 301 преместено за постоянно"); header("Местоположение: ". $address_site ."/form_auth.php"); //Изпращане на скрипта exit(); ) //(2) Място за обработка на пощенския адрес //(3) Място за обработка на паролата //(4) Място за съхранение заявката към базата данни ) else ( // Ако приемем, че не е предадена captcha exit("

Моля!Текущият код за повторна проверка, това е captcha кодът. Можете да отидете на главната страница.

"); }

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

Проверка на пощенски адрес

//Отрежете бримките от кочана и края на реда $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"] .= "

Въведохте невалиден имейл

"; //Преместете адреса в заглавката на страната за упълномощаване("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_auth.php"); //Изпълнете скрипт exit(); ) )else ( // Дръж сесията информирана за помилването. $_SESSION["error_messages"] .= "

Полето за въвеждане на пощенски адрес не трябва да е празно.

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_register.php"); //Изпълнете скрипт exit(); ) ) else ( // Дръж сесията информирана за помилването. $_SESSION["error_messages"] .= "

Празно поле за въвеждане на електронна поща

"; //Преместете адреса в заглавката на страната за упълномощаване("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$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"] .= "

Въведете паролата си

"; //Преместете адреса в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_auth.php"); //Изпълнете скрипт exit(); ) ) else ( // Дръж сесията информирана за помилването. $_SESSION["error_messages"] .= "

Видимо поле за въвеждане на парола

"; //Преместете акаунта в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_auth.php"); //Изпълнете скрипт exit(); )

Тук с помощта на функцията md5 () криптираме паролата, така че да знаем паролите в базата данни по криптиран начин. Добавкова тайна дума за шифровани, за нашия ум строго секретновиновен buti, че як vikoristovuvalsya и при регистрацията на coristuvach.

Сега е необходимо да влезете в базата данни за избора на ползавача, за който пощенски адрес трябва да се коригира правилният пощенски адрес и паролата за изтритата парола.

// Заявка от базата данни за избор на ползавача. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" И парола = ".$password."""); if(!$result_query_select)( // Изберете известия за помилване за сесията. $_SESSION["error_messages"] .= "

Извинете за zapitu за избора на koristuvach от базата данни

"; //Преместете адреса в заглавката на системния регистър("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$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 преместен за постоянно"); header("Местоположение: ".$address_site."/index.php"); )else( // Запазване на известието за помилване в сесията. $_SESSION["error_messages"] .= "

Грешен вход и/или парола

"; //Преместете акаунта в заглавката на страната за упълномощаване("HTTP/1.1 301 преместен за постоянно"); header("Местоположение: ".$address_site."/form_auth.php"); //Изпълнете скрипт exit(); ) )

Изход от сайта

І почивка, какво е реализирано, це процедура за излизане от сайта. В момента имаме съобщение от страната на оторизацията и от страната на регистрацията.

Заглавка на сайта (файл header.php), за помощ на сесията, ние проверяваме отново, което вече е оторизация на koristuvach. Ако не, тогава трябва да изпратим регистрацията и оторизацията, в противен случай (като по вина на упълномощаването), тогава трябва да изпратим регистрацията и оторизацията Оттегляне.

Модификации на парчетата в кода от файла header.php:

Регистрация

Оттегляне

При натискане на сила, излезте от сайта, ние консумираме файла logout.php, de просто znischuemo seredki с пощенския адрес и паролата от сесията. След който се обръща обратно на другата страна, върху която е натисната силата напуснете.

Файлов код logout.php:

На кого всичко. Сега знаете как прилагат и обработват регистрационни и упълномощаващи формуляри koristuvach на вашия уебсайт. Тези форми се съобщават на сайта на кожата, програмистът на кожата е виновен за това благородство, като го прави.

Научихме се как да ревизираме данните, които трябва да бъдат въведени, както от страна на клиента (за браузъра, с помощта на JavaScript, jQuery), така и от страна на сървъра (за помощ на преместете PHP). Така че научихме изпълнява процедурата за излизане от сайта.

Мустаци скриптове и роботи. Архив с файлове на този малък сайт Можете да завантажите за сим молби.

В бъдеще ще напиша статут за описание. Също така смятам да напиша статия, ще я обясня (без повторно напредване на страната). Така че, за да сте в течение на новите статии, можете да се абонирате за моя сайт.

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

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

1. Създаваме HTML структура за формуляра за оторизация
2. Обработка на данни
3. Vivodim votannya koristuvach към хедъра на сайта

Достойна статия?

Отзивчив с функциите на формуляри към вход и регистрация, с възможност за динамично превключване, без смяна на страната. Когато се появи нов акаунт, можете лесно да превключите от един към друг и ако е необходимо да изберете опцията за промяна на паролата си.
Днес можем да видим как всичко може да бъде реализирано за допълнително свързване на малък, но дори функционален jQuery плъгин и новите CSS3 стандарти.

Този метод ще бъде правилен, ако искате да работите по такъв начин, че формата за влизане и регистрация да бъде достъпна за кореспондентите от скина на вашия сайт. Когато влезете в сайта или се регистрирате като кореспондент, няма да бъдете пренасочени към друга страна и можете да видите всички необходими неща „не входящи в случай“, всичко е от едната страна.

Дизайн разумно изглеждащобединяващите форми се реализират с помощта на CSS3, пространството за глава на приставката е малко, а модалната ширина е практически без хълцания.
Стовидсотково адаптивно оформление, височина и ширина на модалния прозорец с формуляри, автоматично настроени така, че да паснат за преоразмеряване на екраните на разширенията.

Butt се учуди, сега нека да разгледаме детайлите на всички основни компоненти на модалния прозорец и форми, за да научим как да ги победим на вашия сайт.
Работата по сливането на прозореца с формулярите за влизане и регистрация, вдъхновена от популярната библиотека на JavaScript, приставката jQuey и генерираните CSS стилове. Всички тези инструменти трябва да бъдат свързани с вашия сайт. Останалата версия на библиотеката jQuey може да се свърже директно от Google, самия файл на плъгин main.js и готовия набор от стилове style.css, които ще намерите в архива.
Javascript се пише преди тага, който се затваря , css стиловеможете да го копирате и поставите във файла stylesheet.css на вашия сайт.

HTML структура:

Основният контейнер с модални викони на затъмнен фон и вградена форма с контролни елементи е поставен в заглавието на страната. За по-добро разбиране, разделяне на секторите и добавяне на коментари. Всички елементи на дизайна, които са свързани с CSS чрез имена на класове, така че можете да промените дизайна на формулярите, за да отговарят на дизайна на вашите сайтове, без особени затруднения.

< div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" >Въведете < li>< a href= "#0" >Регистрация < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" >електронна поща < input class = id= "signin-email" type= "email" placeholder= "електронна поща" > < span class = "cd-error-message" >Ето напомняне за помилването! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" >парола < input class = "пълна ширина has-padding has-border" id= "signin-password" type= "text" placeholder= "(!LANG:(!LANG:Парола" > !}!}< a href= "#0" class = "hide-password" >приховат < span class = "cd-error-message" >Ето напомняне за помилването! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" >Помни ме < p class = "fieldset" > < input class = "full-width" type= "submit" value= "напусни" > < p class = "cd-form-bottom-message" >< a href= "#0" >Забравена парола? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" >Im'ya Koristuvacha < input class = "пълна ширина has-padding has-border" id="signup-username" type="text" placeholder= "Имя Користувача"> < span class = "cd-error-message" >Ето напомняне за помилването! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" >електронна поща < input class = "пълна ширина has-padding has-border" id= "signup-email" type= "email" placeholder= "(!LANG:(!LANG:Email" > !}!}< span class = "cd-error-message" >Ето напомняне за помилването! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" >парола < input class = "пълна ширина has-padding has-border" id= "signup-password" type= "text" placeholder= "(!LANG:(!LANG:Парола" > !}!}< a href= "#0" class = "hide-password" >приховат < span class = "cd-error-message" >Ето напомняне за помилването! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" >аз съм годен за< a href= "#0" >умовете < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Създай профил"> < div id= "cd-reset-password" > < p class = "cd-form-message" >Забравена парола? Бъдете любезни, въведете имейл адреса. Трябва да отмените заявката си, за да създадете нова парола. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" >електронна поща < input class = "пълна ширина has-padding has-border" id= "reset-email" type= "email" placeholder= "(!LANG:(!LANG:Email" > !}!}< span class = "cd-error-message" >Ето напомняне за помилването! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Нулиране на паролата"> < p class = "cd-form-bottom-message" >< a href= "#0" >Обърни се към входа < a href= "#0" class = "cd-close-form" >близо

CSS стилове:

Основният шаблон на този елемент за управление на формата е авторът на популярния плосък стил (Flat), с ясен акцент върху минимализма. Нищо лошо на света заден планзатъмняване, светлина за оцветяване, добър избор на шрифт и икони за идентифициране на полета за въвеждане. С помощта на силата на CSS можете лесно да промените всеки елемент от формата.

.cd-user-modal (позиция: фиксирана; отгоре: 0; отляво: 0; ширина: 100%; височина: 100%; фон: rgba (52, 54, 66, 0,9); z-индекс: 3; y: auto ; курсор : указател ; видимост : скрита ; непрозрачност : 0 ; s 0 , видимост 0 0.3s ; .cd-user-modal .is-visible ( видимост : видима ; непрозрачност : 1 ; -webkit-transition: непрозрачност 0. , видимост 0 0 ; -moz-transition: непрозрачност 0.3 0 , видимост 0 0 ; преход : непрозрачност 0.3s 0 , видимост 0 0 ; ) .cd-user-modal .transform: translateY(0 ) ; -ms-transform: трансл. (0) ; -o-transform: translateY(0) ; transform : translateY(0) ; 90%; dth: 600px; фон: #FFF; поле: 3em auto 4em; курсор: auto; border-radius: 0,25em; -webkit-transform: translateY(-30px ); -moz-transform: translateY(-30px ); -ms-transform: translateY(-30px ); -o-transform: translateY(-30px ); transform : translateY(-30px ); ); ); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transfer-property: transf orm; -webkit-transition-duration: 0.3s; -moz-продължителност на прехода: 0.3s; продължителност на прехода: 0.3s; ) .cd-user-modal-container .cd-switcher : след ( съдържание : "" ; дисплей : таблица ; ясно : и двете ; ) .cd-user-modal-container .cd-превключвател li ( ширина : 50% ; float : вляво ; text-align : center ; ) .cd-user-modal-container .cd-switcher li: първо дете a (радиус на границата: .25em 0 0 0 ; ) -превключвател li: последно дете a ( граница -radius : 0 .25em 0 0 ; ) .cd-user-modal-container .cd-switcher a ( дисплей : блок ; ширина : 100% ; височина : 50 пиксела ; височина на линията : 50 пиксела ; фон : #d2d8d8 ; цвят ; #809191 ; ) .cd-user-modal-container .cd-switcher a.select ( фон : #FFF ; цвят : #505260 ; ) : 600px ) ( .cd-user-modal-container ( margin : 4em auto ; ) . .cd-user-modal-container .cd-switcher a (височина: 70px; височина на реда: 70px;)) .cd-form (допълване: 1. 4em;) .cd-form .fieldset (позиция: относителна; поле : 1.4em 0 ; ) .cd-form .fieldset : първо дете ( margin-top : 0 ; ) .cd-form .fieldset : последно дете ( margin-bottom : 0 ; ) .cd-форма етикет ( font- размер: 14px; размер на шрифта: 0,875r em; ) .cd-form label.image-replace( /* заменете текста с икона */дисплей: вграден блок позиция: абсолютна; вляво: 15px; отгоре: 50%; дъно: автоматично; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50% ); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform : translateY(-50% ); височина: 20px; ширина: 20px препълване: скрит; текстов отстъп: 100% ; бяло пространство: nowrap; цвят: прозрачен; текстова сянка: нито един; фоново повторение: без повторение; фонова позиция: 50% 0 ; } /* Икони на поле за въвеждане */ .cd-формаетикет .cd-потребителско име { фоново изображение: url("../img/cd-icon-username.svg") ; } .cd-формаетикет .cd имейл { фоново изображение: url("../img/cd-icon-email.svg") ; } .cd-формаетикет .cd-парола { фоново изображение: url("../img/cd-icon-password.svg") ; } .cd-формавход { марж: 0 ; подплата: 0 ; граница-радиус: 0,25 ем; } .cd-формавход .пълна ширина { ширина: 100% ; } .cd-формавход .има подложка { подплата: 12px 20px 12px 50 пиксела; } .cd-формавход .has-граница { граница: 1px твърдо #d2d8d8; -webkit-външен вид : нито един; -moz-външен вид : нито един; -ms-външен вид : нито един; -o-външен вид : нито един; външен вид : нито един; } .cd-формавход .has-граница: фокус { цвят на границата: #343642 ; кутия сянка: 0 0 5px rgba(52 , 54 , 66 , 0.1 ) ; контур: нито един; } .cd-формавход .has-грешка { граница: 1px твърдо #d76666; } .cd-формавход [ Тип = парола ] { /* място за бутона за скриване */ подложка вдясно: 65 пиксела; } .cd-формавход [ Тип = Изпращане ] { подплата: 16 пиксела 0 ; курсор: показалец; заден план: #2f889a; цвят: #Ф Ф Ф; шрифт-тегло: смели; граница: нито един; -webkit-външен вид : нито един; -moz-външен вид : нито един; -ms-външен вид : нито един; -o-външен вид : нито един; външен вид : нито един; } .не пипай .cd-формавход [ Тип = Изпращане ] : задръжте курсора, .не пипай .cd-формавход [ Тип = Изпращане ] : фокус { заден план: #3599ae; контур: нито един; } .cd-форма .hide-password { дисплей: вграден блок; позиция: абсолютен; право: 0 ; връх: 0 ; подплата: 6px 15 пиксела; граница-ляво: 1px твърдо #d2d8d8; връх: 50% ; дъно: Автоматичен; -webkit-transform : преведетеY (-50% ) ; -moz-трансформиране : преведетеY (-50% ) ; -ms-трансформиране : преведетеY (-50% ) ; -o-трансформиране : преведетеY (-50% ) ; трансформирайте: преведетеY (-50% ) ; размер на шрифта: 14 пиксела; размер на шрифта: 0,875 рем; цвят: #343642 ; } .cd-форма .cd-съобщение за грешка { дисплей: вграден блок; позиция: абсолютен; наляво: -5 пиксела; дъно: -35 пиксела; заден план: rgba(215 , 102 , 102 , 0.9 ) ; подплата: .8em; z-индекс: 2 ; цвят: #Ф Ф Ф; размер на шрифта: 13 пиксела; размер на шрифта: 0,8125 рем; граница-радиус: 0,25 ем; /* Отказ от щраквания и точки */ указателни събития: нито един; видимост: скрит; непрозрачност: 0 ; -webkit-преход : непрозрачност 0.2s 0 , видимост 0 0.2s; -moz-преход : непрозрачност 0.2s 0 , видимост 0 0.2s; преход: непрозрачност 0.2s 0 , видимост 0 0.2s; } .cd-форма .cd-съобщение за грешка:: след { /* малка бележка за помилването */ съдържание: "" ; позиция: абсолютен; наляво: 22px; дъно: 100% ; височина: 0 ; ширина: 0 ; граница-ляво: 8 пиксела твърдо прозрачен; граница вдясно: 8 пиксела твърдо прозрачен; граница отдолу: 8 пиксела твърдо rgba(215 , 102 , 102 , 0.9 ) ; } .cd-форма .cd-съобщение за грешка.е-видимо { непрозрачност: 1 ; видимост: видими; -webkit-преход : непрозрачност 0.2s 0 , видимост 0 0 ; -moz-преход : непрозрачност 0.2s 0 , видимост 0 0 ; преход: непрозрачност 0.2s 0 , видимост 0 0 ; } @mediaсамо екран и (мин. ширина: 600 пиксела) { .cd-форма { подплата: 2ем; } .cd-форма .fieldset { марж: 2ем 0 ; } .cd-форма .fieldset: първо дете { margin-top: 0 ; } .cd-форма .fieldset: последно дете { margin-bottom: 0 ; } .cd-формавход .има подложка { подплата: 16 пиксела 20px 16 пиксела 50 пиксела; } .cd-формавход [ Тип = Изпращане ] { подплата: 16 пиксела 0 ; } } .cd-form-message { подплата: 1,4 ем 1,4 ем 0 ; размер на шрифта: 14 пиксела; размер на шрифта: 0,875 рем; височина на линията: 1.4 ; подравняване на текста: център; } @mediaсамо екран и (мин. ширина: 600 пиксела) { .cd-form-message { подплата: 2ем 2ем 0 ; } } .cd-form-bottom-message { позиция: абсолютен; ширина: 100% ; наляво: 0 ; дъно: -30 пиксела; подравняване на текста: център; размер на шрифта: 14 пиксела; размер на шрифта: 0,875 рем; } .cd-form-bottom-messageа { цвят: #Ф Ф Ф; текст-украса: подчертайте; } .cd-close-form { /* бутон тип X горе вдясно */ дисплей: блок; позиция: абсолютен; ширина: 40 пиксела; височина: 40 пиксела; право: 0 ; връх: -40 пиксела; заден план: url("../img/cd-icon-close.svg") без повторение център център; текстов отстъп: 100% ; бяло пространство: nowrap; препълване: скрит; } @mediaсамо екран и (мин. ширина: 1170 пиксела) { .cd-close-form { дисплей: нито един; } } #cd вход, #cd регистрация, #cd-reset-password { дисплей: нито един; } #cd вход.е-избрано, #cd регистрация.е-избрано, #cd-reset-password.е-избрано { дисплей: блок; }

cd-user-modal ( позиция: фиксирана; отгоре: 0; отляво: 0; ширина: 100%; височина: 100%; фон: rgba(52, 54, 66, 0,9); z-индекс: 3; преливане-y : автоматично, курсор: показалец, видимост: скрита, непрозрачност: 0; 0, видимост 0 0,3s; ) 0, видимост 0 0; -moz-transition: непрозрачност 0,3s 0, видимост 0 0; преход: непрозрачност 0,3s 0, видимост 0 0; ) .cd-user-modal.is-visible .cd-user-modal-container ( -webkit-transform: translateY(0); -moz-transform : translateY(0); -ms-transform: translateY (0); -o-transform: translateY(0); transform: translateY(0); ) cd -user-modal-container (позиция: относителна; %;max-width:600px;background:#FFF;margin:3em auto 4em;cursor:auto;border-radius:0.25em;-webkit-transform: translateY(-30px ); translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(- 30px); transform: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property y: -moz-трансформиране; транзит-свойство: transform; -webkit-transition-duration: 0.3s; -moz-продължителност на прехода: 0.3s; продължителност на прехода: 0.3s; ) .cd-user-modal-container .cd-switcher:after (съдържание: ""; дисплей: таблица; изчистване: и двете; ) .cd-user-modal-container .cd-switcher li (ширина: 50%; float : вляво; text-align: center; .-switcher li:last-child a ( border-radius: 0 .25em 0 0; ) .cd-user-modal-container .cd-switcher a ( дисплей: блок; ширина: 100%; височина: 50px; височина на линията: 50px; фон: #d2d8d8; цвят: #809191; ) ) : 600px) ( .cd-user-modal-container ( margin: 4em auto; ) .cd-user-modal -container .cd-switcher a (височина: 70px; line-height: 70px; )) .cd-form ( padding: 1.4em; ) .cd-form .fieldset (позиция: относителна; поле: 1.4em 0; ) . cd-form .fieldset:first-child ( margin-top: 0; ) .cd-form .fieldset: last -child ( margin-bottom: 0; ) .cd-form label (размер на шрифта: 14px; размер на шрифта : 0,875rem; ) .cd-form label. image-replace ( /* замени текста с икона */ дисплей: inline-block; позиция: абсолютна; ляво: 15px; отгоре: 50%; отдолу : Автоматичен; -webkit-transform: translateY(-50%), -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); : 20px;width:20px;overflow:hidden;text-indent:100%;white-space:nowrap;color:transparent;text-shadow:none;background-repeat: no-repeat; ) /* Икони на поле за въвеждане */ .cd-form label.cd-username (background-image: url("). ./img/cd-icon-username.svg"); ) .cd-form label.cd-email ( background-image: url("../img/cd-icon-email.svg"); ) .cd -form label.cd-password ( background-image: url("../img/cd-icon-password.svg"); ) .cd-form input ( поле: 0; допълване: 0; радиус на границата: 0,25 em;) .cd-form input.full-width (ширина: 100%; ) .cd-form input.has-padding ( padding: 12px 20px 12px 50px; ) solid #d2d8d8; -webkit-appearance: none; -moz -облик: няма; -ms-изглед: няма; -o-външен вид: няма; външен вид: няма; ) -цвят: #343642; сянка на кутия: 0 0 5px rgba(52, 54, 66, 0.1); контур: none; ).form input ( /* пространство за бутона Attach */ padding-right: 65px; ) .cd-form input ( padding: 16px 0; курсор: указател; фон: #2f889a; цвят: #FFF; шрифт- тегло: удебелен; граница: няма;-webkit-appearance: няма;-moz-appearance: няма;-ms-appearance: няма; -o-appearance: няма; външен вид: няма; ) .no-touch .cd-form input : задържане на мишката, .no-touch .cd-form input:focus ( фон: #3599ae; контур: няма; ) .cd-form .hide-pass word ( дисплей: inline-block; позиция: абсолютна, дясно: 0; отгоре: 0; допълване: 6px 15px; border-left: 1px плътно #d2d8d8; отгоре: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); размер: 0.875rem; цвят: #343642; ) .cd-form .cd-error-message (дисплей: inline-block; 102, 0.9), padding: .8em; z-индекс: 2; цвят: #FFF; размер на шрифта: 13px; размер на шрифта: 0.8125rem радиус на границата: 0.25em -събития: няма; видимост: скрита; непрозрачност: 0 -webkit-преход: непрозрачност 0.2s 0, видимост 0 0.2s; видимост 0 0.2s; ) .cd-form .cd-error-message::after ( /* малка бележка за помилването */ съдържание: ""; позиция: абсолютна; ляво: 22px; долу: 100%; височина: 0; ширина: 0; граница -вляво: 8px плътно прозрачно, граница вдясно: 8px плътно прозрачно;1;видимост: видима;-webkit-transition: непрозрачност 0,2s 0, visibility 0 0;-moz-transition: непрозрачност 0,2s 0, видимост 0 0; преход: : opacity 0.2s 0, visibility 0 0; ) @media only screen and (min-width: 600px) ( .cd-form ( padding: 2em; ) .cd-form .fieldset ( margin: 2em 0; ) .cd - form .fieldset:first-child ( margin-top: 0; . 0; ) ) .cd-form-message ( padding: 1.4em 1.4em 0; font-size: 14px; font-size: 0.875rem; line- height : 1.4; подравняване на текст: център; ) (мин. ширина: 600 пиксела) ( .cd-form-message ( padding: 2em 2em 0; ) ) .cd-form-bottom-message ( позиция: абсолютна; ширина: 100 % ; вляво: 0; отдолу: -30px; подравняване на текста: център; размер на шрифта: 14px; размер на шрифта: 0. 875рем; ) .cd-form-bottom-message a ( цвят: #FFF; text-decoration: underline; ) * бутон X стил дясна ръка */ дисплей: блок; позиция: абсолютна; ширина: 40px височина: 40px; вдясно: 0; отгоре: -40px; ") център в центъра без повторение; текстов отстъп: 100%; бяло пространство: nowrap; препълване: скрит; ) само екран @media и (мин. ширина: 1170px) ( .cd-close-form ( display: none; ) ) #cd-login, #cd-signup, #cd-reset-password (дисплей: няма; ) # cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is -избран (дисплей: блок;)

В ефекта на прехода беше добавено избледняване, за да се постигне плавен преход на модалния прозорец, когато е затворен.

Забележка. Размерът на шрифта за всички полета е настроен на 16px. Tse zapobіgaє автоматично мащабиране, yak vіdbuvaєtsya pіd час, за да разгледате мобилните стопански постройки.

Известна е авторската, буржоазна версия на плъгина. Можете също да изтеглите оригинала там.
Руската версия, можете да я вземете от моя Yandex.Disk, всички необходими файлове, опаковани dbaily в един архив, не забравяйте да се чудите пред тях, още адаптации, живо дупе на роботизирания чудо jQuery плъгин:

С уважение Андрей

Не влизай