Спрощуємо реєстрацію і вхід на сайт

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

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

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

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

Плагін jQuery для приховування / відкриття пароля

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

<Pre lang = "html4strict"> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type = "text / javascript"> // < ! [CDATA [mce: 0 //]]> </ script> <script src = "js / show_password.js" type = "text / javascript"> // <! [CDATA [mce: 1 //]]> </ script> <script src = "js / init.js" type = "text / javascript"> // <! [CDATA [mce: 2 //]]> </ script> </ pre>

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

2. завантажити плагін .

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

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

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

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

B. init.js

$ (Document) .ready (function () {$ ( '# testpassword1'). ShowPassword (); $ ( '# testpassword'). ShowPassword ( '. Checker', {text: 'Настроюваний чекбокс', name: 'showmypass '});});

Г. styles.css

body {font-family: Arial, Helvetica, serif, sans-serif; } Form {margin: 15px 0; padding: 15px; background: #ccc; color: # 000; border: 1px solid #aaa; width: 500px; } Form label.form {float: left; width: 120px; display: block; } Form input # testpassword1, form input # testpassword {float: left; display: block; } .Clear {clear: both; } Div.checker {clear: both; display: block; border: 1px dotted # 2d2d2d; color: # 2d2d2d; background: transparent; width: 230px; font-size: 0.8em; margin: 20px 0 0 0; } Завантажити файли прикладу
  • краще зробити автозаповнення полів на основі введених даних;

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

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

1. Бібліотека jQuery.
2. Основний скрипт.
Б. HTML-код форми наступний:
<Pre lang = "html4strict"> Індекс <input id = "txtZip" name = "txtZip" type = "text" /> Місто <input id = "txtCity" name = "txtCity" type = "text" /> Країна < input id = "txtCountry" name = "txtCountry" type = "text" /> </ pre>

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

В. zip_city.js:

function fillcitystate (controlname) {var zipcode = trim (controlname.value); // обрізаємо прогалини if (zipcode.length! = 5) {// перевіряємо довжину return false; } Var zipstring = ""; xmlhttp = new XMLHttpRequest (); xmlhttp.open ( "GET", "php / zip_city.php? zip =" + zipcode, true); // відправляємо запит в php xmlhttp.onreadystatechange = function () {// при отриманні результату if (xmlhttp.readyState == 4) {var zipstring = xmlhttp.responseText; if (zipstring! = "Error") {var ziparray = zipstring.split ( "|"); document.getElementById ( "txtCity"). value = ziparray [1]; // встановлюємо значення для поля міста document.getElementById ( "txtCountry"). Value = ziparray [2]; // встановлюємо значення для поля країни}}} xmlhttp.send (null); } // функція обрізання прогалин function trim (s) {var l = 0; var r = s.length -1; while (l <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 ( "Can not 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) or die ( "Can not connect to MySQL database server:". Mysql_error ()); $ Db = mysql_select_db ($ db_name, $ conn) or die ( "Can not 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 = 41 921;

Завантажити файли прикладу

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

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

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

1. Бібліотека jQuery.
2. Скрипт автозаповнення для jQuery .
3. Основний скрипт.
Б. HTML-код форми наступний:
<Pre lang = "html4strict"> Країна <input id = "query" name = "q" type = "text" /> </ pre>

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 ( "Can not run query: Query:". $ Q. "". Mysql_error ($ conn)); / * Отримуємо результат запиту * / if (mysql_num_rows ($ res)> 0) {while ($ row = mysql_fetch_row ($ res)) {$ variants [] = " '". $ Row [0]. "'"; / * Заповнюємо масив варіантів * /} $ variants = implode ( ',', $ variants); / * Набиваємо всі варіанти через кому в рядок * / / * формуємо відповідь * / $ request = "{query: '". $ Query. "', Suggestions: [". $ Variants. "]}"; echo $ request; }}

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

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

Ж. styles.css:

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

Завантажити файли прикладу

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

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

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

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

2. jQuery Select Plugin.

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

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

Php?
Чому б не запропонувати користувачеві в один клік продублювати значення вже введених полів?