Registrační a autorizační formuláře Jquery. Vytvoření skvělého registračního systému pomocí PHP, MySQL a jQuery

V tomto článku se podíváme na registraci krok za krokem pomocí jQuery.

Pokud registrace na vašem webu vyžaduje vyplnění několika desítek polí, je velmi iracionální je umístit na jednu stránku. Uživatel je totiž velmi líný tvor a nebude chtít všechna tato pole vyplňovat.

Alternativní možností je rozdělit registraci do několika kroků. To okamžitě generuje mnoho pozitivních ohlasů - vždyť při zahájení provádění kroků má uživatel nejčastěji touhu je dokončit.

Logické je také rozdělení registrace do logických bloků – kontaktní údaje, adresa, osobní údaje a podobně.

Pro postupnou registraci není potřeba vytvářet několik formulářů a odesílat data samostatně na server. Mnohem pohodlnější je umístit vše do jednoho formuláře, ale ukazovat uživateli na každém kroku jen určitou část formuláře. Přesně taková je logika v našem příkladu.

Kromě logiky stojí za zvážení, že zpočátku je vidět pouze odkaz "Vpřed"/"Další krok", a v posledním kroku to není vidět, ale je to vidět "Zadní" A "Registrace".

Podívejme se na samotný příklad:

Strana

Krok 1

Přihlásit se:

E-mailem:

Heslo:

Krok 2

Název:

Příjmení:

Stáří:

Krok 3

Země:

Město:

Ulice:

Zpět Další krok

body ( margin:0; ) /* Obecný styl je přes */ 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; )

Skript zodpovědný za přepínání kroků umístíme do js/steps_registration.js, nezapomeňte zahrnout také knihovnu jQuery:

$(document).ready(function() ( // Počkejte, až se stránka načte var steps = $("form").children(".step"); // najděte všechny kroky formuláře $(steps) .show(); / / zobrazení prvního kroku var current_step = 0; // nastavení aktuálního kroku $("a.next").click(function())( // Klikněte na událost na odkaz "Další krok", pokud (current_step == steps.length-2) ( // kontrola, zda další krok bude poslední $(this).hide(); // skryje odkaz "Další krok" $("form input").show( ); // zobrazení tlačítka "Registrace" ) $(" a.back").show(); // zobrazení odkazu "Zpět" current_step++; // zvýšení počítadla aktuálního snímku changeStep(current_step); // změnit krok )); $("a.back").click(function( )( // Klikněte na událost na malém obrázku if (current_step == 1) ( // zkontrolujte, zda je předchozí krok prvním $(toto ).hide(); // skryje odkaz "Zpět" ) $("vstup formuláře") .hide(); // skryje tlačítko "Registrace" $("a.next").show(); // zobrazit odkaz "Další krok" current_step-; // snížení počítadla aktuálního snímku changeStep(current_step);// změna kroku)); function changeStep(i) ( // kroková změna funkce $(kroky).hide(); // skrytí všech kroků $(kroky[i]).show(); // zobrazení aktuálního ) ));

Kód pro odesílání PHP zde psát nebudeme, protože to není pro tuto lekci zcela relevantní. Za zmínku stojí pouze to, že dopis je zaslán na adresu uvedenou v prvním kroku formuláře. V každém případě si můžete stáhnout demo soubory a přesvědčit se sami.

Rozhodli jsme se doplnit o některé příklady publikované na Habré, abyste se o některých dozvěděli " inovativní techniky„zlepšení registračních a autorizačních formulářů.

Zjednodušujeme registrační formuláře

Takže pár triků:

• není třeba duplikovat zadání hesla;

Abychom uživateli usnadnili život (proč to dobře ukazuje Google), je lepší vytvořit jedno pole a zaškrtávací políčko, které odstraní „masku“ - to vše se provádí pomocí malého kódu javascript.

// // //

1. Knihovna jQuery.

2-7. inicializace na prvku.

B. HTML kód formuláře je následující:

Přihlašovací heslo:

5-6. Viditelnost těchto polí přepíná skript pomocí zaškrtávacího políčka.

B.init.js

$(document).ready(function())( $("#testpassword1").showPassword(); $("#testpassword").showPassword(".checker", ( text: "Vlastní zaškrtávací políčko", název: " showmypass" )); ));

G.styles.css

Tělo (skupina písem: Arial, Helvetica, patka, bezpatková; ) forma ( okraj: 15px 0; výplň: 15px; pozadí: #ccc; barva: #000; rám: 1px plný #aaa; šířka: 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 : obojí; displej: blok; okraj: 1px tečkovaný #2d2d2d; barva: #2d2d2d; pozadí: průhledné; šířka: 230px; velikost písma: 0,8 em; okraj: 20px 0 0 0; )

• Je lepší automaticky vyplnit pole na základě zadaných údajů;

Čím méně uživatel potřebuje zadat, tím lépe. Některá pole lze vyplnit na základě předchozích, již zadaných údajů. Můžete například vyplnit pole „město“ načtením a zpracováním hodnoty z pole „index“. Jednoduchý požadavek Ajaxu a je hotovo. Pomocí AJAX získat údaje o městě a kraji z PSČ.

A. Knihovny zařazujeme do ‹záhlaví›:

1. Knihovna jQuery.
2. Hlavní scénář.

B. HTML kód formuláře je následující:

PSČ Město Země

1.Pole, do kterého se má zadat PSČ.

B. zip_city.js:

Funkce fillcitystate(controlname)( var zipcode = trim(controlname.value); //trim spaces if(zipcode.length!=5)( //check length return false; ) var zipstring = ""; xmlhttp = new XMLHttpRequest() ; xmlhttp.open("GET", "php/zip_city.php?zip=" + PSČ, true); //odeslat požadavek na php xmlhttp.onreadystatechange=function())( //při obdržení výsledku if (xmlhttp .readyState= =4)( var zipstring = xmlhttp.responseText; if (zipstring!="Chyba")( var ziparray = zipstring.split("|"); document.getElementById("txtCity").value = ziparray; / /nastavte hodnoty pro pole města document.getElementById("txtCountry").value = ziparray; //nastavte hodnoty pro pole země ) ) ) xmlhttp.send(null); ) //funkce oříznutí mezery trim( s) ( var l=0; var r=s.délka -1; while(l< s.length && s[l] == " ") { l++; } while(r >l && s[r] == " ") ( r-=1; ) return s.substring(l, r+1); )

D. zip_city.php: obsluha požadavku ajax.

Require_once("db.php"); $db_table = "město_zip"; //výchozí návratová hodnota $returnval = "Chyba"; //získání parametru GET $zipcode = $_GET["zip"]; //předzpracování if (strlen($zipcode)>5)( $PSČ = substr($PSČ, 0, 5); ) if (strlen($PSČ)!=5)( die ($returnval); ) //příjem hodnoty ​​z databáze $query = "SELECT * FROM ($db_table) WHERE zip="($zipcode)""; $resultval = mysql_query($query) or die("Nelze spustit dotaz:Query: ".$query.".mysql_error($conn)); $počet rad = mysql_num_rows($vysledek); if ($rowcount==1)( $row = mysql_fetch_array($resultval); $returnval = $row["zip"]."|".ucwords(strtolower($row["city"]))."|" .$row["country"]; //ve skutečnosti generuje úspěšnou odpověď ) echo $returnval;

D. db.php: konfigurace připojení k databázi.

//nastavení připojení k databázi $dbhost = "localhost"; $dbusername = "root"; $dbpass = ""; $db_name = "login_blogu"; $conn = mysql_connect($dbhost, $dbusername, $dbpass) or die("Nelze se připojit k databázovému serveru MySQL:".mysql_error()); $db = mysql_select_db($db_name, $conn) or die("Nelze otevřít databázi:".mysql_error($conn));

E. Vytvoření databázové tabulky:

VYTVOŘIT TABULKU, POKUD NEEXISTUJE `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 ;

• ve vstupním poli můžete automaticky nahradit;

Některá pole vyžadují omezenou sadu vstupních hodnot. Uživatel může například zadat dva znaky, zobrazit seznam zemí začínajících těmito písmeny a snadno vybrat to, které potřebuje. Navíc ve jménu své vlasti určitě nebude dělat chyby. Automatické dokončování AJAX pod jQuery.

A. Připojte se v ‹záhlaví›:

1. Knihovna jQuery.
2. Autocomplete skript pro jQuery.
3. Hlavní scénář.

B. HTML kód formuláře je následující:

Země

1. Pole, do kterého musíte začít zadávat název země.

V.init.js:

Varianty, a; jQuery(function())( options = (serviceUrl:"./php/autocomplete.php" ); /*zadejte adresu souboru obslužného programu*/ a = $("#query").autocomplete(options); / *přiřadit objekt automatického doplňování pomocí id="query"*/ ));

D. autocomplete.php: obsluha požadavku ajax

If(isset($_GET["dotaz"]) && (!empty($_GET["dotaz"])))( required_once("db.php"); $db_table = "system_country"; //název databázové tabulky $ dotaz = $_GET["dotaz"]; //dotaz z pole formuláře $variants = ""; $q = "SELECT `name_en` FROM `($db_table)` WHERE `name_en` REGEXP "^($query)( . *)" GROUP BY `name_en`"; /*hledejte podle prvních zadaných znaků*/ $res = mysql_query($q) or die("Nelze spustit dotaz:Dotaz: ".$q."".mysql_error($ conn) ); /*získání výsledku dotazu*/ if(mysql_num_rows($res)>0)( while($row = mysql_fetch_row($res))( $variants = """.$row."""; / *vyplňte možnosti pole*/ ) $variants = implode(",",$variants); /*zadejte všechny možnosti oddělené čárkami do řádku*/ /*vytvořte odpověď*/ $request = "( dotaz:"" .$query."", návrhy:[".$variants."] )"; echo $request; ) )

D. Vytvoření databázové tabulky:

DROP TABLE IF EXISTS `system_country`s; CREATE TABLE `system_country` (`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) výchozí "0", `nezávislý` tinyint(1) výchozí "1", PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

G. styles.css:

Autocomplete-w1 ( background:url(/autocomplete/img/shadow.png) bez opakování vpravo dole; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* Oprava IE6: */ _background :none; _margin:0; ) .autocomplete ( border:1px solid #999; background:#FFF; kurzor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px - 6px; /* Specifické pro IE6: */ _height:350px; _margin:0; _overflow-x:hidden; ) .autocomplete .selected ( background:#F0F0F0; ) .autocomplete div ( padding:2px 5px; white-space:nowrap; ) .autocomplete silné ( font-weight:normal; color:#3399FF; )

• Proč zadávat data dvakrát?

Mnoho internetových obchodů používá vícefázové objednávkové formuláře s poli pro platbu a dodací adresu. Jejich význam je často stejný. Proč nenabídnout uživateli duplikování hodnot již zadaných polí jedním kliknutím? Technika je softwarově jednoduchá a můžete ji použít různé případy, kde je implikována pravděpodobnost opakování hodnot.

A. Připojte se v ‹záhlaví›:

1.Knihovna JQuery.

2. jQuery Select Plugin.

3. hlavní scénář.

B. HTML kód formulářů je následující:

Jméno: Příjmení: E-mail: Země: Vyberte USA Kanada Kopírovat podrobnosti o doručení Křestní jméno: Příjmení: E-mail: Země: Vyberte USA Kanada

Platební údaje.

14. Zaškrtávací políčko Kopírovat.

V.init.js:

//když se stránka načte $(document).ready(function() ( //když je zaškrtávací políčko aktivováno nebo deaktivováno $("#copyaddress").click(function() ( // pokud je aktivováno if ($(" #copyaddress") .is(":checked")) ( //pro každé vstupní pole $("#shipping_fields input", ":visible", document.body).each(function(i) ( //kopírování hodnot ​​z platebních polí // do odpovídajících doručovacích polí $(this).val($("#billing_fields input").eq(i).val()); )); //nefunguje s rozbalovacími nabídkami , takže použijeme funkce pluginu var bcountry = $( "#bcountry").val(); $("#scountry").selectOptions(bcountry); ) else ( //pokud je zaškrtávací políčko deaktivováno //pro každou vstupní pole $("#shipping_fields input", ":visible", document.body).each(function(i) ( //vymazání datových polí doručení $(this).val(""); )); $(" #scountry").selectOptions(""); ) )) ; ));

• Zdá se, že lidi už nebaví číst captcha :)

Sami vás asi nebaví číst nečitelné znaky z captcha a následně je zadávat. Smilujme se nad uživateli, ale nenechme projít roboty. Chcete-li to provést, můžete se uchýlit k několika technikám, zvažme jednu z nich. Honeypot Captcha přístup – na formuláři vytvoříme pole, které je neviditelné pro uživatele, ale viditelné pro bota. Kontrolou této hodnoty můžeme zachytit neopatrné spammery, aniž by to způsobilo potíže skutečným lidem. Vliv captcha na konverzní poměr.

A. HTML kód formuláře je následující:

Jméno Příjmení E-mail Skryté pole. Pokud jste jej vyplnili, jste robot

B. přidejte následující js:

Function check() ( if(document.form_find.body.value)( console.log("POZOR!!! BOT NA STRÁNCE!!!"); ) )

Zjednodušení autorizačních formulářů

Autorizační proces je, obrazně řečeno, když osoba „pozdraví“ stránku. Ve středověku lidé ve slušných domech zdravili lidi několika úklonami a klaněními. My ale půjdeme s dobou a postaráme se o to, aby na pozdrav stačilo jen jedno vřelé podání ruky. Usnadňujeme přihlášení na stránky.

• Necháme uživatele na stránce, kde se přihlásil;

Na výběr jsou dvě možnosti: rozevírací formulář a modální okno. Rozbalovací formulář zabírá pouze malou oblast stránky, což je snadná a rychlá možnost použití.

A. Knihovny zařazujeme do ‹záhlaví›:

3. Hlavní scénář.

B. HTML kód formuláře je následující:

Přihlášení Heslo Pamatovat si mě Pro autorizaci zadejte své přihlašovací jméno: login a heslo: heslo

4. Tlačítko pro otevření formuláře.

7-22. Samotná forma.

19. Zaškrtávací políčko, které vynutí instalaci cookies na velmi dlouhou dobu.

23. Místo pro zprávu.

V. jqeasy.dropdown.js:

$(document).ready(function() ( /*hlavní funkce*/ $(".btnsignin").click(function(e) ( /*když se klikne na tlačítko "Přihlásit"*/ e.preventDefault(); $ ("#frmsignin").toggle("fast",function() ( /*přepíná viditelnost formuláře*/ $("#username").focus(); /*přesune vstupní kurzor do přihlašovacího pole */ )); $ (this).toggleClass("btnsigninon"); /*přepíná třídu na tlačítku pro změnu zobrazení*/ $("#msg").empty(); )); $(". btnsignin").mouseup(function() ( return false; )); $(document).mouseup(function(e) ( /*při uvolnění myši*/ if($(e.target).parents("#) frmsignin").length==0) ( / *není na jednom z objektů formuláře*/ $(".btnsignin").removeClass("btnsigninon"); /*odstranit formulář a vrátit jej tak, jak byl*/ $ ("#frmsignin").hide("fast"); ) ; )); $("#signin").ajaxForm(( beforeSubmit: validate, /*check first*/ success: function(data) ( /*when přijetí odpovědi od obsluhy*/ if (data=="OK") ( /*pokud dorazila v pořádku*/ $("#frmsignin").text("Přihlášeno!"); /*odeslat textové upozornění* / $("#frmsignin").delay(800).fadeOut(400); $("#signbtn").html("Konec"); /*změňte tlačítko ukončení*/ ) else ( $("#msg").html(data); $("#uživatelské jméno").focus(); ) ) )); )); function validate(formData, jqForm, options) ( /*procedura ověření pro zadaná data, obsahuje zpracování chybového výstupu*/ var form = jqForm; var un = $.trim(form.username.value); var pw = $.trim( forma .password.value); var unReg = /^(3,20)$/; var pwReg = /^(6,20)$/; var hasError = false; var errmsg = ""; if (!un) ( errmsg = "Zadejte své přihlašovací údaje:

"; hasError = true; ) else if(!unReg.test(un)) ( errmsg = " Přihlašovací jméno musí být dlouhé 3 - 20 znaků (a-z, 0-9, _). "; hasError = true; ) if (! pw) ( errmsg += "Zadejte heslo"; hasError = true; ) else if(!pwReg.test(pw)) ( errmsg += " Heslo musí být dlouhé 6 - 20 znaků (a-z, 0-9, !, @ , #, $, %, &, *, (,), _). "; hasError = true; ) if (!hasError) ( $("#msg").html(" požadavek... "); ) else ( $("#msg").html(errmsg); return false; ) )

G. dropdown.php:

If(($_POST["username"]=="login") && ($_POST["password"]=="heslo"))( echo "OK"; )else( echo "Neplatné přihlašovací jméno nebo heslo"; )

D. styl.css:

Body( padding:20px; font:12px Verdana, Geneva, bezpatkové; barva:#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 ( pozadí:#666; ) a.btnsigninon ( pozadí:#ccc!důležité; barva:#666!důležité; obrys: 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; šířka: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; kurzor:ukazatel; ) .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; )

Modální okno soustředí veškerou pozornost na sebe a zároveň umožňuje umístit na formulář Dodatečné informace nebo popis.

A. Knihovny zařazujeme do ‹záhlaví›:

4. Hlavní scénář.

6. Základní styly.

7. Základní styly pro modální okno.

B. HTML kód formuláře je následující:

Přihlásit | Osobní oblast Přihlašovací e-mail Heslo Léčba...

2. Tlačítko pro otevření formuláře.

6-27. Modální okno.

8-11. Název modálního okna.

V.init.js:

// Preload img1 = new Image(16, 16); img1.src="./img/spinner.gif"; img2 = nový obrázek(220, 19); img2.src="./img/ajax-loader.gif"; // Když je DOM připraven $(document).ready(function())( // Spusťte MODAL BOX, pokud kliknete na odkaz pro přihlášení $("#login_link").click(function())( $("#login_form) ").modal() ; )); // Když je formulář odeslán $("#stav > formulář").submit(funkce())( // Skryje tlačítko "Odeslat" $("#odeslat"). hide(); // Zobrazit rotující gif $ ("#ajax_loading").show(); // "toto" odkazuje na odeslaný formulář var str = $(this).serialize(); // -- Spustit AJAX call -- $.ajax(( typ: "POST ", url: "php/do-login.php", // Sem jsou odeslány informace o autorizaci data: str, success: function(msg)( $("#stav" ).ajaxComplete(function(event, request, settings)( // Zobrazit tlačítko "Odeslat" $("#submit").show(); // Skrýt rotující gif $("#ajax_loading").hide() ; if(msg == "OK") // PŘIHLÁŠENÍ OK? ( var login_response = " " + " " + " " + " " + " " + " "+ "Úspěšně jste se přihlásili! Čekejte prosím na přesměrování... "; $("a.modalCloseImg").hide(); $("#simplemodal-container").css("width","500px"); $("#simplemodal-container" ").css("height","120px"); $(this).html(login_response); // Odkazuje na "stav" // Po 3 sekundách přesměrování setTimeout("go_to_private_page()", 3000); ) else // chyba? ( var login_response = msg; $("#login_response").html(login_response); ) )); ) )); // -- Konec volání AJAX -- return false; )); )) ; function go_to_private_page() ( window.location = "php/private.php"; // Osobní stránka uživatele)

G. do-login.php: obsluha požadavku ajax

$config = pole(); $config["email"] = " [e-mail chráněný]"; $config["password"] = "demo123"; error_reporting(E_ALL ^ ​​​​E_NOTICE); //zobrazí všechny chyby kromě upozornění // Inicializace relace session_id(); session_start(); header("Cache-control: private " ); // IE 6 FIX if($_POST["action"] == "user_login") ( $post_email = $_POST["email"]; $post_password = $_POST["password"]; // zkontrolujte login a heslo if($post_email == $config["email"] && $post_password == $config["password"]) ( // Je vše v pořádku? Zaregistrujte relaci a přesměrujte uživatele na jeho "Osobní účet" $ username = $post_email; $_SESSION["username"] = $username; if($_POST["remember_me"]) ( // nastavení souborů cookie na měsíc setcookie ("remember_me", true, (time() + TIME_DIFF) + (3600 * 24 * 30 )); setcookie ("info", $user_id.",".md5($heslo), (time() + TIME_DIFF) + (3600 * 24 * 30)); ) echo "OK" ; // odeslání úspěšné odpovědi pro "init.js" ) else ( $auth_error = "Autorizační data jsou nesprávná."; echo $auth_error; ) )

D. private.php: stránka, která je přístupná pouze po autorizaci.

Zahrňte "config.php";//pokud existují příslušné soubory cookie, vytvoří se relace, že je uživatel autorizován // Kontrola, zda je uživatel autorizován if(!isSet($_SESSION["username"])) ( header( "Umístění: /modal .html"); exit; ) echo "Osobní stránka Dobrý den, "; echo $_SESSION["username"]." | Exit Toto je vaše osobní stránka ";

D.config.php:

Error_reporting(E_ALL ^ ​​​​E_NOTICE); session_start(); // Spuštění záhlaví relace("Cache-control: private"); // IE 6 FIX // vždy upravená hlavička("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"); // ---------- INFORMACE O PŘIHLÁŠENÍ ---------- // $config_username = "demo"; $config_password = "demo123"; $cookie_name = "siteAuth"; $cookie_time = (3600 * 24 * 30); // 30 dní if(!$_SESSION["username"]) ( include_once "autologin.php"; )

E. autologin.php:

If(isSet($cookie_name)) ( // Zkontrolujte, zda soubor cookie existuje if(isSet($_COOKIE[$cookie_name])) ( parse_str($_COOKIE[$cookie_name]); // Proveďte ověření if(($usr = = $config_username) && ($hash == md5($config_password))) ( // Zaregistrujte relaci $_SESSION["username"] = $config_username; ) ) )

Z. logout.php:

Zahrnout "config.php"; if(isSet($_SESSION["username"])) ( unset($_SESSION["username"]); if(isSet($_COOKIE[$cookie_name])) ( // odstranění souboru cookie "site_auth" ($cookie_name, "", time() - $cookie_time); ) header("Location: modal.html"); exit; )

K. stylesheet.css:

Html, tělo ( padding: 0; border: 0px žádné; font-family: Verdana; font-size: 11px; ) /* Label */ label ( width: 80px; padding-left: 20px; margin: 5px; float: left ; text-align: left; ) /* Vstupní 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 , bezpatkové; font-size: 11px; ) h1 (font-size: 17px; ) div ( font-family: Verdana; font-size: 11px; ) /* Tlačítko "Přihlásit se" */ #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; šířka: 400px; ) #status ( margin-top: 20px; width: 310px; )

L. basic.css:

/* Překrytí */ #simplemodal-overlay (barva pozadí:#aaaaaa; kurzor:čekej;) /* Kontejner */ #simplemodal-container (výška:180px; šířka:300px; barva-pozadí:#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; pozice:absolutně; nahoře:-15px; vlevo:-18px; kurzor:ukazatel;) #simplemodal-container #basicModalContent (padding:8px;)

• Umístěte kurzor do prvního pole formuláře.

Abychom uživatele nenutili přejíždět očima a myší po stránce hledat pole, kam potřebuje zadat text, můžeme tam automaticky umístit kurzor. A hlavní je, že se to dělá velmi jednoduše a baví je to.

A. HTML kód formuláře je následující:

Druhé pole První pole Třetí pole

4. Na toto pole bude nastaveno zaměření B. Přidejte následující js:

Funkce setFocus() ( /*nastavit fokus na požadované pole*/ document.form_find.find_fio.select(); document.form_find.find_fio.focus(); )

Závěr

Naším cílem je, aby registrační a přihlašovací formuláře byly stejně pěkné a příjemné jako třeba letušky. Doufám, že mé příklady budou užitečné a stanou se základem pro vytváření vašich vlastních mistrovských děl tvarování.

V sítě Twitter Můžete vidět stránku pracovat s čistým a jednoduchým designem. Podívejte se vpravo nejlepší část stránce, tam se Vám zobrazí tlačítko pro přihlášení do systému, kliknutím na které uvidíte formuláře pro vyplnění údajů. Dnes vám prozradíme, jak podobný efekt vytvořit na vlastním webu. Je to vlastně velmi jednoduché. Navíc vám to pomůže ušetřit místo na stránce a dodat návštěvníkům pocit pohodlí. V tomto článku vám krok za krokem prozradíme, jak celý tento systém funguje a tento návod se bude hodit i těm, kteří se chtějí jQuery naučit. Vpřed!

HTML kód

Nejprve musíte začít s HTML kódem. HTML kód je velmi jednoduchý – obsahuje značku „a“, která se doplňuje se značkou „fieldset“, díky které se formulář zobrazí.

Stačí to zkopírovat do kódu nová stránka:

Mít účet? Přihlásit se


Uživatelské jméno nebo email

Heslo

Zapamatuj si mě

Zapomněli jste heslo?

Zapomněl jste své uživatelské jméno?

CSS kód

Budete potřebovat pomocí CSS k definování autorizačního tlačítka a přihlašovacího formuláře. Níže uvedený kód provádí přesně tuto funkci.

Stačí zkopírovat tento kód do svého css soubor, nebo jej přidejte do HTML kódu, kde definujete styl. Tyto kódy definují tlačítko přihlášení.

#kontejner (
šířka:780px;
okraj:0 auto;
poloha: relativní;
}

#obsah (
šířka:520px;
min-výška:500px;
}
a:link, a:navštívené (
barva:#27b;
text-decoration:none;
}
a:hover (
text-decoration:podtržení;
}
obrázek (
border-width:0;
}
#topnav (
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
}
#topnav a.signin (
pozadí:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
váha-fontu:tučné;
barva:#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 (
pozadí:#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!důležité;
}

a.signin(
poloha:relativní;
margin-left:3px;
}
a.signin span(
background-image:url("images/toggle_down_light.png");
background-repeat:no-repeat;
pozadí-pozice:100% 50%;
padding:4px 16px 6px 0;
}
#topnav a.menu-open (
pozadí:#ddeef6!důležité;
barva:#666!důležité;
obrys:žádný;
}
#small_signup (
display:inline;
float:none;
line-height:23px;
margin:25px 0 0;
šířka:170px;
}
a.signin.menu-open span (
background-image:url("images/toggle_up_dark.png");
barva:#789;
}

A pak přichází definice přihlašovacího formuláře:

#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;
displej:žádný;
background-color:#ddeef6;
poloha:absolutní;
šířka:210px;
z-index:100;
border:1px transparentní;
text-align:left;
padding:12px;
nahoře: 24,5px;
vpravo: 0px;
margin-top:5px;
margin-right: 0px;
*pravý okraj: -1px;
barva:#789;
font-size:11px;
}

#signin_menu input, #signin_menu input (
displej:blok;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #ACE;
font-size:13px;
margin:0 0 5px;
padding:5px;
šířka:203px;
}
#signin_menu p (
okraj:0;
}
#signin_menu a (
barva:#6AC;
}
#signin_menu label (
font-weight:normal;
}
#signin_menu p.pamatovat (
padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete (
jasné:obě;
margin:5px 0;
}
#signin_menu p a (
barva:#27B!důležité;
}
#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;
barva:#fff;
text-shadow:0 -1px 0 #39d;
padding:4px 10px 5px;
font-size:11px;
margin:0 5px 0 0;
váha-fontu:tučné;
}
#signin_submit::-moz-focus-inner (
výplň:0;
hranice:0;
}
#signin_submit:hover, #signin_submit:focus (
background-position:0 -5px;
kurzor:ukazatel;
}

Je čas pracovat s javascriptem

Zdálo by se, HTML kódy a CSS jsou poměrně složité a matoucí, ale v javascriptu je vše velmi jednoduché. Stačí zkopírovat tento javascriptový kód, který vám umožní zobrazit a skrýt formulář po kliknutí na tlačítko přihlášení, i když je kliknutí provedeno mimo přihlašovací formulář.

$(document).ready(function() (

$(".signin").click(function(e) (
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});

$("fieldset#signin_menu").mouseup(function() (
vrátit false
});
$(document).mouseup(funkce(e) (
if($(e.target).parent("a.signin").length==0) (
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});

});

Podle výše uvedeného kódu, když návštěvník klikne na tlačítko přihlášení, nová vlastnost. Nejprve se zobrazí přihlašovací formulář (uzavřený v tagu „filedset“), poté odkaz vložený do třídy „.signin“ přidá další třídu „menu-open“, díky které se změní obrázek na pozadí.

Další událostí v tomto kódu je, že když návštěvníci nekliknou na přihlašovací formulář, ale někde na stránce, formulář se sám zavře. Jinými slovy, třída "menu-open" je odstraněna z odkazu s třídou ".signin" a vrátí ji do původního obrázku na pozadí.

Co se týče tipů?

$(funkce() (
$("#forgot_username_link").tipsy((gravitace: "w"));
});

Obvykle doporučujeme používat plugin jQuery – tipy. Obsahem popisku je to, co je napsáno v atributu „title“ spojeném s odkazem. Můžete změnit polohu popisku vzhledem k východu, západu, jihu nebo severu. To je implementováno pomocí parametru „gravity“ specifikovaného v kódu výše. Poskytujeme vám odkaz na webovou stránku věnovanou tomuto pluginu, kde si jeho možnosti můžete podrobněji prostudovat a plugin si stáhnout. ...

Konečně

Pokud jste zkopírovali celý kód z tohoto článku, neměňte strukturu složek. Pokud jej změníte, kód nebude fungovat. Tento kód je pouze příkladem vytvoření přihlašovacího rozevíracího formuláře pomocí jQuery. Hodně štěstí při cvičení!

Vše běží pod PHP a data jsou uložena v databázi MySQL.

Systém využívá vynikající posuvný panel vyvinutý společností Web-kreation.

Krok 1 – MySQL

Nejprve musíme vytvořit tabulku, která bude obsahovat všechny údaje o registrovaných uživatelích. Kód dotazu je k dispozici v souboru table.sql ve zdrojovém archivu.

table.sql --
-- Struktura tabulky `tz_members`
--
CREATE TABLE `tz_members` (
`id` int(11) NOT NULL auto_increment,
`usr` varchar(32) Collate utf8_unicode_ci NOT NULL výchozí "",
`pass` varchar(32) collate utf8_unicode_ci NOT NULL výchozí "",
`email` varchar(255) Collate utf8_unicode_ci NOT NULL výchozí "",
`regIP` varchar(15) Collate utf8_unicode_ci NOT NULL výchozí "",
`dt` datetime NOT NULL výchozí "0000-00-00 00:00:00",
PRIMÁRNÍ KLÍČ (`id`),
UNIKÁTNÍ KLÍČ `usr` (`usr`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

ID definujeme jako celé číslo s možností auto_increment - bude automaticky přiděleno každému novému registrovanému uživateli. Usr je také definován jako jedinečný klíč - v tabulce nesmí existovat dva záznamy se stejným uživatelským jménem.

Později použijeme zadané vlastnosti během procesu registrace při zadání uživatelského jména.

Po vytvoření tabulky je potřeba vyplnit proměnné pro připojení k vaší databázi v souboru connect.php, abyste mohli spustit kód na vašem serveru.

Krok 2 – XHTML

Nejprve musíme do naší stránky vložit formulář pro tvorbu webu.

demo.php




Posuvný panel jQuery
Řešení pro registraci uživatele/přihlášení na stránku





Přihlášení pro registrované uživatele

uživatelské jméno:

Heslo:

Zapamatuj si mě







Ještě nejste zaregistrováni? Zadejte své údaje!

uživatelské jméno:

E-mailem:

Heslo vám bude zasláno poštou.





Pro registrované uživatele

Demo data

Přejděte na stránku uživatele

Odhlásit se

• Ahoj !



• 
  
  Zavřít panel
  

Na několika místech v kódu jsou příkazy PHP, které kontrolují, zda je definováno $_SESSION["usr"] nebo $_SESSION["id"]. Oni mají skutečné hodnoty pouze v případě, že je návštěvníkem stránky registrovaný uživatel, což nám umožňuje zobrazovat registrovaným návštěvníkům skrytý obsah.

Za formulář umístíme zbytek obsahu stránky.

Posuvný panel jQuery
Snadná správa registrace pomocí PHP a jQuery

Nějaký text...

V kódu není nic zvláštního.

Krok 3 – PHP

Nyní formulář převedeme na kompletní registrační a přihlašovací systém. K vyřešení problému budete potřebovat něco jiného než běžný PHP kód. Celý kód je rozdělen do dvou částí.

Pokud plánujete něco přidat, je nejlepší rozdělit vše do několika samostatné soubory a zapněte je podle potřeby. Tento přístup pomáhá vyvíjet velké projekty a zároveň znovu používat kód v různých částech webu.

Zde je návod, jak je implementován.

demo.php define("INCLUDE_CHECK",true);
vyžadovat "connect.php";
vyžadovat "functions.php";
// Tyto dva soubory mohou být zahrnuty, pouze pokud je definována INCLUDE_CHECK
session_name("tzLogin");
// Spusťte relaci
session_set_cookie_params(2*7*24*60*60);
// Definuje životnost souboru cookie na dva týdny
session_start();
if($_SESSION["id"] && !isset($_COOKIE["tzRemember"]) && !$_SESSION["rememberMe"])
{
// Pokud jste přihlášeni, ale nemáte soubor cookie tzRemember (restartování prohlížeče)
// a nezaškrtli jste políčko Zapamatovat si mě:
$_SESSION = pole();
session_destroy();
//Odstranit relaci
}
if(isset($_GET["logoff"]))
{
$_SESSION = pole();
session_destroy();
header("Umístění: demo.php");
výstup;
}
if($_POST["submit"]=="Přihlášení")
{
// Zkontrolujte, zda požadavek přišel z přihlašovacího formuláře
$err = pole();
// Uložte chybu
if(!$_POST["uživatelské jméno"] || !$_POST["heslo"])
$err = "Všechna pole musí být vyplněna!";
if(!count($err))
{

$_POST["heslo"] = mysql_real_escape_string($_POST["heslo"]);
$_POST["rememberMe"] = (int)$_POST["rememberMe"];
// Připravte všechna data
$row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr="($_POST["username"])" AND pass="".md5($_POST["heslo"]).""")) ;
if($row["usr"])
{
// Pokud je vše v pořádku, tak se přihlaste
$_SESSION["usr"]=$row["usr"];
$_SESSION["id"] = $řádek["id"];
$_SESSION["rememberMe"] = $_POST["rememberMe"];
// Uložení některých dat v relaci
setcookie("tzRemember",$_POST["rememberMe"]);
// Vytvoří soubor cookie tzRemember
}
else $err="Neplatné uživatelské jméno a/nebo heslo!";
}
if($err)
$_SESSION["msg"]["login-err"] = implode("
",$err);
// Uložte chybovou zprávu v relaci
header("Umístění: demo.php");
výstup;
}

Soubor cookie tzRemember zde funguje jako ovládací prvek, který určuje, zda se má odhlásit uživatel, který nezaškrtl políčko „Zapamatovat si mě“. Pokud soubor cookie chybí (z důvodu restartu prohlížeče) a návštěvník nezaškrtl možnost „zapamatovat si mě“, relaci smažeme.

Samotná relace zůstane aktivní po dobu dvou týdnů (jak je nastaveno v parametru session_set_cookie_params).

A tady je druhá část demo.php.

Else if($_POST["submit"]=="Registrovat")
{
// Pokud je požadavek odeslán z Registračního formuláře
$err = pole();
if(strlen($_POST["uživatelské jméno"])32)
{
$err="Uživatelské jméno musí mít 3 až 32 znaků!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["username"]))
{
$err="Uživatelské jméno obsahuje neplatné znaky!";
}
if(!checkEmail($_POST["e-mail"]))
{
$err="Váš emailová adresašpatně!";
}
if(!count($err))
{
// Pokud nejsou žádné chyby
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1.100000)),0.6);
// Vygeneruje náhodné heslo
$_POST["e-mail"] = mysql_real_escape_string($_POST["e-mail"]);
$_POST["username"] = mysql_real_escape_string($_POST["username"]);
// připravte data
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
HODNOTY(
"".$_POST["uživatelské jméno"]."",
".md5($pass).",
"".$_POST["e-mail"]."",
"".$_SERVER["REMOTE_ADDR"]."",
NYNÍ()
)");
if(mysql_affected_rows($link)==1)
{
send_mail("demo-test@site",
$_POST["e-mail"],
"Ukázka registračního systému - generování hesla",
"Vaše heslo: ".$pass);
$_SESSION["msg"]["reg-success"]="Poslali jsme vám e-mail s vaším novým heslem!";
}
else $err="Toto uživatelské jméno se již používá!";
}
if(count($err))
{
$_SESSION["msg"]["reg-err"] = implode("
",$err);
}
header("Umístění: demo.php");
výstup;
}
$script = "";
if($_SESSION["zpráva"])
{
// Skript zobrazí posuvný panel na stránce načítání
$script = "

$(funkce())(
$("div#panel").show();
$("#přepnout a").toggle();
});
";
}

Všechny definované chyby ukládáme do pole $err, které je později přiřazeno proměnné $_SESSION. Přístup k němu tak zůstane zachován i po přesměrování prohlížeče.

Některé weby mohou při odeslání formuláře nebo při příštím obnovení stránky obdržet varování, že data již byla odeslána. To může být problém, protože to vede k duplicitním registracím a zbytečnému zatížení serveru.

Abychom předešli chybě přesměrováním prohlížeče na stejnou stránku, používáme funkci záhlaví. Tím se aktualizuje zobrazení stránky, aniž by to prohlížeč rozpoznal jako požadavek formuláře. V důsledku toho se stránka obnoví a nepřenesou se žádná data.

Ale protože k ukládání všech zjištěných chyb používáme $_SESSION, je velmi důležité, abychom resetovali všechny proměnné, jakmile se chyba zobrazí uživateli. Jinak se zobrazí při každém zobrazení stránky.

Používá se také další skript, který zobrazuje panel na stránce načítání, takže uživatel vidí zprávu.

Krok 4 – CSS

Posuvný panel používá svůj vlastní soubor stylů. Takže nám nezbývá než vytvořit styl pro naši stránku.

demo.css tělo,h1,h2,h3,p,citát,malý,formulář,vstup,ul,li,ol,štítek(
/* Resetovat pravidla */
margin:0px;
padding:0px;
}
tělo(
barva:#555555;
font-size:13px;
pozadí: #eeeeee;
rodina písem:Arial, Helvetica, bezpatkové;
šířka: 100 %;
}
h1(
font-size:28px;
váha-fontu:tučné;
font-family:"Trebuchet MS",Arial, Helvetica, bezpatkové;
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:velká písmena;
white-space:wrap;
margin-top:4px;
barva:#888888;
}
#hlavní p(
padding-bottom:8px;
}
.Průhledná(
jasné:obě;
}
#hlavní(
šířka:800px;
/* Střed uprostřed stránky */
margin:60px auto;
}
.kontejner(
margin-top:20px;
pozadí:#FFFFFF;
border:1px solid #E0E0E0;
padding:15px;
/* Zaoblené rohy */
-moz-border-radius:20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
}
.chybovat(
červená barva;
}
.úspěch(
barva:#00CC00;
}
a, a:navštívené (
barva:#00BBFF;
text-decoration:none;
obrys:žádný;
}
a:hover(
text-decoration:podtržení;
}
.tutorial-info(
text-align:center;
padding:10px;
) Krok 5 – jQuery

Posuvný panel má svůj vlastní soubor jQuery.

demo.php

První řádek obsahuje knihovnu jQuery z CDN společnosti Google. Dále přichází oprava IE6 PNG pro prvky průhlednosti. Poté se skript panelu zapne

Proměnná $script v případě potřeby zobrazí panel na stránce načítání.

V tomto tutoriálu vytvoříme stylový autorizační formulář na webu, najdete jej ve Futurico UI Pro, který vytvořil Vladimir Kudinov. K vytvoření formuláře použijeme CSS3 a jQuery.

Krok 1 – Označení HTML

Začněme vytvořením značky HTML. Vytvoříme formulář se čtyřmi vstupy (uživatelské jméno, heslo, zaškrtávací políčko a tlačítko „odeslat“) a zabalíme zaškrtávací políčko do značky span, kterou použijeme ke stylizaci tohoto zaškrtávacího políčka. Dále zabalíme formulář a nadpis do tagu DIV a přiřadíme mu třídu „login-form“.

přihlašovací formulář

Pamatuj si

Krok 2 – Obecné styly

Nejprve odstraníme všechny okraje, odsazení, okraje atd. prvků, které budeme používat.

Přihlašovací formulář
.login-form h1,
.login-form span,
.vstup do přihlašovacího formuláře,
štítek .login-form (
okraj: 0;
výplň: 0;
ohraničení: 0;
obrys: 0;
}

Dále nastavíme styly pro kontejner formuláře. Přidáme relativní umístění, pevnou šířku a výšku, barvu pozadí, zaoblené rohy a stíny.

Přihlašovací formulář (
poloha: relativní;
šířka: 200px;
výška: 200px;
odsazení: 15px 25px 0 25px;
margin-top: 15px;
kurzor: výchozí;

barva pozadí : #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 ) ;
}

K vytvoření šipky použijeme volič :before.

Přihlašovací formulář :před (
pozice: absolutní;
horní: -12px;
vlevo: 10px;

šířka: 0px;
výška: 0px;
obsah : "" ;

border-bottom : 10px solid #141517 ;
border-right : 10px solid #141517 ;
border-top : 10px solid transparent ;
border-left : 10px solid transparent ;
}

Přidejme nějaké styly pro záhlaví formuláře (barva, font a velikost atd.).

Přihlašovací formulář h1 (
line-height: 40px;
font-family : "Myriad Pro" , bezpatkové ;
velikost písma: 22px;
váha písma: normální;
barva : #e4e4e4 ;
}

Krok 3 – Obecné styly pro pole formuláře

Nejprve si nastavíme základní styly pro vstupy.

výška řádku: 14px;
okraj: 10px 0;
odsazení: 6px 15px;
ohraničení: 0;
obrys: žádný;

rodina písem: Helvetica, sans-serif;
velikost písma: 12px;
váha písma: tučné;
text-shadow : 0px 1px 1px rgba(255 , 255 , 255 , .2) ;

Webkit-border-radius: 26px ;
-moz-border-radius: 26px ;
border-radius: 26px ;

Webkit-transition: všechny .15s easy-in-out;
-moz-transition: všechny .15s easy-in-out;
-o-přechod: všechny .15s easy-in-out;
přechod: všechny .15s easy-in-out;
}

Poté nastavíme styly pro vstupní pole login a heslo. Přidáme přechodové šedé pozadí a stíny. Přidáme také pevnou šířku 170px a barvu textu.

Vstup přihlašovacího formuláře[ type= text ],
.login-form input[ type= password] ,
.js .login-form span (
barva : #686868 ;
šířka: 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) ;

pozadí : #989898 ;
pozadí : -moz-linear-gradient(top , #ffffff 0 % , #989898 100 % );
background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #ffffff ) , color-stop(100% , #989898 ) );
pozadí : -webkit-linear-gradient(top , #ffffff 0 % , #989898 100 % ) ;
pozadí : -o-linear-gradient(top , #ffffff 0 % , #989898 100 % ) ;
pozadí : -ms-linear-gradient(top , #ffffff 0 % , #989898 100 % ) ;
pozadí : linear-gradient(top , #ffffff 0% , #989898 100% ) ;
}

Když na tato pole najedete myší, změníme jejich stíny.

Vstup přihlašovacího formuláře[ 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) ;
}

Pro aktivní stav změníme přechod CSS3 na mírně světlejší barvu

Vstup přihlašovacího formuláře[ typ= text ] :focus ,
.login-form input[ type= password] :focus (
pozadí : #e1e1e1 ;
pozadí : -moz-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #ffffff ) , color-stop(100% , #e1e1e1) ) ;
pozadí : -webkit-linear-gradient(top , #ffffff 0 % , #e1e1e1 100 % ) ;
pozadí : -o-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
pozadí : -ms-linear-gradient(top , #ffffff 0 % , #e1e1e1 100 % ) ;
pozadí : linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
}

Krok 4 – Tlačítko Odeslat

Umístíme tlačítko vpravo, k tomu mu dáme float:right.

Vstup přihlašovacího formuláře[ type= submit] (
plovák: pravý;
kurzor: ukazatel;

barva : #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) ;
}

Když najedete myší, změníme stíny a v aktivním stavu je odstraníme.

Vstup přihlašovacího formuláře[ 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) ;
}

Vstup přihlašovacího formuláře[ type= submit] :active (
-webkit-box-shadow: none ;
-moz-box-shadow: none ;
box-shadow: žádný ;
}

Přidáme zelený přechod pro tlačítko.

Vstup přihlašovacího formuláře[ type= submit] ,
.js .login-form span.checked :before (
pozadí : #a5cd4e ;
pozadí : -moz-linear-gradient(top , #a5cd4e 0 % , #6b8f1a 100 % ) ;
background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #a5cd4e ) , color-stop(100% , #6b8f1a ) ) ;
pozadí : -webkit-linear-gradient(top , #a5cd4e 0 % , #6b8f1a 100 % ) ;
pozadí : -o-linear-gradient(top , #a5cd4e 0%, #6b8f1a 100% ) ;
pozadí : -ms-linear-gradient(top , #a5cd4e 0 % , #6b8f1a 100 % ) ;
pozadí : linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
}

Krok 5 – Styl zaškrtávacího políčka

Nyní přichází ta těžší část, protože nemůžeme změnit vzhled zaškrtávacích políček pomocí CSS, stejně jako jsme změnili vzhled ostatních polí formuláře.

Nejjednodušší způsob, jak jsem našel, je nahradit zaškrtávací políčko tagem span.

Bude to fungovat takto: nejprve skryjeme zaškrtávací políčko a upravíme styl tagu span tak, aby vypadal jako zaškrtávací políčko, a poté toto zaškrtávací políčko (zaškrtnuté/nezaškrtnuté) aktualizujeme pomocí jQuery.

Protože někteří uživatelé mají zakázán JavaScript, musíme přidat záložní možnost. K tomu přidáme "js" třídy ve značce body pomocí jQuery. Pokud je tedy JavaScript povolen, třída „js“ bude přidána do značky body při načítání stránky, ale pokud je JavaScript zakázán, třída přidána nebude. Zaškrtávací políčko se stylem tedy uvidí pouze uživatelé s povoleným JavaScriptem.

Nejprve skryjeme zaškrtávací políčko.

.js .login-form input[ type= checkbox] (
poloha: pevná;
vlevo: -9999px;
}

Poté umístíme značku span tam, kde ji potřebujeme.

.login-form span (
poloha: relativní;
margin-top: 15px;
plavat vlevo;
}

Dále do značky span přidáme některé styly (šířka, výška, ohraničení atd.).

.js .login-form span (
šířka: 16px;
výška: 16px;
kurzor: ukazatel;

Webkit-border-radius: 2px ;
-moz-border-radius: 2px ;
border-radius: 2px ;
}

Abychom vytvořili stav „zaškrtnuto“, vložíme do rozpětí malý čtverec a umístíme jej do středu.

.js .login-form span.checked :before (
obsah : "" ;
pozice: absolutní;
nahoře: 4px;
vlevo: 4px;
šířka: 8px;
výška: 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) ;
}

Štítek umístíme napravo od zaškrtávacího políčka a přidáme základní styling (font, barvu atd.).

štítek .login-form (
pozice: absolutní;
nahoře: 1px;
vlevo: 25px;
font-family: sans-serif;
váha písma: tučné;
velikost písma: 12px;
barva : #e4e4e4 ;
}

Všechny styly, které mají na začátku třídu „js“, se použijí pouze v případě, že je povolen JavaScript.

Krok 6 – jQuery

Nejprve se připojíme Nejnovější verze Knihovna jQuery pomocí Google API, pokud chcete, můžete ji hostovat na svém vlastním serveru, je to vaše volba. Poté přidejte následující kód na konec souboru HTML před uzavírací značku.

< script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" >
< script>
$(document).ready(function() (

// Zkontrolujte, zda je povolen JavaScript
$("body" ) .addClass ( "js" ) ;

// Zaškrtněte políčko při načítání
$(".login-form span" ) .addClass ( "zaškrtnuto" ) .children ( "vstup" ) .attr ( "zaškrtnuto" , true ) ;

// Funkce kliknutí
$(".login-form span" ) .on ("kliknutí" , funkce () (

if ($(this ) .children ("vstup" ) .attr ("zaškrtnuto" ) ) (
$(this) .children ("vstup" ) .attr ("zaškrtnuto" , false ) ;
$(this).removeClass("zaškrtnuto");
}

jiný(
$(this) .children ("vstup" ) .attr ("zaškrtnuto" , true ) ;
$(this).addClass("kontrolováno");
}
} ) ;
} ) ;

Nejprve do značky body přidáme třídu „js“.

Pokud máte nějaké dotazy, doporučujeme využít naše fórum, abyste dostali odpověď co nejrychleji