В этой статье мы рассмотрим пошаговую регистрацию с использованием jQuery .
Если регистрация на вашем сайте предусматривает заполнение нескольких десятков полей, очень не рационально размещать их на одной странице. Ведь пользователь существо очень ленивое и не захочет заполнять, увидев все эти поля.
Альтернативный вариант - разбить регистрацию на несколько шагов. Это порождает сразу много позитивных откликов - ведь начиная выполнять шаги у пользователя чаще всего появляется желание закончить их выполнение.
Так же логично разбивать регистрацию на логические блоки - контактная информация, адрес, личные данные и так далее.
Для пошаговой регистрации совсем не зачем создавать несколько форм и отдельно посылать данные на сервер. Гораздо удобнее все поместить в одну форму, но каждый шаг показывать пользователю лишь определенную часть формы. Именно такой и будет логика в нашем примере.
По мимо логики стоит учитывать, что вначале видна только ссылка "Вперед" /"Следующий шаг" , а на последнем шаге её не видно, но видно "Назад" и "Регистрация" .
Рассмотрим сам пример:
Страница
Шаг 1
Логин:
E-mail:
Пароль:
Шаг 2
Имя:
Фамилия:
Возраст:
Шаг 3
Страна:
Город:
Улица:
Назад Следующий шаг
body { margin:0; } /* Общие стили закончилась */ form { width:30%; margin:0 auto; } form div.step { display:none; } form div.step p.step{ text-align:center; font-size:28px; } form div.step p{ } form div.step p input{ float:right; } a.back { display:none; } form input { display:none; } a { color:#006600; text-decoration:none; } form p.talign{ text-align:center; }
Скрипт отвечающий за переключение шагов поместим в js/steps_registration.js , не забываем так же подключить библиотеку jQuery :
$(document).ready(function() { // Ждём загрузки страницы var steps = $("form").children(".step"); // находим все шаги формы $(steps).show(); // показываем первый шаг var current_step = 0; // задаем текущий шаг $("a.next").click(function(){ // Событие клика на ссылку "Следующий шаг" if (current_step == steps.length-2) { // проверяем, будет ли следующий шаг последним $(this).hide(); // скрываем ссылку "Следующий шаг" $("form input").show(); // показываем кнопку "Регистрация" } $("a.back").show(); // показываем ссылку "Назад" current_step++; // увеличиваем счетчик текущего слайда changeStep(current_step); // меняем шаг }); $("a.back").click(function(){ // Событие клика на маленькое изображение if (current_step == 1) { // проверяем, будет ли предыдущий шаг первым $(this).hide(); // скрываем ссылку "Назад" } $("form input").hide(); // скрываем кнопку "Регистрация" $("a.next").show(); // показываем ссылку "Следующий шаг" current_step--; // уменьшаем счетчик текущего слайда changeStep(current_step);// меняем шаг }); function changeStep(i) { // функция смены шага $(steps).hide(); // скрываем все шаги $(steps[i]).show(); // показываем текущий } });
Код php-отправки писать сюда не будем, так как это не совсем относится к этому уроку. Стоит лишь отметить, что письмо отправяется на адрес указанный в первом шаге формы. В любом случае вы можете скачать файлы демонстрации и посмотреть сами.
Мы решили дополнить некоторыми примерами , опубликованную на хабре, чтобы вы узнали о некоторых "инновационных техниках" улучшения форм регистрации и авторизации.
Упрощаем формы регистрацииИтак, несколько приемов:
- не нужно дублировать ввод пароля;
Чтобы облегчить пользователю жизнь (зачем это делать хорошо показано в этом от 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; font-size: 0.8em; margin: 20px 0 0 0; }
- лучше сделать автозаполнение полей на основе введённых данных;
Чем меньше пользователю нужно вводить — тем лучше. Некоторые поля можно заполнить отталкиваясь от предыдущих, уже введённых, данных. Например, можно заполнять поле "город", считывая и обрабатывая значение из поля "индекс". Простой 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) or die("Cannot connect to MySQL database server:".mysql_error()); $db = mysql_select_db($db_name, $conn) or 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)); /*получаем результат запроса*/ if(mysql_num_rows($res)>0){ while($row = mysql_fetch_row($res)){ $variants = """.$row."""; /*заполняем массив вариантов*/ } $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-код форм следующий:
Имя: Фамилия: 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").mouseup(function() { return false; }); $(document).mouseup(function(e) { /*при отжатии мыши*/ if($(e.target).parents("#frmsignin").length==0) { /*не на одном из объектов формы*/ $(".btnsignin").removeClass("btnsigninon"); /*убираем форму и возвращаем как было*/ $("#frmsignin").hide("fast"); }; }); $("#signin").ajaxForm({ beforeSubmit: validate, /*сначала проверка*/ success: function(data) { /*при получении ответа от обработчика*/ if (data=="OK") { /*если пришло ОК*/ $("#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 = ""; if (!un) { errmsg = " Введите логин:
"; hasError = true; } else if(!unReg.test(un)) { errmsg = " Логин должен быть длиной 3 - 20 символов (a-z, 0-9, _). "; hasError = true; } if (!pw) { errmsg += " Введите пароль "; hasError = true; } else if(!pwReg.test(pw)) { errmsg += " Пароль должен быть длиной 6 - 20 символов (a-z, 0-9, !, @, #, $, %, &, *, (,), _). "; 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; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } a.btnsignin:hover, a.btnsignout:hover { background:#666; } a.btnsigninon { background:#ccc!important; color:#666!important; outline:none; } #frmsignin { display:none; background-color:#ccc; position:absolute; top: 89px; width:215px; padding:12px; *margin-top: 5px; font-size:11px; -moz-border-radius:5px; -moz-border-radius-topleft:0; -webkit-border-radius:5px; -webkit-border-top-left-radius:0; border-radius:5px; border-top-left-radius:0; z-index:100; } #frmsignin input, #frmsignin input { display:block; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px 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; font-weight:bold; } #submitbtn:hover, #submitbtn:focus { border:1px solid #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-код формы следующий:
Войти | Личный кабинет
Войти
E-Mail Пароль
Обработка...
2. Кнопка открытия формы.
6-27. Модальное окно.
8-11. Заголовок модального окна.
В. init.js:
// Предзагрузка
img1 = new Image(16, 16);
img1.src="./img/spinner.gif";
img2 = new Image(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"
$("#submit").hide();
// Показываем крутящийся gif
$("#ajax_loading").show();
// "this" ссылается на подтверждённую форму
var str = $(this).serialize();
// -- Начало вызова AJAX --
$.ajax({
type: "POST",
url: "php/do-login.php", // Информация авторизации отправляется сюда
data: str,
success: function(msg){
$("#status").ajaxComplete(function(event, request, settings){
// Показать кнопку "Submit"
$("#submit").show();
// Спрятать крутящийся gif
$("#ajax_loading").hide();
if(msg == "OK") // LOGIN OK?
{
var login_response = "
" + "
" + "
" + "
" + "
" + "
"+ "Вы успешно авторизовались! Пожалуйста, подождите перенаправления...
"; $("a.modalCloseImg").hide(); $("#simplemodal-container").css("width","500px"); $("#simplemodal-container").css("height","120px"); $(this).html(login_response); // Ссылается на "status" // После 3 секунд редирект setTimeout("go_to_private_page()", 3000); } else // ошибка? { var login_response = msg; $("#login_response").html(login_response); } }); } }); // -- Конец вызова AJAX -- return false; }); }); function go_to_private_page() { window.location = "php/private.php"; // Личная страница пользователя }
Г. do-login.php: обработчик ajax-запроса
$config = array(); $config["email"] = "[email protected]"; $config["password"] = "demo123"; error_reporting(E_ALL ^ E_NOTICE); //отобразить все ошибки, кроме notice // Инициализация сессии session_id(); session_start(); header("Cache-control: private"); // IE 6 FIX if($_POST["action"] == "user_login") { $post_email = $_POST["email"]; $post_password = $_POST["password"]; // проверяем логин и пароль if($post_email == $config["email"] && $post_password == $config["password"]) { // Всё правильно? регистрируем сессию и перенаправляем пользователя к его "Личному кабинету" $username = $post_email; $_SESSION["username"] = $username; if($_POST["remember_me"]) { // устанавливаем cookies на месяц 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" } else { $auth_error = " Данные авторизации неверные. "; echo $auth_error; } }Г. private.php: страница, к которой доступ только после авторизации.
Include "config.php";//если есть соотвествующие куки, то устанавливается сессия, что пользователь авторизован // Проверка, авторизован ли пользователь if(!isSet($_SESSION["username"])) { header("Location: /modal.html"); exit; } echo " Личная страница Приветствую, "; echo $_SESSION["username"]." | Выйти Это ваша личная страница ";
Д. config.php:
Error_reporting(E_ALL ^ E_NOTICE); session_start(); // Старт сессии header("Cache-control: private"); // IE 6 FIX // always modified header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // 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"); // ---------- LOGIN INFO ---------- // $config_username = "demo"; $config_password = "demo123"; $cookie_name = "siteAuth"; $cookie_time = (3600 * 24 * 30); // 30 дней if(!$_SESSION["username"]) { include_once "autologin.php"; }
E. autologin.php:
If(isSet($cookie_name)) { // Check if the cookie exists if(isSet($_COOKIE[$cookie_name])) { parse_str($_COOKIE[$cookie_name]); // Make a verification if(($usr == $config_username) && ($hash == md5($config_password))) { // Register the session $_SESSION["username"] = $config_username; } } }
З. logout.php:
Include "config.php"; if(isSet($_SESSION["username"])) { unset($_SESSION["username"]); if(isSet($_COOKIE[$cookie_name])) { // remove "site_auth" cookie setcookie ($cookie_name, "", time() - $cookie_time); } header("Location: modal.html"); exit; }
К. stylesheet.css:
Html, body { padding: 0; border: 0px none; font-family: Verdana; font-size: 11px; } /* Label */ label { width: 80px; padding-left: 20px; margin: 5px; float: left; text-align: left; } /* Input text */ input { margin: 5px; padding: 0px; float: left; border: 1px solid #cdcdcd; background-color: white; -moz-border-radius: 2px; } br { clear: left; } .textbox { border: 1px solid #999999; border-top-color: #CCCCCC; border-left-color: #CCCCCC; color: #333333; font: 90% Verdana, Helvetica, Arial, sans-serif; font-size: 11px; } h1 { font-size: 17px; } div { font-family: Verdana; font-size: 11px; } /* "Login" Button */ #submit { margin: 5px; padding: 0px; float: left; width: 50px; background-color: white; } #notification_error { color: red; height: auto; padding: 4px; text-align: center; } #login_response { overflow: auto; } #ajax_loading { display: none; font-size: 12px; font-family: Tahoma; } #logged_in { padding: 5px; margin: 23px 0 100px 43px; padding: 5px; text-align: center; width: 400px; } #status { margin-top: 20px; width: 310px; }
Л. basic.css:
/* Overlay */ #simplemodal-overlay {background-color:#aaaaaa; cursor:wait;} /* Container */ #simplemodal-container {height:180px; width: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; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; left:-18px; cursor:pointer;} #simplemodal-container #basicModalContent {padding:8px;}
- Ставим курсор в первое поле формы.
Чтобы не заставлять пользователя бегать глазами и мышкой по странице в поисках поля, куда нужно вводить текст, мы можем автоматически устанавливать там курсор. А главное, что это делается очень просто, а им - приятно.
А. HTML-код формы следующий:
Второе поле Первое поле Третее поле
4. в это поле будет установлен фокус Б. добавить следующий js:
Function setFocus() { /*устанавливаем фокус на нужное поле*/ document.form_find.find_fio.select(); document.form_find.find_fio.focus(); }
Наша задача состоит в том, чтобы сделать формы регистрации и авторизации такими же милыми и приятными, как, скажем, стюардессы. Надеюсь, мои примеры будут полезными и станут основой для создания ваших собственных шедевров формостроения.
В сети Twitter Вы можете наблюдать работу страницы с чистым и простеньким дизайном. Посмотрите на правую верхнюю часть страницы, там Вы увидите кнопку авторизации в систему, нажав на которую, вы увидите формы для заполнения данных. Сегодня мы расскажем Вам о том, как сделать подобный эффект на собственном сайте. На самом деле, это очень просто. К тому же, это поможет Вам сохранить место на странице, и прибавит ощущения комфорта Вашим посетителям. В этой статье мы пошагово расскажем Вам о том, как работает вся эта система, а еще это руководство будет полезным для тех, кто желает изучить jQuery . Вперед!
Код HTML
Для начала нужно начать с кода HTML. HTML-код очень простенький - он содержит в себе тэг «a», который идет вместе с тэгом «fieldset», за счет которого отображается форма.
Просто скопируйте это в код новой страницы:
Have an account? Sign in
Username or email
Password
Remember me
Forgot your password?
Код 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, за счет которого можно будет отображать и прятать форму в момент клика по кнопке авторизации, даже если клик будет произведен вне формы логина.
$(document).ready(function() {
$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
});
Согласно коду, представленному выше, когда посетитель кликает по кнопке авторизации, запускается новая функция. Сначала отображается форма логина (заключенная в тэг «filedset»), затем ссылка, заключенная в класс «.signin», добавляет еще один класс «menu-open», за счет которого сменяется фоновое изображение.
Еще одно событие в этом коде заключается в том, что когда посетители кликают не по форме логина, а где-то на странице – то форма сама закрывается. Другими словами, класс «menu-open» снимается с ссылки с классом «.signin» и возвращает ей первоначальное фоновое изображение.
Что касается подсказок?
$(function() {
$("#forgot_username_link").tipsy({gravity: "w"});
});
Мы обычно советуем использовать плагин для jQuery – tipsy
. Содержимое tooltip-а представляет собой то, что написано в атрибуте «title», относящемся к ссылке. Вы можете менять позицию tooltip-а относительно востока, запада, юга или севера. Это реализуется за счет параметра «gravity», указанного в коде выше. Мы предоставляем Вам ссылку на сайт, посвященный этому плагину, там Вы сможете более подробно изучить его возможности и скачать плагин. …
В заключение
Если Вы скопировали весь код с этой статьи, пожалуйста, не меняйте структуру папок. Если Вы измените ее, то код не будет работать. Данный код является лишь примером создания выпадающей формы авторизации с помощью jQuery . Удачи в практике!
Все происходит под управлением PHP, а данные хранятся в базе данных MySQL.
В системе используется отличная выскальзывающая панель , разработанная Web-kreation .
Шаг 1 - MySQLСначала нам надо создать таблицу, которая будет содержать все данные о зарегистрированных пользователях. Код запроса доступен в файле table.sql в архиве с исходниками.
table.sql ---- Структура таблицы `tz_members`
--
CREATE TABLE `tz_members` (
`id` int(11) NOT NULL auto_increment,
`usr` varchar(32) collate utf8_unicode_ci NOT NULL default "",
`pass` varchar(32) collate utf8_unicode_ci NOT NULL default "",
`email` varchar(255) collate utf8_unicode_ci NOT NULL default "",
`regIP` varchar(15) collate utf8_unicode_ci NOT NULL default "",
`dt` datetime NOT NULL default "0000-00-00 00:00:00",
PRIMARY KEY (`id`),
UNIQUE KEY `usr` (`usr`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Мы определяем id как integer с опцией auto_increment - он будет автоматически назначаться для каждого нового зарегистрированного пользователя. Также usr определяется как unique key - в таблице не допускается существование двух записей с одинаковым именем пользователя.
Позже мы будем использовать указанные свойства в процессе регистрации, когда вводится имя пользователя.
После создания таблицы нужно заполнить переменные для соединения с вашей базой данных в файле connect.php , чтобы можно было запустить код на вашем сервере.
Шаг 2 - XHTMLСначала, нам нужно встроить форму Web-creation в нашу страницу.
demo.phpВыскальзывающая панель jQuery
Решение по регистрации/входу пользователей на сайт
Вход для зарегистрированных пользователей
Имя пользователя:
Пароль:
Запомнить меня
Еще не зарегистрировались? Вводите данные!
Имя пользователя:
Email:
Пароль будет отправлен Вам по почте.
Для зарегистрированных пользователей
Демонстрационные данные
Перейти на страницу пользователя
Выйти из системы
- Здравствуйте !
Закрыть панель
В нескольких местах в коде встречаются операторы PHP, которые проверяют определены ли $_SESSION["usr"] или $_SESSION["id"] . Они имеют значения true только в случае если посетитель страницы зарегистрированный пользователь, что позволяет нам показывать скрытый контент для зарегистрированных посетителей.
После формы мы размещаем остальное содержимое страницы.
Выскальзывающая панель jQuery
Простое управление регистрацией с использованием PHP и jQuery
Какой-то текст...
В коде нет ничего особенного.
Шаг 3 - PHPТеперь будем конвертировать форму в завершенную систему регистрации и входа. Для того, чтобы решить поставленную задачу нужно будет кое-что, кроме обычного кода PHP. Весь код разделен на две части.
Если Вы планируете что-нибудь добавить, то лучше всего разделить все на несколько отдельных файлов и включать их по мере необходимости. Такой подход помогает разрабатывать большие проекты и при этом повторно использовать код в различных частях сайта.
Вот как это реализовано здесь.
demo.php define("INCLUDE_CHECK",true);require "connect.php";
require "functions.php";
// Данные два файла могут быть включены только если определено INCLUDE_CHECK
session_name("tzLogin");
// Запуск сессии
session_set_cookie_params(2*7*24*60*60);
// Определяет период жизни куки на две недели
session_start();
if($_SESSION["id"] && !isset($_COOKIE["tzRemember"]) && !$_SESSION["rememberMe"])
{
// Если вы вошли в систему, но у вас нет куки tzRemember (рестарт браузера)
// и вы не отметили чекбокс Запомни меня:
$_SESSION = array();
session_destroy();
// Удаляем сессию
}
if(isset($_GET["logoff"]))
{
$_SESSION = array();
session_destroy();
header("Location: demo.php");
exit;
}
if($_POST["submit"]=="Login")
{
// Проверяем, что запрос пришел из формы Входа
$err = array();
// Сохраняем ошибку
if(!$_POST["username"] || !$_POST["password"])
$err = "Все поля должны быть заполнены!";
if(!count($err))
{
$_POST["password"] = mysql_real_escape_string($_POST["password"]);
$_POST["rememberMe"] = (int)$_POST["rememberMe"];
// Подготавливаем все данные
$row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr="{$_POST["username"]}" AND pass="".md5($_POST["password"])."""));
if($row["usr"])
{
// Если все в порядке, то входим в систему
$_SESSION["usr"]=$row["usr"];
$_SESSION["id"] = $row["id"];
$_SESSION["rememberMe"] = $_POST["rememberMe"];
// Сохраняем некоторые данные в сессии
setcookie("tzRemember",$_POST["rememberMe"]);
// Создаем куки tzRemember
}
else $err="Ошибочное имя пользователя или/и пароль!";
}
if($err)
$_SESSION["msg"]["login-err"] = implode("
",$err);
// Сохраняем сообщение об ошибке в сессии
header("Location: demo.php");
exit;
}
Здесь куки tzRemember выступает как контрольный элемент для определения, что надо обеспечить выход из системы пользователю, который не отметил чекбокс “Запомнить меня”. Если куки отсутствует (по причине рестарта браузера) и посетитель не отметил опцию "запомнить меня" мы удаляем сессию.
Сессия сама по себе будет оставаться активной в течении двух недель (так установлено в параметре session_set_cookie_params ).
А вот и вторая часть demo.php .
Else if($_POST["submit"]=="Register")
{
// Если запрос отправлен из формы Регистрации
$err = array();
if(strlen($_POST["username"])32)
{
$err="Имя пользователя должно быть длиной от 3 до 32 символов!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["username"]))
{
$err="Имя пользователя содержит недопустимые символы!";
}
if(!checkEmail($_POST["email"]))
{
$err="Ваш email адрес неправильный!";
}
if(!count($err))
{
// Если нет ошибок
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1,100000)),0,6);
// Сгенерируем случайный пароль
$_POST["email"] = mysql_real_escape_string($_POST["email"]);
$_POST["username"] = mysql_real_escape_string($_POST["username"]);
// подготавливаем данные
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
VALUES(
"".$_POST["username"]."",
"".md5($pass)."",
"".$_POST["email"]."",
"".$_SERVER["REMOTE_ADDR"]."",
NOW()
)");
if(mysql_affected_rows($link)==1)
{
send_mail("demo-test@сайт",
$_POST["email"],
"Демонстрация системы регистрации - генерация пароля",
"Ваш пароль: ".$pass);
$_SESSION["msg"]["reg-success"]="Мы отправили вам email с вашим новым паролем!";
}
else $err="Данное имя пользователя уже используется!";
}
if(count($err))
{
$_SESSION["msg"]["reg-err"] = implode("
",$err);
}
header("Location: demo.php");
exit;
}
$script = "";
if($_SESSION["msg"])
{
// Скрипт показывает выскальзывающую панель на странице загрузки
$script = "
$(function(){
$("div#panel").show();
$("#toggle a").toggle();
});
";
}
Сохраняем все определенные ошибки в массиве $err , который позже присваивается переменной $_SESSION . Таким образом сохраняется доступ к нему после перенаправления браузера.
На некторых сайтах может быть получено предупреждение, когда отправляется форма или при следующем обновлении страницы, что данные уже были отправлены. Это может быть проблемой, так как ведет к дублированию регистраций и лишней нагрузке на сервер.
Мы используем функцию header, чтобы предотвратить ошибку с помощью перенаправления браузера на туже страницу. Таким образом обновляется вид страницы без того, что браузер распознает это как запрос из формы. В результате происходит обновление страницы и нет пересылки данных.
Но так как мы используем $_SESSION для хранения всех обнаруженных ошибок, то очень важно, чтобы мы сбрасывали все переменные, как только ошибка будет показана пользователю. В противном случае она будет отображена на каждом виде страницы.
Также используется дополнительный скрипт, который показывает панель на странице загрузки, так что сообщение видно пользователю.
Шаг 4 - CSS
Выскальзывающая панель использует свой собственный файл со стилями. Таким образом нам остается только создать стиль для нашей страницы.
demo.css body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{/* Сброс правил */
margin:0px;
padding:0px;
}
body{
color:#555555;
font-size:13px;
background: #eeeeee;
font-family:Arial, Helvetica, sans-serif;
width: 100%;
}
h1{
font-size:28px;
font-weight:bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
letter-spacing:1px;
}
h2{
font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:normal;
letter-spacing:1px;
padding-left:2px;
text-transform:uppercase;
white-space:wrap;
margin-top:4px;
color:#888888;
}
#main p{
padding-bottom:8px;
}
.clear{
clear:both;
}
#main{
width:800px;
/* Центрируем по середине страницы */
margin:60px auto;
}
.container{
margin-top:20px;
background:#FFFFFF;
border:1px solid #E0E0E0;
padding:15px;
/* Скругленные углы */
-moz-border-radius:20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
}
.err{
color:red;
}
.success{
color:#00CC00;
}
a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
.tutorial-info{
text-align:center;
padding:10px;
} Шаг 5 - jQuery
Выскальзываюзая панель имеет свой файл jQuery.
demo.phpВ первой строке включается библиотека jQuery из CDN Google. Затем следует заплатка для IE6 PNG для элементов прозрачности. Затем включается скрипт панели
Переменная $script показывает панель на странице загрузки при необходимости.
В этом уроке мы создадим стильную форму авторизации на сайте, вы можете её найти в Futurico UI Pro , созданном Владимиром Кудиновым. Для создания формы мы будем использовать CSS3 и jQuery.
Шаг 1 - HTML-разметкаНачнем с создания HTML-разметки. Создадим форму с четырьмя input-ами (имя пользователя, пароль, чекбокс и кпонка "submit") флажок мы обернем в тег span, который мы будем использовать для стилизации этого флажка. Затем обернем форму и заголовок в тег DIV и назначим ему класс "login-form".
Login Form
remember
Сначала удалим все поля, отступы, границы и т.д. из элементов, которые мы будем использовать.
Login-form,
.login-form
h1,
.login-form
span,
.login-form
input,
.login-form
label {
margin
:
0
;
padding
:
0
;
border
:
0
;
outline
:
0
;
}
Затем зададим стили для контейнера формы. Мы добавим относительное позиционирование, фиксированную ширину и высоту, цвет фона, закругленные углы и тени.
Login-form
{
position
:
relative
;
width
:
200px
;
height
:
200px
;
padding
:
15px
25px
0
25px
;
margin-top
:
15px
;
cursor
:
default
;
background-color : #141517 ;
Webkit-border-radius:
5px
;
-moz-border-radius:
5px
;
border-radius:
5px
;
Webkit-box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.2)
,
inset
0px
1px
1px
0px
rgb
(0
,
0
,
0
)
;
-moz-box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.2)
,
inset
0px
1px
1px
0px
rgb
(0
,
0
,
0
)
;
box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.2)
,
inset
0px
1px
1px
0px
rgb
(0
,
0
,
0
)
;
}
Чтобы создать стрелку, мы будем использовать селектор :before .
Login-form
:before
{
position
:
absolute
;
top
:
-12px
;
left
:
10px
;
width
:
0px
;
height
:
0px
;
content
:
""
;
border-bottom
:
10px
solid
#141517
;
border-right
:
10px
solid
#141517
;
border-top
:
10px
solid
transparent
;
border-left
:
10px
solid
transparent
;
}
Добавим некоторые стили для заголовка формы (цвет, шрифт и размер, и т.д.).
Login-form
h1 {
line-height
:
40px
;
font-family
:
"Myriad Pro"
,
sans-serif
;
font-size
:
22px
;
font-weight
:
normal
;
color
:
#e4e4e4
;
}
Сначала зададим основные стили для input-ов.
line-height
:
14px
;
margin
:
10px
0
;
padding
:
6px
15px
;
border
:
0
;
outline
:
none
;
font-family
:
Helvetica,
sans-serif
;
font-size
:
12px
;
font-weight
:
bold
;
text-shadow
:
0px
1px
1px
rgba(255
,
255
,
255
,
.2)
;
Webkit-border-radius:
26px
;
-moz-border-radius:
26px
;
border-radius:
26px
;
Webkit-transition:
all .15s ease-in-out;
-moz-transition:
all .15s ease-in-out;
-o-transition:
all .15s ease-in-out;
transition:
all .15s ease-in-out;
}
Затем мы зададим стили для полей ввода логина и пароля. Мы добавим градиентный серый фон и тени. Мы также добавим фиксированную ширину, равную 170px, и цвет для текста.
Login-form
input[
type=
text
]
,
.login-form
input[
type=
password]
,
.js
.login-form
span {
color
:
#686868
;
width
:
170px
;
Webkit-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
;
-moz-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
;
box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
;
background
:
#989898
;
background
:
-moz-linear-gradient(top
,
#ffffff
0%
,
#989898
100%
)
;
background
:
-webkit-gradient(linear,
left
top
,
left
bottom
,
color-stop(0%
,
#ffffff
)
,
color-stop(100%
,
#989898
)
)
;
background
:
-webkit-linear-gradient(top
,
#ffffff
0%
,
#989898
100%
)
;
background
:
-o-linear-gradient(top
,
#ffffff
0%
,
#989898
100%
)
;
background
:
-ms-linear-gradient(top
,
#ffffff
0%
,
#989898
100%
)
;
background
:
linear-gradient(top
,
#ffffff
0%
,
#989898
100%
)
;
}
При наведении курсора мыши на эти поля мы будем изменять их тени.
Login-form
input[
type=
text
]
:hover
,
.login-form
input[
type=
password]
:hover
{
-webkit-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
,
0px
0px
5px
rgba(255
,
255
,
255
,
.5)
;
-moz-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
,
0px
0px
5px
rgba(255
,
255
,
255
,
.5)
;
box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
,
0px
0px
5px
rgba(255
,
255
,
255
,
.5)
;
}
Для активного состояния мы изменим CSS3 градиент на немного более светлый
Login-form
input[
type=
text
]
:focus
,
.login-form
input[
type=
password]
:focus
{
background
:
#e1e1e1
;
background
:
-moz-linear-gradient(top
,
#ffffff
0%
,
#e1e1e1
100%
)
;
background
:
-webkit-gradient(linear,
left
top
,
left
bottom
,
color-stop(0%
,
#ffffff
)
,
color-stop(100%
,
#e1e1e1
)
)
;
background
:
-webkit-linear-gradient(top
,
#ffffff
0%
,
#e1e1e1
100%
)
;
background
:
-o-linear-gradient(top
,
#ffffff
0%
,
#e1e1e1
100%
)
;
background
:
-ms-linear-gradient(top
,
#ffffff
0%
,
#e1e1e1
100%
)
;
background
:
linear-gradient(top
,
#ffffff
0%
,
#e1e1e1
100%
)
;
}
Расположим кнопку справа, для этого зададим ей float:right.
Login-form
input[
type=
submit]
{
float
:
right
;
cursor
:
pointer
;
color : #445b0f ;
Webkit-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
-moz-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
}
При наведении мыши изменим тени, а в активном состоянии - удалим их.
Login-form
input[
type=
submit]
:hover
{
-webkit-box-shadow:
inset
1px
1px
3px
0px
rgba(255
,
255
,
255
,
.8)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.6)
;
-moz-box-shadow:
inset
1px
1px
3px
0px
rgba(255
,
255
,
255
,
.8)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.6)
;
box-shadow:
inset
1px
1px
3px
0px
rgba(255
,
255
,
255
,
.8)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.6)
;
}
Login-form
input[
type=
submit]
:active
{
-webkit-box-shadow:
none
;
-moz-box-shadow:
none
;
box-shadow:
none
;
}
Добавим зеленый градиент для кнопки.
Login-form
input[
type=
submit]
,
.js
.login-form
span.checked
:before
{
background
:
#a5cd4e
;
background
:
-moz-linear-gradient(top
,
#a5cd4e
0%
,
#6b8f1a
100%
)
;
background
:
-webkit-gradient(linear,
left
top
,
left
bottom
,
color-stop(0%
,
#a5cd4e
)
,
color-stop(100%
,
#6b8f1a
)
)
;
background
:
-webkit-linear-gradient(top
,
#a5cd4e
0%
,
#6b8f1a
100%
)
;
background
:
-o-linear-gradient(top
,
#a5cd4e
0%
,
#6b8f1a
100%
)
;
background
:
-ms-linear-gradient(top
,
#a5cd4e
0%
,
#6b8f1a
100%
)
;
background
:
linear-gradient(top
,
#a5cd4e
0%
,
#6b8f1a
100%
)
;
}
Теперь начинается самая трудная часть, потому что мы не можем изменять вид флажков с помощью CSS, так, как мы изменяли вид других полей формы.
Самый простой способ, который я нашел, это заменить флажок тегом span.
Это будет работать следующим образом: сначала мы спрячем флажок и зададим такие стили для тега span, чтобы он выглядел как флажок, а затем мы будем обновлять этот флажок (отмечен/не отмечен) с помощью jQuery.
Поскольку у некоторых пользователей отключен JavaScript, нужно добавить резервный вариант. Для этого мы будем добавлять "js" класс в тег body при помощи jQuery. Таким образом, если JavaScript будет включен, класс "js" будет добавлен к тегу body при загрузки страницы, а если JavaScript отключен, то класс не будет добавлен. Так что только пользователи с поддержкой JavaScript будут видеть стилизованный флажок.
Сначала мы спрячем флажок.
.js
.login-form
input[
type=
checkbox]
{
position
:
fixed
;
left
:
-9999px
;
}
Затем мы разместим в нужном нам месте тег span.
.login-form
span {
position
:
relative
;
margin-top
:
15px
;
float
:
left
;
}
Затем добавим некоторые стили для тега span (ширину, высоту, границу и др.).
.js
.login-form
span {
width
:
16px
;
height
:
16px
;
cursor
:
pointer
;
Webkit-border-radius:
2px
;
-moz-border-radius:
2px
;
border-radius:
2px
;
}
Чтобы создать состояние "checked", в span мы вставим маленький квадрат и поместим его в центре.
.js
.login-form
span.checked
:before
{
content
:
""
;
position
:
absolute
;
top
:
4px
;
left
:
4px
;
width
:
8px
;
height
:
8px
;
Webkit-box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
inset
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
-moz-box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
inset
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
inset
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
}
Тег label мы разместим справа от флажка и добавим некоторые основные стили (шрифт, цвет и т.д.).
.login-form
label {
position
:
absolute
;
top
:
1px
;
left
:
25px
;
font-family
:
sans-serif
;
font-weight
:
bold
;
font-size
:
12px
;
color
:
#e4e4e4
;
}
Все стили, которые имеют класс "js" в начале, будут применяться только если включена поддержка JavaScript.
Сначала мы подключим последнюю версию библиотеки jQuery, используя Google API, если вы хотите, вы можете разместить её на своем собственном сервере, это ваш выбор. Затем добавьте следующий код в нижней части HTML-файла, перед закрывающим тегом .
<
script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
>
<
script>
$(document)
.ready
(function
()
{
// Check if JavaScript is enabled
$("body"
)
.addClass
("js"
)
;
// Make the checkbox checked on load
$(".login-form span"
)
.addClass
("checked"
)
.children
("input"
)
.attr
("checked"
,
true
)
;
// Click function
$(".login-form span"
)
.on
("click"
,
function
()
{
if
($(this
)
.children
("input"
)
.attr
("checked"
)
)
{
$(this
)
.children
("input"
)
.attr
("checked"
,
false
)
;
$(this
)
.removeClass
("checked"
)
;
}
else
{
$(this
)
.children
("input"
)
.attr
("checked"
,
true
)
;
$(this
)
.addClass
("checked"
)
;
}
}
)
;
}
)
;
Вначале мы добавим класс "js" в тег body.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом