Jquery obrasci za registraciju i autorizaciju. Izrada izvrsnog sustava registracije pomoću PHP-a, MySQL-a i jQueryja

U ovom ćemo članku pogledati korak po korak registraciju pomoću jQueryja.

Ako registracija na vašoj stranici zahtijeva ispunjavanje nekoliko desetaka polja, vrlo je neracionalno staviti ih na jednu stranicu. Uostalom, korisnik je vrlo lijeno stvorenje i neće htjeti ispuniti sva ta polja.

Alternativna opcija je podijeliti registraciju u nekoliko koraka. To odmah generira mnogo pozitivnih odgovora - uostalom, kada započne s izvođenjem koraka, korisnik najčešće ima želju da ih završi.

Također je logično razdvojiti registraciju na logičke blokove - kontakt podatke, adresu, osobne podatke i tako dalje.

Za registraciju korak po korak nema potrebe kreirati nekoliko obrazaca i zasebno slati podatke na poslužitelj. Puno je praktičnije smjestiti sve u jednu formu, ali pri svakom koraku korisniku prikazati samo određeni dio forme. Upravo je to logika u našem primjeru.

Osim logike, vrijedi uzeti u obzir da je u početku samo poveznica vidljiva "Naprijed"/"Sljedeći korak", a na zadnjem koraku se ne vidi, ali se vidi "Leđa" I "Registracija".

Pogledajmo sam primjer:

Stranica

Korak 1

Prijaviti se:

Email:

Lozinka:

Korak 2

Ime:

Prezime:

Dob:

3. korak

Zemlja:

Grad:

Ulica:

Natrag Sljedeći korak

body ( margin:0; ) /* Opći stil je završen */ 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; )

Postavit ćemo skriptu odgovornu za promjenu koraka u js/steps_registration.js, ne zaboravite također uključiti jQuery biblioteku:

$(document).ready(function() ( // Pričekajte da se stranica učita var steps = $("form").children(".step"); // pronađite sve korake obrasca $(steps) .show(); / / prikaži prvi korak var current_step = 0; // postavi trenutni korak $("a.next").click(function())( // Kliknite događaj na vezi "Sljedeći korak" ako (current_step == steps.length-2) ( // provjeri hoće li sljedeći korak biti posljednji $(this).hide(); // sakriti vezu "Sljedeći korak" $("form input").show( ); // prikaži gumb "Registracija" ) $(" a.back").show(); // prikaži vezu "Natrag" current_step++; // povećaj brojač trenutnog slajda changeStep(current_step); // promijenite korak )); $("a.back").click(function( )( // Kliknite događaj na maloj slici if (current_step == 1) ( // provjerite je li prethodni korak prvi $(ovaj ).hide(); // sakrij vezu "Natrag" ) $("form input") .hide(); // sakrij gumb "Registracija" $("a.next").show(); // prikaži vezu "Sljedeći korak" current_step--; // smanji brojač trenutnog slajda changeStep(current_step);// promijeni korak)); funkcija changeStep(i) ( // funkcija promjene koraka $(steps).hide(); // sakrivanje svih koraka $(steps[i]).show(); // prikaži trenutni ) ));

Ovdje nećemo pisati PHP kod za slanje jer nije u potpunosti relevantan za ovu lekciju. Samo je vrijedno napomenuti da se pismo šalje na adresu navedenu u prvom koraku obrasca. U svakom slučaju, možete preuzeti demo datoteke i uvjeriti se sami.

Odlučili smo nadopuniti nekim primjerima objavljenim na Habréu kako biste mogli saznati više o nekim " inovativne tehnike"poboljšanje obrazaca za registraciju i autorizaciju.

Pojednostavljujemo obrasce za registraciju

Dakle, nekoliko trikova:

• nema potrebe za dupliranjem unosa lozinke;

Da biste olakšali život korisniku (zašto to učiniti, dobro je prikazano u ovom od Googlea), bolje je napraviti jedno polje i potvrdni okvir koji će ukloniti "masku" - sve se to radi pomoću malog javascript koda.

// // //

1. jQuery biblioteka.

2-7 (prikaz, ostalo). inicijalizacija na elementu.

B. HTML kôd obrasca je sljedeći:

Lozinka:

5-6. Vidljivost ovih polja mijenja skripta pomoću potvrdnog okvira.

B.init.js

$(document).ready(function())( $("#testpassword1").showPassword(); $("#testpassword").showPassword(".checker", ( tekst: "Prilagođeni potvrdni okvir", naziv: " showmypass " )); ));

G.styles.css

Tijelo (obitelj-fontova: Arial, Helvetica, serif, sans-serif;) obrazac (margina: 15px 0; padding: 15px; pozadina: #ccc; boja: #000; obrub: 1px solid #aaa; širina: 500px; ) form label.form ( float: lijevo; širina: 120px; display: block; ) form input#testpassword1, form input#testpassword ( float: left; display: block; ) .clear ( clear: both; ) div.checker ( clear : oboje; prikaz: blok; obrub: 1px isprekidan #2d2d2d; boja: #2d2d2d; pozadina: prozirna; širina: 230px; veličina fonta: 0,8em; margina: 20px 0 0 0; )

• Bolje je automatski popuniti polja na temelju unesenih podataka;

Što manje korisnik mora unijeti, to bolje. Neka polja moguće je popuniti na temelju prethodnih, već unesenih podataka. Na primjer, polje "grad" možete popuniti čitanjem i obradom vrijednosti iz polja "indeks". Jednostavan Ajax zahtjev i gotovo je. Korištenje AJAX-a dobiti podatke o gradu i regiji iz poštanskog broja.

A. Knjižnice uključujemo u ‹zaglavlje›:

1. jQuery biblioteka.
2. Glavna skripta.

B. HTML kôd obrasca je sljedeći:

Poštanski broj Grad Država

1.Polje u koje se upisuje poštanski broj.

B. zip_city.js:

Funkcija fillcitystate(controlname)( var zipcode = trim(controlname.value); //trim spaces if(zipcode.length!=5)( //provjeri duljinu return false; ) var zipstring = ""; xmlhttp = new XMLHttpRequest() ; xmlhttp.open("GET", "php/zip_city.php?zip=" + zipcode, true); //pošalji zahtjev na php xmlhttp.onreadystatechange=function())( //prilikom primanja rezultata if (xmlhttp .readyState= =4)( var zipstring = xmlhttp.responseText; if (zipstring!="Greška")( var ziparray = zipstring.split("|"); document.getElementById("txtCity").value = ziparray; / /postavite vrijednosti za polje grada document.getElementById("txtCountry").value = ziparray; //postavite vrijednosti za polje zemlje ) ) ) xmlhttp.send(null); ) //funkcija skraćivanja prostora 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); )

D. zip_city.php: obrađivač ajax zahtjeva.

Require_once("db.php"); $db_table = "zip_city"; //zadana povratna vrijednost $returnval = "Greška"; //dobivanje GET parametra $zipcode = $_GET["zip"]; //pretprocesiranje if (strlen($zipcode)>5)( $zipcode = substr($zipcode, 0, 5); ) if (strlen($zipcode)!=5)( die ($returnval); ) //primanje vrijednosti iz baze podataka $query = "SELECT * FROM ($db_table) WHERE zip="($zipcode)""; $resultval = mysql_query($query) or die("Ne mogu pokrenuti 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"]; //zapravo, generiranje uspješnog odgovora ) echo $returnval;

D. db.php: konfiguracija veze s bazom podataka.

//postavke veze s bazom podataka $dbhost = "localhost"; $dbusername = "root"; $dbpass = ""; $db_name = "prijava na blog"; $conn = mysql_connect($dbhost, $dbusername, $dbpass) or die("Ne mogu se spojiti na MySQL poslužitelj baze podataka:".mysql_error()); $db = mysql_select_db($db_name, $conn) or die("Ne mogu otvoriti bazu podataka:".mysql_error($conn));

E. Stvaranje tablice baze podataka:

STVARAJ TABLICU AKO NE POSTOJI `zip_city` (`id` int(11) NOT NULL AUTO_INCREMENT, `zip` varchar(5) NOT NULL, `city` varchar(255) NOT NULL, `country` varchar(255) NOT NULL, PRIMARNI KLJUČ (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=41921 ;

• možete automatski zamijeniti u polju za unos;

Neka polja zahtijevaju ograničen skup ulaznih vrijednosti. Na primjer, korisnik može unijeti dva znaka, vidjeti popis zemalja koje počinju tim slovima i jednostavno odabrati onu koja mu je potrebna. Osim toga, sigurno neće griješiti u ime svoje domovine. AJAX automatsko dovršavanje pod jQueryjem.

A. Povežite se u ‹zaglavlju›:

1. jQuery biblioteka.
2. Skripta za automatsko dovršavanje za jQuery.
3. Glavna skripta.

B. HTML kôd obrasca je sljedeći:

Zemlja

1. Polje u koje trebate početi upisivati ​​naziv države.

V.init.js:

Var opcije, a; jQuery(function())( options = ( serviceUrl:"./php/autocomplete.php" ); /*navedite adresu datoteke rukovatelja*/ a = $("#query").autocomplete(options); / *dodijelite objekt za automatsko dovršavanje s id="query"*/ ));

D. autocomplete.php: rukovatelj ajax zahtjevima

If(isset($_GET["query"]) && (!empty($_GET["query"])))( require_once("db.php"); $db_table = "system_countries"; //naziv tablice baze podataka $ upit = $_GET["upit"]; //upit iz polja obrasca $variants = ""; $q = "SELECT `name_en` FROM `($db_table)` WHERE `name_en` REGEXP "^($query)( . *)" GROUP BY `name_en`"; /*traži po prvim unesenim znakovima*/ $res = mysql_query($q) or die("Ne mogu pokrenuti query:Query: ".$q."".mysql_error($ conn) ); /*dohvati rezultat upita*/ if(mysql_num_rows($res)>0)( while($row = mysql_fetch_row($res))( $variants = """.$row."""; / *ispunite opcije polja*/ ) $variants = implode(",",$variants); /*upišite sve opcije odvojene zarezima u red*/ /*formirajte odgovor*/ $request = "( query:"" .$upit."", prijedlozi:[".$varijante."] )"; echo $zahtjev; ) )

D. Stvaranje tablice baze podataka:

ISPUSTI TABLICU AKO POSTOJI `zemlje_sustava`; 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) zadano "0", `nezavisno` tinyint(1) zadano "1", PRIMARNI KLJUČ (`id`)) ENGINE=MyISAM ZADANI ZNAKOVI=utf8;

G. styles.css:

Autocomplete-w1 ( background:url(/autocomplete/img/shadow.png) bez ponavljanja dolje desno; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* IE6 popravak: */ _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; /* Specifično za IE6: */ _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; )

• Zašto dvaput unositi podatke?

Mnoge internetske trgovine koriste obrasce za narudžbe u više koraka s poljima za adrese za plaćanje i dostavu. Često su im značenja ista. Zašto ne ponuditi korisniku dupliciranje vrijednosti već unesenih polja jednim klikom? Tehnika je softverski jednostavna i možete je koristiti u različiti slučajevi, gdje se podrazumijeva vjerojatnost ponavljanja vrijednosti.

A. Povežite se u ‹zaglavlju›:

1.JQuery biblioteka.

2. jQuery Odaberite dodatak.

3. glavna skripta.

B. HTML kôd obrazaca je sljedeći:

Ime: Prezime: E-mail: Država: Odaberite SAD Kanada Podaci o isporuci kopije Ime: Prezime: E-mail: Država: Odaberite SAD Kanada

Pojedinosti o plaćanju.

14. Potvrdni okvir za kopiranje.

V.init.js:

//kada se stranica učita $(dokument).ready(function() ( //kada je potvrdni okvir aktiviran ili deaktiviran $("#copyaddress").click(function() ( // ako je aktiviran if ($(" #copyaddress") .is(":checked")) ( //za svako polje unosa $("#shipping_fields input", ":visible", document.body).each(function(i) ( //kopiranje vrijednosti​ ​od polja plaćanja // do odgovarajućih polja isporuke $(this).val($("#billing_fields input").eq(i).val()); )); //ne radi s padajućim izbornicima , pa ćemo koristiti funkcije dodatka var bcountry = $( "#bcountry").val(); $("#scountry").selectOptions(bcountry); ) else ( //ako je potvrdni okvir deaktiviran //za svaki polje za unos $("#shipping_fields input", ":visible", document.body).each(function(i) ( //brisanje polja podataka o isporuci $(this).val(""); )); $(" #zemlja").selectOptions(""); ) )) ; ));

• Čini se da su ljudi umorni od čitanja captcha :)

Vjerojatno ste i sami umorni od čitanja nečitljivih znakova iz captcha i njihovog unosa. Imajmo milosti prema korisnicima, ali ne propuštajmo botove. Da biste to učinili, možete pribjeći nekoliko tehnika, razmotrimo jednu od njih. Honeypot Captcha pristup - kreiramo polje na obrascu koje je nevidljivo korisniku, ali vidljivo botu. Provjeravanjem ove vrijednosti možemo uhvatiti neoprezne pošiljatelje neželjene pošte bez stvaranja poteškoća stvarnim ljudima. Utjecaj captcha na stopu konverzije.

A. HTML kod za obrazac je sljedeći:

Ime Prezime E-mail Skriveno polje. Ako si ispunio, onda si bot

B. dodajte sljedeći js:

Provjera funkcije() ( if(document.form_find.body.value)( console.log("OPREZ!!! BOT NA STRANICI!!!"); ) )

Pojednostavljenje obrazaca za autorizaciju

Proces autorizacije je, slikovito rečeno, kada osoba "pozdravi" stranicu. U srednjem vijeku ljudi su u pristojnim kućama pozdravljali ljude višestrukim naklonima i klanjanjima. No mi ćemo ići u korak s vremenom i pobrinuti se da za pozdrav bude dovoljan samo jedan topli stisak ruke. Olakšavamo prijavu na stranicu.

• Ostavljamo korisnika na stranici na kojoj se ulogirao;

Postoje dvije opcije za odabir: padajući obrazac i modalni prozor. Padajući obrazac zauzima samo mali dio stranice, jednostavna i brza opcija za korištenje.

A. Knjižnice uključujemo u ‹zaglavlje›:

3. Glavna skripta.

B. HTML kôd obrasca je sljedeći:

Prijava Lozinka Zapamti me Za autorizaciju unesite svoju prijavu: prijavu i lozinku: lozinku

4. Gumb za otvaranje obrasca.

7-22 (prikaz, ostalo). Sama forma.

19. Potvrdni okvir koji prisiljava kolačiće da se instaliraju jako dugo.

23. Mjesto za poruku.

V. jqeasy.dropdown.js:

$(document).ready(function() ( /*glavna funkcija*/ $(".btnsignin").click(function(e) ( /*kada se klikne gumb "Prijava"*/ e.preventDefault(); $ ("#frmsignin").toggle("fast",function() ( /*prebacuje vidljivost obrasca*/ $("#username").focus(); /*pomiče kursor unosa u polje za prijavu */ )); $ (this).toggleClass("btnsigninon"); /*mijenja klasu na gumbu za promjenu prikaza*/ $("#msg").empty(); )); $(". btnsignin").mouseup(function() ( return false; )); $(document).mouseup(function(e) ( /*kada je miš pušten*/ if($(e.target).parents("# frmsignin").length==0) ( / *ne na jednom od objekata obrasca*/ $(".btnsignin").removeClass("btnsigninon"); /*ukloni obrazac i vrati ga kakav je bio*/ $ ("#frmsignin").hide("fast"); ) ; )); $("#signin").ajaxForm(( beforeSubmit: potvrdi, /*prvo provjeri*/ uspjeh: funkcija(podaci) ( /*kada primanje odgovora od obrađivača*/ if (data=="OK") ( /*ako je stigao OK*/ $("#frmsignin").text("Prijavljen!"); /*pošalji tekstualnu obavijest* / $("#frmsignin").delay(800).fadeOut(400); $("#signbtn").html("Izlaz"); /*promijenite gumb za izlaz*/ ) else ( $("#msg").html(data); $("#username").focus(); ) ) )); )); funkcija validate(formData, jqForm, options) ( /*procedura provjere valjanosti za unesene podatke, sadrži obradu ispisa pogreške*/ 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 = "Unesite svoju prijavu:

"; hasError = true; ) else if(!unReg.test(un)) ( errmsg = " Prijava mora imati 3 - 20 znakova (a-z, 0-9, _). "; hasError = true; ) if (! pw) ( errmsg += "Unesite svoju lozinku"; hasError = true; ) else if(!pwReg.test(pw)) ( errmsg += " Lozinka mora imati 6 - 20 znakova (a-z, 0-9, !, @ , #, $, %, &, *, (,), _). "; hasError = true; ) if (!hasError) ( $("#msg").html(" zahtjev... "); ) else ( $("#msg").html(errmsg); return false; ) )

G. dropdown.php:

If(($_POST["username"]=="login") && ($_POST["password"]=="password"))( echo "OK"; )else( echo "Nevažeća prijava ili lozinka"; )

D. 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: nijedan; ) #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; širina: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; pokazivač:pokazivač; ) .submit ( padding-top:5px; ) #msg ( color:#F00; ) #msg img ( margin-bottom:-3px; ) #msg p ( margin:5px 0; ) # msg p:posljednji-dijete ( margin-bottom:0px; ) h1( margin:0 auto; )

Modalni prozor koncentrira svu pozornost na sebe i istovremeno vam omogućuje postavljanje na obrazac Dodatne informacije ili opis.

A. Knjižnice uključujemo u ‹zaglavlje›:

4. Glavna skripta.

6. Osnovni stilovi.

7. Osnovni stilovi za modalni prozor.

B. HTML kôd obrasca je sljedeći:

Prijava | Osobni prostor Email Lozinka za prijavu Liječenje...

2. Gumb za otvaranje obrasca.

6-27 (prikaz, ostalo). Modalni prozor.

8-11 (prikaz, ostalo). Naslov modalnog prozora.

V.init.js:

// Prethodno učitaj img1 = nova slika(16, 16); img1.src="./img/spinner.gif"; img2 = nova slika(220, 19); img2.src="./img/ajax-loader.gif"; // Kada je DOM spreman $(document).ready(function())( // Pokreni MODAL BOX ako se klikne poveznica za prijavu $("#login_link").click(function())( $("#login_form ").modal() ; )); // Kada se obrazac pošalje $("#status > obrazac").submit(function())( // Sakrij gumb "Pošalji" $("#submit"). hide(); // Prikaži vrteći gif $ ("#ajax_loading").show(); // "this" se odnosi na poslani obrazac var str = $(this).serialize(); // -- Pokreni AJAX poziv -- $.ajax(( tip: "POST ", url: "php/do-login.php", // Ovdje se šalju informacije o autorizaciji data: str, uspjeh: funkcija(msg)( $("#status" ).ajaxComplete(function(event, request, settings)( // Prikaži gumb "Pošalji" $("#submit").show(); // Sakrij vrteći gif $("#ajax_loading").hide() ; if(msg == "OK") // PRIJAVA OK? ( var login_response = " " + " " + " " + " " + " " + " "+ "Uspješno ste se prijavili! Pričekajte preusmjeravanje... "; $("a.modalCloseImg").hide(); $("#simplemodal-container").css("width","500px"); $("#simplemodal-container ").css("height","120px"); $(this).html(login_response); // Odnosi se na "status" // Nakon 3 sekunde, preusmjeri setTimeout("go_to_private_page()", 3000); ) else // pogreška? ( var login_response = msg; $("#login_response").html(login_response); ) )); ) )); // -- Kraj AJAX poziva -- vrati netočno; )); )) ; funkcija go_to_private_page() ( window.location = "php/private.php"; // Korisnikova osobna stranica)

G. do-login.php: obrađivač ajax zahtjeva

$config = array(); $config["email"] = " [e-mail zaštićen]"; $config["password"] = "demo123"; error_reporting(E_ALL ^ ​​​​E_NOTICE); //prikaži sve pogreške osim obavijesti // Inicijalizacija sesije session_id(); session_start(); header("Cache-control: private " ); // IE 6 FIX if($_POST["action"] == "user_login") ( $post_email = $_POST["email"]; $post_password = $_POST["password"]; // provjerite prijava i lozinka if($post_email == $config["email"] && $post_password == $config["password"]) ( // Je li sve ispravno? Registrirajte sesiju i preusmjerite korisnika na njegov "Osobni račun" $ korisničko ime = $post_email; $_SESSION["username"] = $username; if($_POST["remember_me"]) ( // postavi kolačiće za mjesec dana setcookie ("remember_me", true, (time() + TIME_DIFF) + (3600 * 24 * 30 )); setcookie ("info", $user_id.",".md5($password), (time() + TIME_DIFF) + (3600 * 24 * 30)); ) echo "OK" ; // pošalji uspješan odgovor za "init.js" ) else ( $auth_error = "Podaci o autorizaciji nisu točni."; echo $auth_error; ) )

D. private.php: stranica kojoj se može pristupiti samo nakon autorizacije.

Uključi "config.php";//ako postoje odgovarajući kolačići, tada se uspostavlja sesija da je korisnik ovlašten // Provjera je li korisnik ovlašten if(!isSet($_SESSION["username"])) ( zaglavlje( "Lokacija: /modal .html"); exit; ) echo "Osobna stranica Pozdrav, "; echo $_SESSION["username"]." | Izlaz Ovo je vaša osobna stranica ";

D.config.php:

Error_reporting(E_ALL ^ ​​​​E_NOTICE); početak_sesije(); // Pokretanje zaglavlja sesije ("Cache-control: private"); // IE 6 FIX // uvijek modificirano zaglavlje("Zadnja izmjena: " . gmdate("D, d M Y H:i:s") . " GMT"); // HTTP/1.1 zaglavlje("Cache-Control: no-store, no-cache, must-revalidate"); zaglavlje ("Kontrola predmemorije: naknadna provjera=0, pretprovjera=0", netočno); // HTTP/1.0 zaglavlje("Pragma: bez predmemorije"); // ---------- INFO ZA PRIJAVU ---------- // $config_username = "demo"; $config_password = "demo123"; $cookie_name = "siteAuth"; $cookie_time = (3600 * 24 * 30); // 30 dana if(!$_SESSION["username"]) ( include_once "autologin.php"; )

E. autologin.php:

If(isSet($cookie_name)) ( // Provjerite postoji li kolačić if(isSet($_COOKIE[$cookie_name])) ( parse_str($_COOKIE[$cookie_name]); // Provjerite if(($usr = = $config_username) && ($hash == md5($config_password))) ( // Registrirajte sesiju $_SESSION["username"] = $config_username; ) ) )

Z. odjava.php:

Uključi "config.php"; if(isSet($_SESSION["username"])) ( unset($_SESSION["username"]); if(isSet($_COOKIE[$cookie_name])) ( // uklonite kolačić "site_auth" setcookie ($cookie_name, "", vrijeme() - $cookie_time); ) zaglavlje("Lokacija: modal.html"); izlaz; )

K. stylesheet.css:

Html, tijelo ( padding: 0; border: 0px none; font-family: Verdana; font-size: 11px; ) /* Oznaka */ label ( width: 80px; padding-left: 20px; margin: 5px; float: lijevo ; text-align: left; ) /* Unos teksta */ input ( margina: 5px; padding: 0px; float: lijevo; border: 1px solid #cdcdcd; background-color: white; -moz-border-radius: 2px; ) br ( jasno: lijevo; ) .textbox ( granica: 1px solid #999999; border-top-color: #CCCCCC; border-left-color: #CCCCCC; boja: #333333; font: 90% Verdana, Helvetica, Arial , sans-serif; veličina fonta: 11px; ) h1 (veličina fonta: 17px; ) div (familija fonta: Verdana; veličina fonta: 11px; ) /* Gumb "Prijava" */ #submit (margina: 5px ; padding: 0px; float: lijevo; width: 50px; background-color: white; ) #notification_error (boja: crvena; visina: 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; poravnanje teksta: središte; širina: 400px; ) #status ( margin-top: 20px; width: 310px; )

L. osnovni.css:

/* Prekrivanje */ #simplemodal-overlay (background-color:#aaaaaa; cursor:wait;) /* Spremnik */ #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; pozicija:apsolutna; vrh:-15px; lijevo:-18px; kursor:pokazivač;) #simplemodal-container #basicModalContent (padding:8px;)

• Postavite kursor u prvo polje obrasca.

Kako ne bismo tjerali korisnika da juri pogledom i mišem po stranici u potrazi za poljem u koje treba unijeti tekst, možemo automatski postaviti kursor tamo. A glavna stvar je da se to radi vrlo jednostavno, a oni uživaju u tome.

A. HTML kod za obrazac je sljedeći:

Drugo polje Prvo polje Treće polje

4. Na ovo polje bit će postavljen fokus B. Dodajte sljedeći js:

Funkcija setFocus() ( /*postavi fokus na željeno polje*/ document.form_find.find_fio.select(); document.form_find.find_fio.focus(); )

Zaključak

Cilj nam je da obrasci za registraciju i prijavu budu lijepi i ugodni kao, recimo, stjuardese. Nadam se da će moji primjeri biti korisni i da će postati osnova za stvaranje vlastitih remek-djela izgradnje oblika.

U Twitter mreže Možete vidjeti kako stranica radi s čistim i jednostavnim dizajnom. Pogledaj desno gornji dio stranici, tamo ćete vidjeti gumb za prijavu u sustav, klikom na koji se otvaraju obrasci za popunjavanje podataka. Danas ćemo vam reći kako stvoriti sličan učinak na vlastitoj web stranici. Zapravo je vrlo jednostavno. Osim toga, to će vam pomoći uštedjeti prostor na stranici i dodati osjećaj ugode svojim posjetiteljima. U ovom članku ćemo vam reći korak po korak kako cijeli ovaj sustav funkcionira, a ovaj vodič će također biti koristan za one koji žele naučiti jQuery. Naprijed!

HTML kôd

Prvo morate početi s HTML kodom. HTML kod je vrlo jednostavan - sadrži oznaku “a” koja ide uz oznaku “fieldset” zbog koje se forma prikazuje.

Samo kopirajte ovo u svoj kod nova stranica:

Imate račun? Prijaviti se


Korisničko ime ili email

Lozinka

Zapamti me

Zaboravili ste zaporku?

Zaboravili ste korisničko ime?

CSS kod

Trebat će vam koristeći CSS za definiranje gumba za autorizaciju i obrasca za prijavu. Kod u nastavku obavlja upravo ovu funkciju.

Samo kopirajte ovaj kod na svoj css datoteka, ili ga dodajte u HTML kod gdje definirate stil. Ovi kodovi definiraju gumb za prijavu.

#kontejner (
širina:780px;
margina:0 auto;
položaj: relativan;
}

#sadržaj (
širina:520px;
min-visina:500px;
}
a:link, a:posjećeno (
boja:#27b;
tekst-dekoracija:nema;
}
a:lebdjeti (
tekst-ukras:podcrtano;
}
slika (
širina granice:0;
}
#topnav (
padding:10px 0px 12px;
veličina fonta:11px;
line-height:23px;
poravnanje teksta: desno;
}
#topnav a.signin (
pozadina:#88bbd4;
padding:4px 6px 6px;
tekst-dekoracija:nema;
font-weight:bold;
boja:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
radijus granice:4px;
*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
*ispuna:4px 12px 6px;
}
#topnav a.signin:hover (
pozadina:#59B;
*pozadina:transparentni url("images/signin-nav-bg-hover-ie.png") bez ponavljanja 0 0;
*ispuna:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover (
*background-position:0 3px!važno;
}

a.signin(
položaj: relativno;
margin-lijevo:3px;
}
a.signin span(
background-image:url("images/toggle_down_light.png");
pozadinsko ponavljanje: bez ponavljanja;
položaj pozadine:100% 50%;
padding:4px 16px 6px 0;
}
#topnav a.menu-open (
pozadina:#ddeef6!važno;
boja:#666!važno;
obris:nema;
}
#mala_prijava (
prikaz:umetnuti;
float:nema;
line-height:23px;
margina:25px 0 0;
širina:170px;
}
a.signin.menu-open span (
background-image:url("images/toggle_up_dark.png");
boja:#789;
}

Zatim dolazi definicija obrasca za prijavu:

#izbornik_prijave (
-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;
prikaz: ništa;
boja pozadine:#ddeef6;
pozicija: apsolutna;
širina:210px;
z-indeks:100;
obrub:1px proziran;
poravnanje teksta: lijevo;
padding:12px;
vrh: 24,5 px;
desno: 0px;
margin-top:5px;
margina-desno: 0px;
*margina-desno: -1px;
boja:#789;
veličina fonta:11px;
}

#signin_menu unos, #signin_menu unos (
prikaz: blok;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #ACE;
veličina fonta:13px;
margina:0 0 5px;
padding:5px;
širina:203px;
}
#signin_menu p (
margina:0;
}
#signin_menu a (
boja:#6AC;
}
#signin_menu oznaka (
font-weight:normal;
}
#signin_menu str.zapamti (
padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete (
jasno: oboje;
margina:5px 0;
}
#signin_menu p a (
boja:#27B!važno;
}
#signin_submit (
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#39d url("images/bg-btn-blue.png") repeat-x pomicanje 0 0;
border:1px solid #39D;
boja:#fff;
text-shadow:0 -1px 0 #39d;
padding:4px 10px 5px;
veličina fonta:11px;
margina:0 5px 0 0;
font-weight:bold;
}
#signin_submit::-moz-focus-inner (
ispuna:0;
granica:0;
}
#signin_submit:lebdjeti, #signin_submit:fokus (
položaj pozadine:0 -5px;
kursor:pokazivač;
}

Vrijeme je za rad s javascriptom

Čini se da, HTML kodovi i CSS su prilično složeni i zbunjujući, ali u javascriptu je sve vrlo jednostavno. Samo kopirajte ovaj javascript kod koji će vam omogućiti da prikažete i sakrijete obrazac kada kliknete na gumb za prijavu, čak i ako je klik napravljen izvan obrasca za prijavu.

$(dokument).ready(funkcija() (

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

$("fieldset#signin_menu").mouseup(function() (
vratiti lažno
});
$(dokument).mouseup(funkcija(e) (
if($(e.target).parent("a.signin").length==0) (
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});

});

Prema gore predstavljenom kodu, kada posjetitelj klikne na gumb za prijavu, nova značajka. Najprije se prikazuje forma za prijavu (okružena u oznaku “filedset”), zatim poveznica, zatvorena u klasi “.signin”, dodaje još jednu klasu “menu-open” zbog koje se mijenja pozadinska slika.

Još jedan događaj u ovom kodu je da kada posjetitelji kliknu ne na obrazac za prijavu, već negdje na stranici, obrazac se sam zatvara. Drugim riječima, klasa "menu-open" uklanja se iz veze s klasom ".signin" i vraća je na originalnu pozadinsku sliku.

Što se tiče savjeta?

$(funkcija() (
$("#zaboravljeno_korisničko_ime_link").tipsy((gravitacija: "w"));
});

Obično preporučujemo korištenje dodatka jQuery – podsjetnik. Sadržaj opisa je ono što je napisano u atributu "title" povezanom s vezom. Možete promijeniti položaj opisa alata u odnosu na istok, zapad, jug ili sjever. Ovo se provodi pomoću parametra "gravitacije" navedenog u gornjem kodu. Nudimo vam poveznicu na web mjesto posvećeno ovom dodatku, gdje možete detaljnije proučiti njegove mogućnosti i preuzeti dodatak. ...

Konačno

Ako ste kopirali sav kod iz ovog članka, nemojte mijenjati strukturu mape. Ako ga promijenite, kôd neće raditi. Ovaj kod samo je primjer stvaranja padajućeg obrasca za prijavu pomoću jQueryja. Sretno s praksom!

Sve radi pod PHP-om, a podaci su pohranjeni u MySQL bazi podataka.

Sustav koristi izvrsnu kliznu ploču koju je razvio Web-kreation.

Korak 1 - MySQL

Prvo moramo napraviti tablicu koja će sadržavati sve podatke o registriranim korisnicima. Kôd upita dostupan je u datoteci table.sql u izvornoj arhivi.

table.sql --
-- Struktura tablice `tz_members`
--
STVARAJ TABLICU `tz_members` (
`id` int(11) NOT NULL auto_inkrement,
`usr` varchar(32) usporedi utf8_unicode_ci NIJE NULL zadano "",
`pass` varchar(32) usporedi utf8_unicode_ci NOT NULL zadano "",
`email` varchar(255) collate utf8_unicode_ci NOT NULL default "",
`regIP` varchar(15) usporedi utf8_unicode_ci NOT NULL zadano "",
`dt` datumvrijeme NIJE NULL zadano "0000-00-00 00:00:00",
PRIMARNI KLJUČ (`id`),
JEDINSTVENI KLJUČ `usr` (`usr`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Id definiramo kao cijeli broj s auto_increment opcijom - automatski će se dodijeliti svakom novom registriranom korisniku. Također, usr je definiran kao jedinstveni ključ - dva zapisa s istim korisničkim imenom ne smiju postojati u tablici.

Kasnije ćemo koristiti navedena svojstva tijekom procesa registracije kada se unese korisničko ime.

Nakon što kreirate tablicu, trebate ispuniti varijable za povezivanje s vašom bazom podataka u connect.php datoteci kako biste mogli pokrenuti kod na svom poslužitelju.

Korak 2 - XHTML

Prvo, moramo ugraditi obrazac za web-kreaciju na našu stranicu.

demo.php




jQuery klizna ploča
Rješenje za registraciju/prijavu korisnika na stranicu





Prijava za registrirane korisnike

Korisničko ime:

Lozinka:

Zapamti me







Još niste registrirani? Unesite svoje podatke!

Korisničko ime:

Email:

Lozinka će vam biti poslana poštom.





Za registrirane korisnike

Demo podaci

Idi na korisničku stranicu

Odjavite se

• Zdravo !



• 
  
  Zatvori ploču
  

Na nekoliko mjesta u kodu postoje PHP naredbe koje provjeravaju je li definirano $_SESSION["usr"] ili $_SESSION["id"]. Oni imaju prave vrijednosti samo ako je posjetitelj stranice registrirani korisnik, što nam omogućuje da registriranim posjetiteljima prikažemo skriveni sadržaj.

Nakon forme postavljamo ostatak sadržaja stranice.

jQuery klizna ploča
Jednostavno upravljanje registracijom pomoću PHP-a i jQueryja

Neki tekst...

Nema ništa posebno u kodu.

Korak 3 - PHP

Sada ćemo obrazac pretvoriti u potpuni sustav registracije i prijave. Da biste riješili problem, trebat će vam nešto drugo osim običnog PHP koda. Cijeli kod je podijeljen u dva dijela.

Ako planirate nešto dodati, najbolje je sve podijeliti na nekoliko zasebne datoteke i uključite ih prema potrebi. Ovaj pristup pomaže u razvoju velikih projekata i istodobno ponovnom korištenju koda u različitim dijelovima stranice.

Evo kako je to ovdje implementirano.

demo.php define("INCLUDE_CHECK",true);
zahtijevaju "connect.php";
zahtijevaju "functions.php";
// Ove dvije datoteke mogu biti uključene samo ako je INCLUDE_CHECK definiran
session_name("tzLogin");
// Započni sesiju
session_set_cookie_params(2*7*24*60*60);
// Definira životni vijek kolačića na dva tjedna
početak_sesije();
if($_SESSION["id"] && !isset($_COOKIE["tzRemember"]) && !$_SESSION["rememberMe"])
{
// Ako ste prijavljeni, ali nemate kolačić tzRemember (ponovno pokretanje preglednika)
// a niste označili potvrdni okvir Zapamti me:
$_SESIJA = niz();
sesija_uništi();
//Brisanje sesije
}
if(isset($_GET["odjava"]))
{
$_SESIJA = niz();
sesija_uništi();
zaglavlje("Lokacija: demo.php");
Izlaz;
}
if($_POST["submit"]=="Prijava")
{
// Provjerite je li zahtjev došao iz obrasca za prijavu
$pogreška = niz();
// Spremi pogrešku
if(!$_POST["korisničko ime"] || !$_POST["lozinka"])
$err = "Sva polja moraju biti popunjena!";
if(!count($err))
{

$_POST["lozinka"] = mysql_real_escape_string($_POST["lozinka"]);
$_POST["zapamtiMe"] = (int)$_POST["zapamtiMe"];
// Pripremite sve podatke
$row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr="($_POST["username"])" AND pass="".md5($_POST["password"]).""")) ;
if($row["usr"])
{
// Ako je sve u redu, prijavite se
$_SESSION["usr"]=$row["usr"];
$_SESSION["id"] = $row["id"];
$_SESSION["upamtiMe"] = $_POST["upamtiMe"];
// Spremite neke podatke u sesiji
setcookie("tzZapamti",$_POST["zapamtiMe"]);
// Kreirajte kolačić tzRemember
}
else $err="Nevažeće korisničko ime i/ili lozinka!";
}
ako($greška)
$_SESSION["msg"]["login-err"] = implode("
",$pogreška);
// Spremite poruku greške u sesiji
zaglavlje("Lokacija: demo.php");
Izlaz;
}

Ovdje kolačić tzRemember djeluje kao kontrolni element za određivanje treba li odjaviti korisnika koji nije označio potvrdni okvir "Zapamti me". Ako kolačić nedostaje (zbog ponovnog pokretanja preglednika), a posjetitelj nije označio opciju "zapamti me", brišemo sesiju.

Sama sesija ostat će aktivna dva tjedna (kako je postavljeno u parametru session_set_cookie_params).

A evo i drugog dijela demo.php.

Else if($_POST["submit"]=="Registracija")
{
// Ako je zahtjev poslan iz obrasca za registraciju
$pogreška = niz();
if(strlen($_POST["korisničko ime"])32)
{
$err="Korisničko ime mora imati između 3 i 32 znaka!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["korisničko ime"]))
{
$err="Korisničko ime sadrži nevažeće znakove!";
}
if(!checkEmail($_POST["email"]))
{
$err="Vaš email adresa pogrešno!";
}
if(!count($err))
{
// Ako nema grešaka
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1.100000)),0.6);
// Generirajte slučajnu lozinku
$_POST["e-pošta"] = mysql_real_escape_string($_POST["e-pošta"]);
$_POST["korisničko ime"] = mysql_real_escape_string($_POST["korisničko ime"]);
// pripremiti podatke
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
VRIJEDNOSTI(
"".$_POST["korisničko ime"]."",
"".md5($pass).",
"".$_POST["e-pošta"]."",
"".$_SERVER["REMOTE_ADDR"]."",
SADA()
)");
if(mysql_affected_rows($link)==1)
{
send_mail("demo-test@site",
$_POST["e-pošta"],
"Demonstracija sustava registracije - generiranje lozinke",
"Vaša lozinka: ".$pass);
$_SESSION["msg"]["reg-success"]="Poslali smo vam e-poruku s novom lozinkom!";
}
else $err="Ovo korisničko ime je već u upotrebi!";
}
ako(broj($greška))
{
$_SESSION["msg"]["reg-err"] = implode("
",$pogreška);
}
zaglavlje("Lokacija: demo.php");
Izlaz;
}
$skripta = "";
if($_SESSION["msg"])
{
// Skripta prikazuje kliznu ploču na stranici za učitavanje
$script = "

$(funkcija())(
$("div#panel").show();
$("#toggle a").toggle();
});
";
}

Sve definirane pogreške pohranjujemo u polje $err, koje se kasnije dodjeljuje varijabli $_SESSION. Na taj se način pristup njemu održava nakon preusmjeravanja preglednika.

Neka mjesta mogu primiti upozorenje kada se pošalje obrazac ili kada se stranica sljedeći put osvježi da su podaci već poslani. To može predstavljati problem jer dovodi do dvostrukih registracija i nepotrebnog opterećenja poslužitelja.

Koristimo funkciju zaglavlja kako bismo spriječili pogrešku preusmjeravanjem preglednika na istu stranicu. Time se ažurira prikaz stranice bez da ga preglednik prepozna kao zahtjev za obrazac. Kao rezultat toga, stranica se osvježava i podaci se ne prenose.

Ali budući da koristimo $_SESSION za pohranu svih otkrivenih pogrešaka, vrlo je važno da poništimo sve varijable čim se pogreška prikaže korisniku. Inače će se prikazati na svakom prikazu stranice.

Također se koristi dodatna skripta koja prikazuje ploču na stranici za učitavanje tako da je poruka vidljiva korisniku.

Korak 4 - CSS

Klizna ploča koristi vlastitu datoteku stilova. Dakle, sve što trebamo učiniti je stvoriti stil za našu stranicu.

demo.css body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label(
/* Poništi pravila */
margina:0px;
padding:0px;
}
tijelo(
boja:#555555;
veličina fonta:13px;
pozadina: #eeeeee;
obitelj-fontova: Arial, Helvetica, sans-serif;
širina: 100%;
}
h1(
veličina fonta:28px;
font-weight:bold;
obitelj-fontova:"Trebuchet MS",Arial, Helvetica, sans-serif;
razmak između slova:1px;
}
h2(
obitelj-fontova:"Arial Narrow",Arial,Helvetica,sans-serif;
veličina fonta:10px;
font-weight:normal;
razmak između slova:1px;
padding-left:2px;
tekst-transformacija:velika slova;
razmak: omot;
margin-top:4px;
boja:#888888;
}
#glavni p(
padding-bottom:8px;
}
.čisto(
jasno: oboje;
}
#glavni(
širina:800px;
/* Centar na sredini stranice */
margina:60px auto;
}
.spremnik(
margin-top:20px;
pozadina:#FFFFFF;
border:1px solid #E0E0E0;
padding:15px;
/* Zaobljeni kutovi */
-moz-border-radius:20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
radijus granice:20px;
}
.err(
boja: crvena;
}
.uspjeh(
boja:#00CC00;
}
a, a:posjetio (
boja:#00BBFF;
tekst-dekoracija:nema;
obris:nema;
}
a:lebdjeti(
tekst-ukras:podcrtano;
}
.tutorial-info(
poravnanje teksta: središte;
padding:10px;
) Korak 5 - jQuery

Klizna ploča ima vlastitu jQuery datoteku.

demo.php

Prvi redak uključuje jQuery biblioteku iz Googleovog CDN-a. Slijedi IE6 PNG zakrpa za elemente prozirnosti. Zatim se uključuje skripta panela

Varijabla $script prikazuje ploču na stranici za učitavanje ako je potrebno.

U ovom vodiču ćemo stvoriti moderan obrazac za autorizaciju na web mjestu, možete ga pronaći u Futurico UI Pro, koji je kreirao Vladimir Kudinov. Koristit ćemo CSS3 i jQuery za izradu obrasca.

Korak 1 - HTML označavanje

Započnimo stvaranjem HTML oznake. Kreirajmo obrazac s četiri unosa (korisničko ime, lozinka, potvrdni okvir i gumb "pošalji") i zamotajte potvrdni okvir u span tag, koji ćemo koristiti za stiliziranje ovog potvrdnog okvira. Zatim ćemo omotati obrazac i naslov u oznaku DIV i dodijeliti mu klasu "obrazac za prijavu".

Obrazac za prijavu

zapamtiti

Korak 2 - Opći stilovi

Prvo, uklonimo sve margine, ispune, obrube itd. elemenata koje ćemo koristiti.

Obrazac za prijavu
.obrazac za prijavu h1,
.obrazac za prijavu raspon,
.unos obrasca za prijavu,
.oznaka obrasca za prijavu (
margina: 0;
ispuna: 0;
granica: 0;
obris: 0;
}

Zatim postavimo stilove za spremnik obrasca. Dodat ćemo relativno pozicioniranje, fiksnu širinu i visinu, boju pozadine, zaobljene kutove i sjene.

Obrazac za prijavu (
položaj: relativan;
širina: 200px;
visina: 200px;
ispuna: 15px 25px 0 25px;
margin-top: 15px;
kursor: zadano;

boja pozadine : #141517 ;

Webkit-border-radius: 5px ;
-moz-border-radius: 5px ;
rubni radijus: 5px ;

Webkit-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , umetnuto 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
-moz-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , umetnuto 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , umetnuto 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
}

Za izradu strelice koristit ćemo selektor :before.

Obrazac za prijavu :prije (
pozicija: apsolutna;
gore: -12px;
lijevo: 10px;

širina: 0px;
visina: 0px;
sadržaj: "";

border-bottom : 10px solid #141517 ;
border-desno : 10px solid #141517 ;
border-top : 10px jednobojno prozirno ;
rub-lijevo: 10px jednobojno prozirno;
}

Dodajmo neke stilove za zaglavlje obrasca (boja, font i veličina, itd.).

Obrazac za prijavu h1 (
line-height: 40px;
obitelj-fontova: "Myriad Pro", sans-serif;
veličina fonta: 22px;
težina fonta: normalna;
boja : #e4e4e4 ;
}

Korak 3 - Opći stilovi za polja obrazaca

Prvo, postavimo osnovne stilove za unose.

line-height: 14px;
margina: 10px 0;
ispuna: 6px 15px;
granica: 0;
obris: nema;

obitelj fontova: Helvetica, sans-serif;
veličina fonta: 12px;
font-weight: bold;
tekst-sjena : 0px 1px 1px rgba(255 , 255 , 255 , .2) ;

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

Webkit-transition: sve .15s jednostavno uvlačenje;
-moz-transition: sve .15s lagano upuštanje;
-o-prijelaz: sve .15s lagano upuštanje;
prijelaz: sve .15s lagano unutra van;
}

Zatim ćemo postaviti stilove za polja za unos prijave i lozinke. Dodat ćemo gradijentnu sivu pozadinu i sjene. Također ćemo dodati fiksnu širinu od 170px i boju za tekst.

Unos obrasca za prijavu[ type= text],
.unos obrasca za prijavu[ tip= lozinka] ,
.js .obrazac za prijavu raspon (
boja : #686868 ;
širina: 170px;

Webkit-box-shadow: umetnuti 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) ;
-moz-box-shadow: umetnuti 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) ;
box-shadow: umetnuti 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) ;

pozadina : #989898 ;
pozadina: -moz-linearni-gradijent(vrh, #ffffff 0%, #989898 100%);
pozadina: -webkit-gradijent(linearno, lijevo gore, lijevo dolje, boja-stop(0%, #ffffff), boja-stop(100%, #989898)) ;
pozadina: -webkit-linearni-gradijent(top, #ffffff 0%, #989898 100%);
pozadina: -o-linearni-gradijent(vrh, #ffffff 0%, #989898 100%);
pozadina: -ms-linearni-gradijent(vrh, #ffffff 0%, #989898 100%);
pozadina : linearni gradijent (vrh, #ffffff 0% , #989898 100% ) ;
}

Kada prijeđete mišem preko ovih polja, promijenit ćemo njihove sjene.

Unos obrasca za prijavu[ type= text ] :hover ,
.unos obrasca za prijavu[ tip= lozinka] :lebdi (
-webkit-box-shadow: umetnuti 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5) ;
-moz-box-shadow: umetnuti 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5) ;
okvir-sjena: umetnuti 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5) ;
}

Za aktivno stanje promijenit ćemo CSS3 gradijent u nešto svjetliju boju

Unos obrasca za prijavu[ type= text ] :focus ,
.unos obrasca za prijavu[ tip= lozinka] :fokus (
pozadina : #e1e1e1 ;
pozadina: -moz-linearni-gradijent(vrh, #ffffff 0%, #e1e1e1 100%);
pozadina: -webkit-gradijent(linearno, lijevo gore, lijevo dolje, boja-stop(0%, #ffffff), boja-stop(100%, #e1e1e1)) ;
pozadina: -webkit-linearni-gradijent(top, #ffffff 0%, #e1e1e1 100%);
pozadina: -o-linearni-gradijent(vrh, #ffffff 0%, #e1e1e1 100%);
pozadina: -ms-linearni-gradijent(vrh, #ffffff 0%, #e1e1e1 100%);
pozadina: linearni gradijent(vrh, #ffffff 0%, #e1e1e1 100%);
}

Korak 4 - Gumb Pošalji

Postavimo gumb s desne strane; da biste to učinili, dajte mu float:right.

Unos obrasca za prijavu[ type= submit] (
plovak: desno;
kursor: pokazivač;

boja : #445b0f ;

Webkit-box-shadow: umetnuti 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
-moz-box-shadow: umetnuti 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
okvir-sjena: umetnuti 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
}

Kada prijeđete mišem, promijenit ćemo sjene, au aktivnom stanju ćemo ih ukloniti.

Unos obrasca za prijavu[ type= submit] :hover (
-webkit-box-shadow: umetnuti 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
-moz-box-shadow: umetnuti 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
okvir-sjena: umetnuti 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
}

Unos obrasca za prijavu[ tip= pošalji] :aktivno (
-webkit-box-shadow: ništa;
-moz-box-shadow: ništa;
box-shadow: nijedan;
}

Dodajmo zeleni gradijent za gumb.

Unos obrasca za prijavu[ type= submit] ,
.js .obrazac za prijavu span.provjereno :prije (
pozadina : #a5cd4e ;
pozadina: -moz-linearni-gradijent(top, #a5cd4e 0%, #6b8f1a 100%);
pozadina: -webkit-gradijent(linearno, lijevo gore, lijevo dolje, boja-stop(0%, #a5cd4e), boja-stop(100%, #6b8f1a)) ;
pozadina: -webkit-linear-gradient(vrh, #a5cd4e 0%, #6b8f1a 100%);
pozadina: -o-linearni-gradijent(vrh, #a5cd4e 0%, #6b8f1a 100%);
pozadina: -ms-linearni-gradijent(top, #a5cd4e 0%, #6b8f1a 100%);
pozadina : linearni gradijent (gore, #a5cd4e 0% , #6b8f1a 100% ) ;
}

Korak 5 - Stilizirajte potvrdni okvir

Sada dolazi teži dio jer ne možemo promijeniti izgled potvrdnih okvira s koristeći CSS, baš kao što smo promijenili izgled ostalih polja obrazaca.

Najlakši način koji sam pronašao je da potvrdni okvir zamijenim oznakom raspona.

Radit će ovako: prvo ćemo sakriti potvrdni okvir i stilizirati span tag da izgleda kao potvrdni okvir, a zatim ćemo ažurirati taj potvrdni okvir (označen/neoznačen) pomoću jQueryja.

Budući da je kod nekih korisnika JavaScript onemogućen, moramo dodati rezervnu opciju. Za ovo ćemo dodati "js" klase u oznaci tijela pomoću jQueryja. Dakle, ako je JavaScript omogućen, klasa "js" bit će dodana oznaci body kada se stranica učita, ali ako je JavaScript onemogućen, klasa neće biti dodana. Tako će samo korisnici s omogućenim JavaScriptom vidjeti stilizirani potvrdni okvir.

Prvo ćemo sakriti potvrdni okvir.

.js .unos obrasca za prijavu[ tip= potvrdni okvir] (
položaj: fiksni;
lijevo: -9999px;
}

Zatim ćemo postaviti span tag gdje nam treba.

.obrazac za prijavu raspon (
položaj: relativan;
margin-top: 15px;
plovak: lijevo;
}

Zatim ćemo dodati neke stilove oznaci raspona (širina, visina, obrub itd.).

.js .obrazac za prijavu raspon (
širina: 16px;
visina: 16px;
kursor: pokazivač;

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

Da bismo stvorili stanje "provjereno", umetnut ćemo mali kvadrat u raspon i postaviti ga u središte.

.js .obrazac za prijavu span.provjereno :prije (
sadržaj: "";
pozicija: apsolutna;
gore: 4px;
lijevo: 4px;
širina: 8px;
visina: 8px;

Webkit-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .45) , umetnuto 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
-moz-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .45) , umetnuto 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .45) , umetnuto 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
}

Postavit ćemo oznaku oznake desno od potvrdnog okvira i dodati neki osnovni stil (font, boju, itd.).

.oznaka obrasca za prijavu (
pozicija: apsolutna;
vrh: 1px;
lijevo: 25px;
obitelj-fontova: sans-serif;
font-weight: bold;
veličina fonta: 12px;
boja : #e4e4e4 ;
}

Svi stilovi koji na početku imaju klasu "js" primjenjivat će se samo ako je omogućen JavaScript.

Korak 6 - jQuery

Prvo ćemo se spojiti Najnovija verzija jQuery biblioteka koja koristi Google API, ako želite možete je ugostiti na vlastitom poslužitelju, to je vaš izbor. Zatim dodajte sljedeći kod na dno HTML datoteke, prije završne oznake.

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

// Provjerite je li JavaScript omogućen
$("tijelo") .addClass ("js");

// Uključite potvrdni okvir pri učitavanju
$(".login-form span" ) .addClass ( "označeno" ) .children ( "unos" ) .attr ( "označeno" , istina ) ;

// Funkcija klika
$(".login-form span" ) .on ("klik", funkcija () (

if ($(this ) .children ("input") .attr ("checked" ) ) (
$(ovo) .children ("input" ) .attr ("checked" , false ) ;
$(ovo).removeClass("označeno");
}

drugo(
$(this) .children ("input" ) .attr ("checked" , true ) ;
$(ovo).addClass("označeno");
}
} ) ;
} ) ;

Prvo ćemo dodati klasu "js" u oznaku tijela.

Ako imate pitanja, preporučujemo korištenje našeg foruma kako biste dobili odgovor što je brže moguće