Головна
Не вмикається
Покрокова реєстрація засобами jQuery. Робимо відмінну систему реєстрації з використанням PHP, MySQL та jQuery Плагін jQuery «Contactable»

Покрокова реєстрація засобами jQuery. Робимо відмінну систему реєстрації з використанням PHP, MySQL та jQuery Плагін jQuery «Contactable»

В мережі TwitterВи можете спостерігати роботу сторінки з чистим та простим дизайном. Подивіться на праву верхню частинусторінки, там Ви побачите кнопку авторизаціїу систему, натиснувши яку, ви побачите формидля заповнення даних. Сьогодні ми розповімо Вам про те, як зробити такий ефект на власному сайті. Насправді це дуже просто. До того ж, це допоможе зберегти місце на сторінці, і додасть відчуття комфорту Вашим відвідувачам. У цій статті ми покроково розповімо Вам про те, як працює вся ця система, а ще цей посібник буде корисним для тих, хто бажає вивчити jQuery. Уперед!

Код HTML

Спочатку потрібно почати з коду HTML. HTML-код дуже простенький - він містить у собі тег «a», що йде разом із тегом «fieldset», за рахунок якого відображається форма.

Просто скопіюйте це на код нової сторінки:


Have an account? Sign in













Forgot your password?


title="(!LANG:If you remember your password, try logging in with your email" !}
Forgot your username?






Код CSS

Вам знадобиться використання CSSдля визначення кнопки авторизації та форми логіну. Поданий нижче код виконує саме цю функцію.

Просто скопіюйте цей код у файл css, або додайте його в код HTML там, де у вас визначається стиль. Ці коди визначають кнопку авторизації.

#container (
width:780px;
margin:0 auto;
position: relative;
}

#content (
width:520px;
min-height:500px;
}
a:link, a:visited (
color:#27b;
text-decoration:none;
}
a:hover (
text-decoration: underline;
}
a img (
border-width:0;
}
#topnav (
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
}
#topnav a.signin (
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius: 4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
*Padding:4px 12px 6px;
}
#topnav a.signin:hover (
background:#59B;
*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*Padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover (
*background-position:0 3px!important;
}

a.signin (
position:relative;
margin-left:3px;
}
a.signin span (
background-image:url("images/toggle_down_light.png");
background-repeat:no-repeat;
background-position:100% 50%;
padding:4px 16px 6px 0;
}
#topnav a.menu-open (
background:#ddeef6!important;
color:#666!important;
outline: none;
}
#small_signup (
display: inline;
float:none;
line-height:23px;
margin:25px 0 0;
width:170px;
}
a.signin.menu-open span (
background-image:url("images/toggle_up_dark.png");
color:#789;
}

І далі йде визначення форми логіну:

#signin_menu (
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
display: none;
background-color: #ddeef6;
position:absolute;
width:210px;
z-index:100;
border:1px transparent;
text-align: left;
padding:12px;
top: 24.5px;
right: 0px;
margin-top:5px;
margin-right: 0px;
*margin-right: -1px;
color:#789;
font-size:11px;
}

#signin_menu input, #signin_menu input (
display:block;
-moz-border-radius:4px;
-webkit-border-radius: 4px;
border:1px solid #ACE;
font-size:13px;
margin:0 0 5px;
padding:5px;
width:203px;
}
#signin_menu p (
margin:0;
}
#signin_menu a (
color:#6AC;
}
#signin_menu label (
font-weight:normal;
}
#signin_menu p.remember (
padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete (
clear:both;
margin:5px 0;
}
#signin_menu p a (
color:#27B!important;
}
#signin_submit (
-moz-border-radius:4px;
-webkit-border-radius: 4px;
background:#39d url("images/bg-btn-blue.png") repeat-x scroll 0 0;
border:1px solid #39D;
color:#fff;
text-shadow:0 -1px 0 #39d;
padding:4px 10px 5px;
font-size:11px;
margin:0 5px 0 0;
font-weight:bold;
}
#signin_submit::-moz-focus-inner (
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus (
background-position:0 -5px;
cursor:pointer;
}

Настав час попрацювати з javascript

Здавалося б, коди HTMLі CSS досить складні та заплутані, а в javascript все дуже просто. Просто копіюйте цей код javascript, за рахунок якого можна буде відображати та ховати форму в момент кліку по кнопці авторизації, навіть якщо клік буде зроблено поза формою логіну.



Згідно з кодом, наведеним вище, коли відвідувач кликає по кнопці авторизації, запускається нова функція. Спочатку відображається форма логіну (укладена в тег "filedset"), потім посилання, укладене в клас ". Signin", додає ще один клас "menu-open", за рахунок якого змінюється фонове зображення.

Ще одна подія в цьому коді полягає в тому, що коли відвідувачі кликають не формою логіну, а десь на сторінці – то форма сама закривається. Іншими словами, клас «menu-open» знімається з посилання з класом «.signin» і повертає початкове фонове зображення.

Щодо підказок?


Ми зазвичай радимо використовувати плагін для jQuery - tipsy. Вміст tooltip-а є те, що написано в атрибуті «title», що відноситься до посилання. Ви можете змінювати позицію tooltip-а щодо сходу, заходу, півдня чи півночі. Це реалізується за рахунок параметра gravity, зазначеного в коді вище. Ми надаємо Вам посилання на сайт, присвячений цьому плагіну, там Ви зможете докладніше вивчити його можливості та завантажити плагін. …

На закінчення

Якщо Ви скопіювали весь код цієї статті, будь ласка, не змінюйте структуру папок. Якщо Ви зміните її, код не буде працювати. Цей кодє лише прикладом створення форми авторизації, що випадає, за допомогою jQuery. Успіхів у практиці!

1. Плагін для створення онлайн форм «jFormer»

Створення контактних форм: зворотнього зв'язку, коментування, форма входу, форма реєстрації з перевіркою правильності введення інформації

2. Покрокова форма реєстрації з використанням jQuery

Акуратна форма з покроковим наповненням. Знизу вказано індикатор заповнення форми.

3. Покрокова форма

Заповнення форми за кілька кроків із перевіркою правильності заповнення.

4. Контактна форма для сайту

Перевірка правильності введення інформації здійснюється «на льоту» перед відправкою повідомлення з використанням javascript.

5. Анімоване перемикання між формами на jQuery

Анімоване перемикання за допомогою jQuery між формою входу на сайт, формою реєстрації та полем для відновлення пароля. На демонстраційній сторінці натисніть на жовте посилання, щоб побачити ефект.

6. Форма зворотного зв'язку, що виїжджає PHP

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

7. PHP форма реєстрації з використанням jQuery та CSS3

Форма із перевіркою правильності введення інформації.

8. PHP форма реєстрації у стилі Facebook

Симпатична форма реєстрації, реалізована з допомогою CSS, PHP та jQuery.

9. jQuery контактна форма "SheepIt"

Реалізована можливість перед надсиланням повідомлення додавати нові поля.

10. Контактна форма "Fancy AJAX Contact Form"

Симпатична акуратна PHP форма зворотного зв'язку із перевіркою правильності введення інформації. Технології: CSS, PHP, jQuery.

11. Система авторизації/реєстрації на сайті

12. Форма надсилання даних

З перевіркою правильності наповнення.

13. Плагін jQuery "Contactable"

Для реалізації форми зворотного зв'язку, що виїжджає, для швидкого відправлення повідомлення.

Ми вирішили доповнити деякими прикладами , опубліковану на хабре, щоб ви дізналися про деякі "інноваційні техніки" поліпшення форм реєстрації та авторизації.

Спрощуємо форми реєстрації

Отже, кілька прийомів:

  • не потрібно дублювати введення пароля;

Щоб полегшити користувачеві життя (навіщо це робити добре показано в цьому від Google) краще зробити одне поле та чекбокс, який зніматиме "маску" - все це здійснюється за допомогою невеликого javascript-коду.

1. Бібліотека jQuery.

2-7. ініціалізація на елементі.

Б. HTML-код форми наступний:

5-6. видимість цих полів перемикається скриптом чекбоксом.

B. init.js

$(document).ready(function()( $("#testpassword1").showPassword(); $("#testpassword").showPassword(".checker", ( text: "Чекбокс, що настроюється), name: "showmypass ")); ));

Г. styles.css

Body ( font-family: Arial, Helvetica, serif, sans-serif; ) form ( margin: 15px 0; padding: 15px; background: #ccc; color: #000; border: 1px solid #aaa; width: 500px; ) form label.form ( float: left; width: 120px; display: block; ) form input#testpassword1, form input#testpassword ( float: left; display: block; ) .clear ( clear: both; ) div.checker ( clear : both; display: block; border: 1px dotted #2d2d2d; color: #2d2d2d; background: transparent; width: 230px;

  • краще зробити автозаповнення полів на основі введених даних;

Чим менше користувачеві потрібно вводити, тим краще. Деякі поля можна заповнити, відштовхуючись від попередніх, вже введених даних. Наприклад, можна заповнювати поле "місто", зчитуючи та обробляючи значення з поля "індекс". Простий ajax-запит і справа в капелюсі. Використання AJAX для отримання даних про місто та область з поштового індексу.

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

1. Бібліотека jQuery.
2. Основний сценарій.

Б. HTML-код форми наступний:

Індекс Місто Країна

1.Поле, у яке слід внести поштовий індекс.

В. zip_city.js:

Function fillcitystate(controlname)( var zipcode = trim(controlname.value); //обрізаємо пробіли if(zipcode.length!=5)( //перевіряємо довжину return false; ) var zipstring = ""; xmlhttp = new XMLHttpRequest() xmlhttp.open("GET", "php/zip_city.php?zip=" + zipcode, true); // надсилаємо запит у php xmlhttp.onreadystatechange=function()( //при отриманні результату if (xmlhttp.readyState= =4)( var zipstring = xmlhttp.responseText; if (zipstring!="Error")( var ziparray = zipstring.split("|"); document.getElementById("txtCity").value = ziparray; //встановлюємо значення для поля міста document.getElementById("txtCountry").value = ziparray; //встановлюємо значення для поля країни ) ) ) xmlhttp.send(null); ) //функція обрізки пробілів function trim(s) ( var l=0; var r=s.length -1;while(l< s.length && s[l] == " ") { l++; } while(r >l && s[r] == " ") ( r-=1; ) return s.substring(l, r+1); )

Г. zip_city.php:обробник ajax-запиту.

Require_once("db.php"); $db_table = "zip_city"; //Установка за замовчуванням для значення $returnval = "Error"; //отримання GET-параметра $zipcode = $_GET["zip"]; //переробка if (strlen($zipcode)>5)( $zipcode = substr($zipcode, 0, 5); ) if (strlen($zipcode)!=5)( die ($returnval); ) //отримання значень із БД $query = "SELECT * FROM ($db_table) WHERE zip="($zipcode)""; $resultval = mysql_query($query) or die("Cannot run query:Query: ".$query."".mysql_error($conn)); $rowcount = mysql_num_rows($resultval); if ($rowcount==1)( $row = mysql_fetch_array($resultval); $returnval = $row["zip"]."|".ucwords(strtolower($row["city"]))."|" .$row["country"]; //власне, формування успішної відповіді ) echo $returnval;

Д. db.php:конфігурація підключення до БД.

//Параметри підключення до бази $dbhost = "localhost"; $ dbusername = "root"; $ dbpass = ""; $db_name = "blog_login"; $conn = mysql_connect($dbhost, $dbusername, $dbpass) або die("Cannot connect to MySQL database server:".mysql_error()); $db = mysql_select_db($db_name, $conn) або die("Cannot open database:".mysql_error($conn));

Е. Створення таблиці БД:

CREATE TABLE IF NOT EXISTS `zip_city` (`id` int(11) NOT NULL AUTO_INCREMENT, `zip` varchar(5) NOT NULL, `city` varchar(255) NOT NULL, `country` varchar(255) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=41921;

  • можна зробити автопідстановку у полі введення;

Деякі поля припускають обмежений набір значень, що вводяться. Наприклад, користувач може ввести два символи, побачити список країн, які починаються на ці літери та легко вибрати потрібну. До того ж, він точно не припуститься помилок у назві батьківщини. AJAX Auto-Complete під jQuery.

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

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

Б. HTML-код форми наступний:

Країна

1. Поле, в яке потрібно розпочинати вводити назву країни.

В. init.js:

Var options, a; jQuery(function()( options = ( serviceUrl:"./php/autocomplete.php" ); /*вказуємо адресу файлу-обробника*/ a = $("#query").autocomplete(options); /*призначаємо автозаповнення об'єкт з id="query"*/ ));

Г. autocomplete.php:обробник ajax-запиту

If(isset($_GET["query"]) && (!empty($_GET["query"])))( require_once("db.php"); $db_table = "system_countries"; //назва таблиці БД $ query = $_GET["query"]; // запит з поля форми $variants = ""; $q = "SELECT `name_en` FROM `($db_table)` WHERE `name_en` REGEXP "^($query)(. *)" GROUP BY `name_en`"; /*шукаємо за першими введеними символами*/ $res = mysql_query($q) or die("Cannot run query:Query: ".$q."".mysql_error($conn) ); варіантів*/ ) $variants = implode(",",$variants); /*набиваємо всі варіанти через кому в рядок*/ /*формуємо відповідь*/ $request = "( query:"".$query."", suggestions:[".$variants."] )"; echo $request; ) )

Д. Створення таблиці БД:

DROP TABLE IF EXISTS `system_countries`; CREATE TABLE `system_countries` (`id` int(11) NOT NULL auto_increment, `name_en` char(128) NOT NULL, `name_ru` char(128) default NULL, `code` char(2) NOT NULL, `_order` int(3) default "0", `independent` tinyint(1) default "1", PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Ж. styles.css:

Autocomplete-w1 ( background:url(/autocomplete/img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* IE6 fix: */ _background:none; _margin:0; ) .autocomplete ( border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; ) .autocomplete .selected ( background:#F0F0F0; ) .autocomplete div ( padding:2px 5px; weight:normal; color:#3399FF;

  • навіщо вводити дані двічі?

У багатьох інтернет-магазинах використовують багатокрокові форми замовлення з полями адрес оплати та доставки. Найчастіше їх значення збігаються. Чому б не запропонувати користувачеві в один клік продублювати значення введених полів? Програмно прийом простий і ви можете застосовувати його у різних випадках, де мається на увазі ймовірність повторення значень.

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

1. Бібліотека jQuery.

2. jQuery Select Plugin.

3. Основний скрипт.

Б. HTML-код форм наступний:

Ім'я: Прізвище: Email: Країна:
Копіювати Дані доставки
Ім'я: Прізвище: Email: Країна:

Дані оплати.

14. Чекбокс копіювання.

В. init.js:

//при завантаженні сторінки $(document).ready(function() ( //коли чекбокс активовано або деактивовано $("#copyaddress").click(function() ( // якщо активовано if ($("#copyaddress")) .is(":checked")) ( //для кожного поля введення $("#shipping_fields input", ":visible", document.body).each(function(i) ( //копіювання значень із полів оплати // у відповідні поля доставки $(this).val($("#billing_fields input").eq(i).val()); ));//не працює з випадаючими меню, тому застосуємо функції плагіна var bcountry = $( "#bcountry").val(); $("#scountry").selectOptions(bcountry); ) else ( //якщо деактивовано чекбокс //для кожного поля введення $("#shipping_fields input", ":visible", document.body).each(function(i) ( //очищаємо поля даних про доставку $(this).val(""); )); $("#scountry").selectOptions(""); ) )) ;));

  • Здається, люди втомилися читати капчу:)

Адже вам і самим, напевно, набридло читати нерозбірливі символи з капчі і потім їх вводити. Давайте помилуємо користувачів, але при цьому не пропустимо роботів. Для цього можна вдатися до кількох прийомів, розглянемо один із них. Підхід Honeypot Captcha - створюємо поле на формі, невидиме користувачеві, але видиме боту. Перевіривши це значення, ми зможемо зловити недбайливих спамерів, при цьому не створюючи складнощів Справжнім Людям. Вплив капчі на рівень конверсії.

А. HTML-код форми наступний:

Ім'я Прізвище E-Mail

Б. додати наступний js:

Function check() ( if(document.form_find.body.value)( console.log("CAUTION!!! BOT ON PAGE!!!"); ) )

Спрощуємо форми авторизації

Процес авторизації - образно кажучи, це коли людина "здоровається" із сайтом. У середні віки в пристойних будинках віталися багаторазовими поклонами та реверансами. Але ми йтимемо в ногу з часом і зробимо так, щоб для вітання було достатньо лише одного теплого рукостискання. Спрощуємо вхід на сайт.

  • Залишаємо користувача на сторінці, де він авторизувався;

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

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

3. Основний сценарій.

Б. HTML-код форми наступний:

Для авторизації введіть логін: login та пароль: password

4. Кнопка відкриття форми.

7-22. Сама форма.

19. Чекбокс, який змушує встановлювати куки дуже довго.

23. Місце для повідомлення.

В. jqeasy.dropdown.js:

$(document).ready(function() ( /*основна функція*/ $(".btnsignin").click(function(e) ( /*при натисканні на кнопку "Увійти"*/ e.preventDefault(); $) ("#frmsignin").toggle("fast",function() ( /*перемикає видимість форми*/ $("#username").focus(); /*переводить курсор введення в поле логіна*/ )); $ (this).toggleClass("btnsigninon"); /*перемикає клас на кнопці для зміни виду*/ $("#msg").empty(); )); $(".btnsignin"). ( return false; )); *не на одному з об'єктів форми*/ $(".btnsignin").removeClass("btnsigninon"); /*прибираємо форму і повертаємо як було*/ $("#frmsignin"). ; )); ( /*якщо прийшло ОК*/ $("#frmsignin").text("Signed in!"); /*надсилаємо текстове повідомлення*/ $("#frmsignin").delay (800).fadeOut(400); $("#signbtn").html("Вийти"); /*змінюємо кнопку для виходу*/ ) else ( $("#msg").html(data); $("#username").focus(); ) ) )); )); function validate(formData, jqForm, options) ( /*процедура валідації введених даних, містить обробку виведення помилки*/ var form = jqForm; var un = $.trim(form.username.value); var pw = $.trim(form .password.value), var unReg = /^(3,20)$/; var pwReg = /^(6,20)$/; var hasError = false; var errmsg = ""; = " Введіть логін:

"; hasError = true; ) else if(!unReg.test(un)) ( errmsg = " Логін повинен бути довжиною 3 - 20 символів (az, 0-9, _). "; hasError = true; ) if (! pw) ( errmsg += " Введіть пароль "; , #, $, %, &, *, (,), _)."; hasError = true; ) if (!hasError) ( $("#msg").html(" запит... "); else ( $("#msg").html(errmsg); return false; ) )

Г. dropdown.php:

If(($_POST["username"]=="login") && ($_POST["password"]=="password"))( echo "OK"; )else( echo "Невірний логін або пароль"; )

Д. style.css:

Body( padding:20px; font:12px Verdana, Geneva, sans-serif; color:#333; ) #container ( width:700px; /*margin:0 auto;*/ padding:13px 10px; border:1px solid #999 ; ) a.btnsignin, a.btnsignout ( background:#999; padding:5px 8px; color:#fff; text-decoration:none; font-weight:bold; -radius:4px; border-radius:4px; ) a.btnsignin:hover, a.btnsignout:hover ( background:#666; ) a.btnsigninon ( background:#ccc!important; none; ) #frmsignin ( display:none; background-color:#ccc; position:absolute; top: 89px; width:215px; padding:12px; -radius:5px;-moz-border-radius-topleft:0;-webkit-border-radius:5px;-webkit-border-top-left-radius:0; border-radius:5px; radius:0; z-index:100; ) #frmsignin input, #frmsignin input ( display:block; -moz-border-radius:4px; -webkit-border-radius:4px; solid #666;margin:0 0 5px; padding:5px; width:203px; ) #frmsignin p ( margin:0; ) #frmsignin label ( font-weight:normal; ) #submitbtn ( -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background- color:#333; border:1px solid #fff; color:#fff; padding:5px 8px; margin:0 5px 0 0; #000; cursor:pointer; ) .submit ( padding-top:5px; ) #msg ( color:#F00; ) #msg img ( margin-bottom:-3px; ) #msg p ( margin:5px 0; ) # msg p:last-child ( margin-bottom:0px; ) h1( margin:0 auto; )

Модальне вікно концентрує всю увагу і при цьому дозволяє помістити на форму додаткову інформаціючи опис.

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

4. Основний сценарій.

6. Основні стилі.

7. Базові стилі для модального вікна.

Б. HTML-код форми наступний:

Увійти Особистий кабінет

Вам також може сподобатися