Celibat formular za prijavu html. HTML forme

U ovom članku ćete naučiti kako kreirati obrazac za registraciju i autorizaciju koristeći HTML, JavaScript, PHP i MySql. Ovakvi obrasci se koriste na gotovo svakoj web stranici, bez obzira na njen tip. Napravljeni su za forum, online prodavnicu, društvene mreže (kao što su Facebook, Twitter, Odnoklassniki) i mnoge druge vrste stranica.

Ako imate web stranicu na lokalni računar, onda se nadam da već jeste. Bez toga ništa neće raditi.

Kreiranje tabele u bazi podataka

Za implementaciju registracije korisnika, prije svega nam je potrebna Baza podataka. Ako ga već imate, onda odlično, inače, morate ga kreirati. U članku detaljno objašnjavam kako to učiniti.

I tako, imamo bazu podataka (skraćeno DB), sada treba da kreiramo tabelu korisnika u koje ćemo dodati naše registrovane korisnike.

U članku sam također objasnio kako napraviti tabelu u bazi podataka. Prije kreiranja tabele, moramo odrediti koja će polja sadržavati. Ova polja će odgovarati poljima iz obrasca za registraciju.

Dakle, pomislili smo, zamislili koja polja će imati naš obrazac i napravili tabelu korisnika sa ovim poljima:

id- Identifikator. Polje id Svaka tabela u bazi podataka treba da ga ima.
ime- Da sačuvam ime.
prezime- Da sačuvam prezime.
email- Da sačuvate poštansku adresu. Koristićemo e-mail kao login, tako da ovo polje mora biti jedinstveno, odnosno imati UNIQUE indeks.
email_status- Polje za označavanje da li je pošta potvrđena ili ne. Ako je pošta potvrđena, tada će imati vrijednost 1, u suprotnom vrijednost je 0.
lozinka- Da sačuvate lozinku.

Ako želite da vaš formular za registraciju ima još neka polja, također ih možete dodati ovdje.

To je to, naš sto korisnika spreman. Pređimo na sljedeću fazu.

Veza sa bazom podataka

Napravili smo bazu podataka, sada se moramo povezati s njom. Mi ćemo se povezati sa koristeći PHP MySQLi ekstenzije.

U folderu naše stranice kreirajte datoteku s imenom dbconnect.php, i napišite sljedeću skriptu u njoj:

Greška DB veze. Opis greške: ".mysqli_connect_error()."

"; exit(); ) // Postavite kodiranje veze $mysqli->set_charset("utf8"); // Radi praktičnosti, ovdje dodajte varijablu koja će sadržavati ime naše stranice $address_site = "http://testsite .local" ; ?>

Ovaj fajl dbconnect.php morat će biti spojen na rukovaoce obrascima.

Obratite pažnju na varijablu $address_site, ovdje sam naznačio naziv moje test stranice na kojoj ću raditi. Molimo Vas da u skladu s tim naznačite naziv Vaše stranice.

Struktura sajta

Pogledajmo sada HTML strukturu našeg sajta.

Premjestit ćemo zaglavlje i podnožje stranice u zasebne datoteke, header.php I footer.php. Uključićemo ih na sve stranice. Naime na glavnoj stranici (fil index.php), na stranicu sa formularom za registraciju (fil form_register.php) i na stranicu sa formularom za autorizaciju (fil form_auth.php).

Blokirajte našim linkovima, registracija I autorizacija, dodajte ih u zaglavlje stranice tako da se prikazuju na svim stranicama. Jedan link će biti unet na stranica obrasca za registraciju(fajl form_register.php), a drugi na stranicu sa obrazac autorizacije(fajl form_auth.php).

Sadržaj datoteke header.php:

Naziv naše stranice

Kao rezultat, naša glavna stranica izgleda ovako:

Naravno, vaša stranica može imati potpuno drugačiju strukturu, ali to nam sada nije važno. Glavna stvar je da postoje veze (dugmad) za registraciju i autorizaciju.

Sada idemo na formular za registraciju. Kao što ste već shvatili, imamo to u dosijeu form_register.php.

Idite na bazu podataka (u phpMyAdmin), otvorite strukturu tabele korisnika i pogledajte koja polja su nam potrebna. To znači da su nam potrebna polja za unos imena i prezimena, polje za unos poštanske adrese (Email) i polje za unos lozinke. A iz sigurnosnih razloga, dodaćemo polje za unos captcha.

Na serveru, kao rezultat obrade obrasca za registraciju, mogu doći do raznih grešaka zbog kojih se korisnik neće moći registrovati. Stoga, kako bi korisnik razumio zašto registracija nije uspjela, potrebno je prikazati poruke o ovim greškama.

Prije prikaza obrasca, dodajte blok za prikaz poruka o grešci iz sesije.

I još nešto, ako je korisnik već autorizovan, pa iz radoznalosti ide direktno na stranicu za registraciju pisanjem u adresnu traku pretraživača site_address/form_register.php, tada ćemo u ovom slučaju umjesto obrasca za registraciju prikazati zaglavlje da je već registriran.

Općenito, kod datoteke form_register.php imamo ovo:

Već ste registrovani

U pretraživaču stranica sa formularom za registraciju izgleda ovako:

Korišćenjem potreban atribut, sva polja smo učinili obaveznim.

Obratite pažnju na šifru obrasca za registraciju gdje captcha se prikazuje:

Naveli smo putanju do datoteke u vrijednosti atributa src za sliku captcha.php, koji generiše ovu captcha.

Pogledajmo kod fajla captcha.php:

Kod je dobro komentarisan, pa ću se fokusirati samo na jednu tačku.

Unutar funkcije imageTtfText(), put do fonta je specificiran verdana.ttf. Dakle, da bi captcha radila ispravno, moramo kreirati folder fontove, i tamo postavite datoteku fonta verdana.ttf. Možete ga pronaći i preuzeti s Interneta ili preuzeti iz arhive s materijalima ovog članka.

Završili smo sa HTML strukturom, vrijeme je da krenemo dalje.

Provjera valjanosti e-pošte pomoću jQueryja

Bilo koji obrazac treba provjeriti ispravnost unesenih podataka, kako na strani klijenta (koristeći JavaScript, jQuery) tako i na strani servera.

Posebnu pažnju moramo obratiti na polje Email. Veoma je važno da unesena poštanska adresa bude važeća.

Za ovo polje za unos postavljamo tip e-pošte (type="email"), što nas malo upozorava na neispravne formate. Ali to nije dovoljno, jer preko kodnog inspektora koji nam pruža pretraživač možemo lako promijeniti vrijednost atributa tip With email on tekst, i to je to, naš ček više neće važiti.

I u ovom slučaju, moramo izvršiti pouzdaniju provjeru. Da bismo to uradili, koristićemo jQuery biblioteku iz JavaScript-a.

Da biste povezali jQuery biblioteku, u datoteci header.php između oznaka , prije završne oznake , dodajte ovaj red:

Odmah nakon ovog reda, dodaćemo kod za validaciju e-pošte. Ovdje ćemo dodati kod za provjeru dužine unesene lozinke. Njegova dužina mora biti najmanje 6 znakova.

Koristeći ovu skriptu, provjeravamo ispravnost unesene adrese e-pošte. Ako je korisnik unio pogrešnu e-poštu, prikazujemo poruku o grešci o tome i onemogućujemo dugme za slanje obrasca. Ako je sve u redu, uklanjamo grešku i aktiviramo dugme za slanje obrasca.

I tako, završili smo sa validacijom obrasca na strani klijenta. Sada ga možemo poslati na server, gdje ćemo također napraviti par provjera i dodati podatke u bazu podataka.

Registracija korisnika

Obrazac šaljemo u fajl na obradu register.php, putem POST metode. Ime ove datoteke rukovanja je navedeno u vrijednosti atributa akcija. A metoda slanja je navedena u vrijednosti atributa metoda.

Otvorite ovaj fajl register.php i prva stvar koju treba da uradimo je da napišemo funkciju pokretanja sesije i povežemo datoteku koju smo ranije kreirali dbconnect.php(U ovom fajlu smo uspostavili vezu sa bazom podataka). Takođe, hajde da odmah proglasimo ćelije error_messages I uspjeh_poruke u globalnom nizu sesija. IN error_mesages zabilježit ćemo sve poruke o greškama koje se javljaju tokom obrade obrasca i u succes_messages, snimaćemo radosne poruke.

Prije nego što nastavimo, moramo provjeriti da li je obrazac uopšte dostavljen?. Napadač može pogledati vrijednost atributa akcija iz obrasca i saznajte koja datoteka obrađuje ovaj obrazac. I možda ima ideju da ide direktno na ovu datoteku tako što će upisati sljedeću adresu u adresnu traku pretraživača: http://site_address/register.php

Dakle, moramo provjeriti da li postoji ćelija u globalnom POST nizu čije ime odgovara imenu našeg dugmeta "Registriraj se" iz obrasca. Na ovaj način provjeravamo da li je na dugme "Registracija" kliknuto ili ne.

Ako napadač pokuša da ode direktno na ovu datoteku, dobiće poruku o grešci. Dozvolite mi da vas podsjetim da varijabla $address_site sadrži naziv stranice i ona je deklarirana u datoteci dbconnect.php.

Greška! glavna stranica.

"); } ?>

Captcha vrijednost u sesiji je dodana kada je generirana, u datoteci captcha.php. Kao podsjetnik, pokazat ću vam ponovo ovaj dio koda iz datoteke captcha.php, gdje se captcha vrijednost dodaje sesiji:

Sada idemo na samu verifikaciju. U fajlu register.php, unutar if bloka, gdje provjeravamo da li je kliknuto na dugme "Registriraj se", odnosno gdje je naznačen komentar "" // (1) Prostor za sljedeći dio koda"mi pišemo:

//Provjera primljene captcha //Skratite razmake od početka i kraja reda $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Uporedi primljenu vrijednost sa vrijednošću iz sesije. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Ako captcha nije ispravna, vraćamo korisnika na stranicu za registraciju i tamo ćemo mu prikazati poruku o grešci da je unio pogrešan captcha $error_message = "

Greška! Uneli ste pogrešan captcha

"; // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] = $error_message; // Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 trajno premješten"); header("Lokacija: " .$address_site ."/form_register.php"); //Zaustavi skriptu exit(); ) // (2) Mjesto za sljedeći dio koda )else( //Ako captcha nije proslijeđena ili je prazan izlaz ("

Greška! Ne postoji verifikacioni kod, odnosno captcha kod. Možete otići na glavnu stranicu.

"); }

Zatim moramo obraditi primljene podatke iz POST niza. Prije svega, trebamo provjeriti sadržaj globalnog POST niza, odnosno da li tamo postoje ćelije čija imena odgovaraju nazivima polja za unos iz našeg obrasca.

Ako ćelija postoji, tada skraćujemo razmake od početka i kraja reda iz ove ćelije, u suprotnom preusmjeravamo korisnika nazad na stranicu s obrascem za registraciju.

Zatim, nakon što smo skratili razmake, dodamo red u varijablu i provjeravamo da li je ova varijabla prazna; ako nije prazna, idemo dalje, u suprotnom preusmjeravamo korisnika nazad na stranicu sa registracionom formom.

Zalijepite ovaj kod na navedenu lokaciju" // (2) Prostor za sljedeći dio koda".

/* Provjerite da li postoje podaci poslani iz obrasca u globalnom nizu $_POST i umotajte poslane podatke u regularne varijable.*/ if(isset($_POST["first_name"]))( //Skratite razmake od početka i kraj niza $first_name = trim($_POST["first_name"]); //Provjerite da li je varijabla praznina if(!empty($first_name))( // Radi sigurnosti, pretvorite posebne znakove u HTML entitete $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Unesite svoje ime

Polje za naziv nedostaje

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavite skriptu exit(); ) if( isset($_POST["last_name"]))( //Skrati razmake od početka i kraja reda $last_name = trim($_POST["last_name"]); if(!empty($last_name)) ( // Radi sigurnosti, pretvorite posebne znakove u HTML entitete $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Molimo unesite svoje prezime

Polje za prezime nedostaje

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavite skriptu exit(); ) if( isset($_POST["email"]))( //Skrati razmake od početka i kraja reda $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Lokacija koda za provjeru formata adrese e-pošte i njene jedinstvenosti )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .="

Unesite svoju e-poštu

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavite skriptu exit(); ) if( isset($_POST["password"]))( //Skratite razmake od početka i kraja niza $password = trim($_POST["password"]); if(!empty($password)) ( $password = htmlspecialchars ($password, ENT_QUOTES); //Šifriranje lozinke $password = md5($password."top_secret"); )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .="

Unesite svoju lozinku

Od posebnog značaja je teren email. Moramo provjeriti format primljene poštanske adrese i njenu jedinstvenost u bazi podataka. Odnosno, postoji li neki korisnik sa istom adresom e-pošte već registrovan?

Na navedenoj lokaciji" // (3) Lokacija koda za provjeru formata poštanske adrese i njene jedinstvenosti" dodajte sljedeći kod:

//Provjerite format primljene email adrese koristeći regularni izraz $reg_email = "/^**@(+(*+)*\.)++/i"; //Ako format primljene adrese e-pošte ne odgovara regularnom izrazu if(!preg_match($reg_email, $email))( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Uneli ste netačan email

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavite skriptu exit(); ) // Provjeravamo da li je takva adresa već u bazi podataka. /Ako je broj primljenih tačno jedan red, što znači da je korisnik sa ovom email adresom već registrovan if($result_query->num_rows == 1)( //Ako dobijeni rezultat nije lažan if(($row = $result_query->fetch_assoc()) != false) ( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Korisnik sa ovom adresom e-pošte je već registrovan

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); )else( // Sačuvajte poruku o grešci na sesiju . $_SESSION["error_messages"] .= "

Greška u upitu baze podataka

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); ) /* zatvaranje odabira */ $ result_query-> close(); //Zaustavi skriptu exit(); ) /* zatvaranje odabira */ $result_query->close();

I tako, završili smo sa svim provjerama, vrijeme je da dodamo korisnika u bazu podataka. Na navedenoj lokaciji" // (4) Mjesto za kod za dodavanje korisnika u bazu podataka" dodajte sljedeći kod:

//Upit za dodavanje korisnika u bazu podataka $result_query_insert = $mysqli->query("INSERT INTO `users` (ime_ime, prezime, email, lozinka) VRIJEDNOSTI ("".$first_name."", "".$last_name ." ", ".$email.", ".$password."")"); if(!$result_query_insert)( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Greška u zahtjevu za dodavanje korisnika u bazu podataka

Registracija uspješno obavljena!!!
Sada se možete prijaviti koristeći svoje korisničko ime i lozinku.

"; //Pošaljite korisnika na stranicu za autorizaciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_auth.php"); ) /* Dovršavanje zahtjeva */ $ result_query_insert-> close(); //Zatvaranje veze sa bazom podataka $mysqli->close();

Ako je došlo do greške u zahtjevu za dodavanje korisnika u bazu podataka, sesiji dodajemo poruku o ovoj grešci i vraćamo korisnika na stranicu za registraciju.

Inače, ako je sve prošlo kako treba, dodajemo i poruku sesiji, ali ovaj put je ugodnije, odnosno javljamo korisniku da je registracija uspjela. I mi ga preusmjeravamo na stranicu sa formularom za autorizaciju.

Skripta za provjeru formata adrese e-pošte i dužine lozinke je u datoteci header.php, tako da će se primjenjivati i na polja iz ovog obrasca.

Sesija je također pokrenuta u datoteci header.php, dakle u fajlu form_auth.php Nema potrebe za pokretanjem sesije, jer ćemo dobiti grešku.

Kao što sam već rekao, ovdje radi i skripta za provjeru formata adrese e-pošte i dužine lozinke. Stoga, ako korisnik unese pogrešnu adresu e-pošte ili kratku lozinku, odmah će dobiti poruku o grešci. Dugme ućiće postati neaktivan.

Nakon ispravljanja grešaka, dugme ući postaje aktivan, a korisnik će moći poslati obrazac na server, gdje će biti obrađen.

Autorizacija korisnika

Pripisati vrijednost akcija hendikep autorizacije ima specificiran fajl auth.php, to znači da će obrazac biti obrađen u ovoj datoteci.

I tako, otvorite datoteku auth.php i napisati kod za obradu formulara za autorizaciju. Prva stvar koju trebate učiniti je pokrenuti sesiju i povezati datoteku dbconnect.php za povezivanje sa bazom podataka.

//Objavite ćeliju za dodavanje grešaka koje se mogu pojaviti prilikom obrade obrasca. $_SESSION["error_messages"] = ""; //Proglasite ćeliju za dodavanje uspješnih poruka $_SESSION["success_messages"] = "";

/* Provjeriti da li je obrazac poslat, odnosno da li je kliknuto na dugme Prijava. Ako da, onda idemo dalje, ako ne, tada ćemo korisniku prikazati poruku o grešci koja pokazuje da je direktno pristupio ovoj stranici. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Prostor za sljedeći dio koda )else( exit("

Greška! Direktno ste pristupili ovoj stranici, tako da nema podataka za obradu. Možete otići na glavnu stranicu.

"); }

//Provjerite primljeni captcha if(isset($_POST["captcha"]))( //Skratite razmake od početka i kraja reda $captcha = trim($_POST["captcha"]); if(! empty($captcha ))( //Uporedi primljenu vrijednost sa vrijednošću iz sesije. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")) ( // Ako je captcha neispravan, vraćamo korisnika na stranicu za autorizaciju i tamo ćemo mu prikazati poruku o grešci da je unio pogrešan captcha. $error_message = "

Greška! Uneli ste pogrešan captcha

Greška! Polje za unos captcha ne smije biti prazno.

"; // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] = $error_message; // Vratite korisnika na stranicu autorizacije header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: " .$address_site ."/form_auth.php"); //Zaustavi skriptu exit(); ) //(2) Mjesto za obradu email adrese //(3) Mjesto za obradu lozinke //(4) Mjesto za sastavljanje upita bazi podataka ) else ( //Ako captcha nije proslijeđena exit("

Greška! Ne postoji verifikacioni kod, odnosno captcha kod. Možete otići na glavnu stranicu.

"); }

Ako je korisnik ispravno unio verifikacioni kod, idemo dalje, u suprotnom ga vraćamo na stranicu za autorizaciju.

Provjeravam poštansku adresu

//Skratite razmake od početka i kraja reda $email = trim($_POST["email"]); if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //Provjerite format primljene email adrese koristeći regularni izraz $ reg_email = " /^**@(+(*+)*\.)++/i"; //Ako format primljene adrese e-pošte ne odgovara regularnom izrazu if(!preg_match($reg_email, $email ))( // Sačuvaj u poruku o grešci sesije. $_SESSION["error_messages"] .= "

Uneli ste netačan email

"; //Vratite korisnika na stranicu za autorizaciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_auth.php"); //Zaustavite skriptu exit(); ) )else ( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Polje za unos poštanske adrese (e-mail) ne smije biti prazno.

Polje za unos e-pošte nedostaje

Ako je korisnik unio adresu e-pošte u pogrešnom formatu ili je vrijednost polja e-mail adrese prazna, onda ga vraćamo na stranicu za autorizaciju na kojoj prikazujemo poruku o tome.

Provjera lozinke

Sljedeće polje koje treba obraditi je polje lozinke. Na navedeno mjesto" //(3) Mjesto za obradu lozinke", mi pišemo:

If(isset($_POST["password"]))( //Skratite razmake od početka i kraja niza $password = trim($_POST["password"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES); //Šifriranje lozinke $password = md5($password."top_secret"); )else( //Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] . = "

Unesite svoju lozinku

Polje za lozinku nedostaje

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_auth.php"); //Zaustavite skriptu exit(); )

Ovdje koristimo funkciju md5() za šifriranje primljene lozinke, budući da su naše lozinke u šifriranom obliku u bazi podataka. Dodatna tajna riječ u šifriranju, u našem slučaju " top_secret" mora biti onaj koji je korišten prilikom registracije korisnika.

Sada morate napraviti upit bazi podataka za odabir korisnika čija je adresa e-pošte jednaka primljenoj e-mail adresi i čija je lozinka jednaka primljenoj lozinki.

//Upit u bazi podataka na osnovu odabira korisnika. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = ".$password."""); if(!$result_query_select)( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Greška upita prilikom odabira korisnika iz baze podataka

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_auth.php"); //Zaustavite skriptu exit(); )else( //Provjeri da li u bazi nema korisnika sa takvim podacima, a zatim prikaži poruku o grešci if($result_query_select->num_rows == 1)( // Ako se uneseni podaci poklapaju sa podacima iz baze podataka, onda sačuvaj login i lozinka za niz sesija. $_SESSION["email"] = $email; $_SESSION["password"] = $password; //Vrati korisnika na zaglavlje glavne stranice("HTTP/1.1 301 trajno premješten" ); header("Lokacija: ".$address_site ."/index.php"); )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Netačna prijava i/ili lozinka

"; //Vratite korisnika na stranicu za autorizaciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_auth.php"); //Zaustavite skriptu exit(); ) )

Izađite sa stranice

I posljednja stvar koju implementiramo je procedura napuštanja stranice. Trenutno u zaglavlju prikazujemo linkove na stranicu za autorizaciju i stranicu za registraciju.

U zaglavlju stranice (datoteka header.php), pomoću sesije provjeravamo da li je korisnik već ovlašten. Ako nije, onda prikazujemo linkove za registraciju i autorizaciju, u suprotnom (ako je ovlašten), onda umjesto veza za registraciju i autorizaciju prikazujemo link Izlaz.

Modificiran dio koda iz datoteke header.php:

Registracija

Izlaz

Kada kliknete na izlaznu vezu sa sajta, bićemo odvedeni u fajl logout.php, gdje jednostavno uništavamo ćelije sa email adresom i lozinkom iz sesije. Nakon toga vraćamo korisnika nazad na stranicu na kojoj je kliknut na link Izlaz.

Šifra datoteke logout.php:

To je sve. Sada znate kako implementirati i obraditi obrasce za registraciju i autorizaciju korisnika na vašoj web stranici. Ovi obrasci se nalaze na gotovo svakoj web stranici, tako da bi svaki programer trebao znati kako ih napraviti.

Naučili smo i kako provjeriti ulazne podatke, kako na strani klijenta (u pretraživaču, koristeći JavaScript, jQuery) tako i na strani servera (koristeći PHP jezik). I mi smo naučili sprovesti proceduru napuštanja lokacije.

Sve skripte su testirane i rade. Arhivu sa fajlovima ovog malog sajta možete preuzeti sa ovog linka.

U budućnosti ću napisati članak u kojem ću opisati. I također planiram napisati članak gdje ću objasniti (bez ponovnog učitavanja stranice). Dakle, kako biste bili informisani o objavljivanju novih članaka, možete se pretplatiti na moju web stranicu.

Ako imate bilo kakvih pitanja, kontaktirajte me, a ako primijetite bilo kakvu grešku u članku, javite mi.

Plan lekcije (5. dio):

Kreiranje HTML strukture za formular za autorizaciju
Primljene podatke obrađujemo
U zaglavlju stranice prikazujemo pozdrav korisnika

Da li vam se svidio članak?

Vodič o tome kako kreirati promjenjivi obrazac za prijavu i registraciju pomoću HTML5 i CSS3.

U ovom vodiču ćemo kreirati dva HTML5 obrasca koji će se prebacivati između prijave i registracije koristeći CSS3 pseudo klasu :target. Stilizirat ćemo ga koristeći CSS3 i font za ikone. Ideja iza ove demonstracije je da se korisniku pokaže obrazac za prijavu i pruži link za „prelazak“ na obrazac za registraciju.

Imajte na umu da je ovo samo u svrhu demonstracije, radit će samo u pretraživaču koji podržava pseudo klasu:target, i ne biste trebali koristiti ovaj kod na živoj web stranici bez pružanja solidne rezerve.

U nastavku ćemo proći kroz Demo 1.

HTML

U HTML ćemo staviti oba oblika, skrivajući drugi sa CSS-om. Evo koda, kasnije ću objasniti neke od zanimljivih dijelova.

Ovdje smo dodali neke HTML5 dobrote i koristili neke od novih unosa. Ulaz tip=lozinka automatski sakriva ono što korisnik piše i zamjenjuje to tačkama (ovisno o pretraživaču). Ulaz type=email omogućava pretraživaču da provjeri da li ono što je korisnik unio ima format valjane adrese e-pošte. Takođe smo koristili zahtijevati=obavezno atribut; pretraživači koji podržavaju ovaj atribut neće dozvoliti korisniku da pošalje obrazac dok se ovo polje ne popuni, JavaScript nije potreban.
The autocomplete=on atribut će unaprijed ispuniti vrijednosti na osnovu ranijeg korisničkog unosa. Također smo koristili neke lijepe čuvare mjesta za ulaze koji će pokazati neku vodeći vrijednost kada ulaz nije popunjen.

Sada dva lukava dijela. Možda ste primijetili ovo dvoje veze na vrhu obrasca. Ovo je mali trik koji će učiniti da se naš obrazac lijepo ponaša kada se igra sa sidrima, tako da neće "skočiti" na dugačke stranice kada kliknemo na link za prebacivanje i pokrenemo pseudo-klasu:target.

Drugi mali trik se odnosi na upotrebu fonta ikona. Koristit ćemo data-atribut za prikaz ikona. Po postavci data-icon=”icon_character” sa odgovarajućim karakterom u HTML-u trebat će nam samo jedan selektor CSS atributa za stiliziranje svih ikona. Pročitajte više o ovoj tehnici na 24 načina: Prikaz ikona sa fontovima i atributima podataka.

CSS

Radi jasnoće koda u ovom vodiču, izostaviću sve prefikse dobavljača, ali ćete ih, naravno, pronaći u datotekama. Još jednom, koristim neke prilično napredne CSS3 trikove koji možda neće raditi u svim pretraživačima. Hajde da počnemo.

Stiliziranje oba oblika koristeći CSS3

Prvo, dajmo naša dva oblika neki opći stil za kontejner.

#subscribe, #login( pozicija: apsolutna; vrh: 0px; širina: 88%; padding: 18px 6% 60px 6%; margina: 0 0 35px 0; pozadina: rgb(247, 247, 247); granica: 1px čvrsta rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4 border) in:usset; ; ) #login( z-index: 22; )

Dodali smo lijepu kutijastu sjenu koja je napravljena od dvije sjene: umetnute za stvaranje unutrašnjeg plavog sjaja i vanjske sjene. Objasnit ćemo z-indeks u malo.

U nastavku ćemo stilizirati zaglavlje s nekim isječkom pozadine:

/**** opšti stil teksta ****/ #wrapper h1( veličina fonta: 48px; boja: rgb(6, 106, 117); padding: 2px 0 10px 0; porodica fontova: "FranchiseRegular"," Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** Za sada samo webkit podržava background-clip:text; */ #wrapper h1( background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, r (64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparentan; -webkit-background-clip: text; ) #wrapper h1:after( content:" "; display:block; širina:100%; visina:2px; margin-top:10px; pozadina: linearni gradijent(lijevo, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184) ,1) 53%, rgba(147,184,189,0,8) 79%, rgba(147,184,189,0) 100%);

Imajte na umu da u ovom trenutku podržavaju samo webkit pretraživači background-clip:text, tako da ćemo kreirati ogoljenu pozadinu samo za webkit ovdje i isječiti je na tekst da bismo dodali pruge naslovu H1. Od kada background-clip:text svojstvo trenutno radi samo u Webkit pretraživačima, odlučio sam da koristim samo prefiks webkit. To je razlog zašto sam podijelio CSS deklaraciju na dva dijela i koristio samo gradijent sa prefiksom webkit-a. Samo korištenje prefiksa –webkit- je loša praksa, to je samo u demo svrhe i to nikada ne biste trebali raditi na stvarnoj web stranici! To je takođe mesto gde je -webkit-text-fill-color: transparentan je zgodno: omogućava nam da imamo samo prozirnu pozadinu na webkit pretraživačima, svi ostali će je ignorisati i dati nam rezervnu boju teksta.

Također smo kreirali blijedi red ispod naslova uz pomoć pseudo-klase:after. Koristimo gradijent visine 2px i bledimo pozadinu na 0 neprozirnosti na oba kraja.

Sada stilizirajmo naše unose i damo im ljepši izgled.

/**** napredni stil unosa ****/ /* čuvar mjesta */ ::-webkit-input-placeholder ( boja: rgb(190, 188, 188); font-style: kurziv; ) input:-moz- placeholder, textarea:-moz-placeholder( boja: rgb(190, 188, 188); font-style: italic; ) ulaz (outline: nema; )

Prvo oblikujemo unose i uklanjamo obris. Ali ovdje budite oprezni; obris pomaže korisniku da zna koji je ulaz fokusiran, tako da ako ga uklonite, trebali biste osigurati neka:active i:focus stanja za ulaze.

/* sav unos osim submit i checkbox */ #wrapper input:not())( širina: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; granica: 1px solid rgb(178, 178, 178) ; box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; prijelaz: sve 0.2s linearno; ) #wrapper input:not() : aktivan, #wrapper input:not():focus( border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba ( 168, 168, 168, 0.9) umetnuti; )

Ovdje smo koristili pseudo klasu:not za stiliziranje svih ulaza, osim polja za potvrdu. Dao sam:focus i:active stanje, pošto sam odlučio da uklonim obris.

A sada zabavni dio: font za ikone. Pošto ne možemo koristiti:prije i:poslije pseudo klase na ulazima, morat ćemo malo varati: dodaćemo ikonu na oznaku, a zatim je smjestiti u ulaz. Koristim biblioteku fontomas koja sastavlja neke lijepe ikone. Možete ih preurediti da biste postavili ikonu na određeno slovo. Zapamtite ikona podataka atribut? Tu treba da stavite pismo. koristio sam data-icon='u' za korisnika, 'e' za e-poštu, 'p' za lozinku. Kada sam izabrao slova, preuzeo sam font i koristio generator fontova fontsquirrel da ga transformišem u format kompatibilan sa @font-face.

@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; ) /** trik sa čarobnom ikonom ! **/ :after ( sadržaj: attr(data-icon); font-family: "FontomasCustomRegular"; boja: rgb(106, 159, 171); pozicija: apsolutna; lijevo: 10px; gore: 35px; širina: 30px; )

Da, to je to ljudi, ne morate imati klasu za svaku ikonu. Koristili smo sadržaj: attr(ikona-podaci) da preuzmemo slovo iz atributa ikone podataka, tako da moramo samo deklarirati font, odabrati lijepu boju i pozicionirati ga.

Sada stilizirajmo dugme za slanje za oba obrasca.

/*stiliziranje oba dugmeta za slanje */ #wrapper p.button input( širina: 30%; kursor: pokazivač; pozadina: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; boja: #fff; veličina fonta: 24px; granica: 1px solid rgb(28, 108, 122); margin-bottom: 10px; sjena teksta: 0 1px 1px rgba(0, 0, 0, 0.5); radijus granice: 3px; senka okvira: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) umetnuti, 0px 0px 0px 3px rgb(254, 254, 254), 0px 3px 5px rgb(210, 210, 210); prijelaz: sve 0.2s linearno; ) #wrapper p.button input:hover( background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p .button input:focus( background: rgb(40, 137, 154); pozicija: relativna; vrh: 1px; granica: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) umetnuti; ) p.login.button, p.signin.button( text-align: right; margin: 5px 0; )

Trik je u korištenju senke okvira kako bi se stvorile dodatne granice. Možete koristiti samo jednu ivicu, ali onoliko sjenki okvira koliko želite. Koristit ćemo vrijednost dužine da kreiramo "lažni" drugi bijeli okvir, širine 3px, bez zamućenja.

Zatim ćemo stilizirati potvrdni okvir, ovdje ništa posebno:

/* oblikovanje okvira za potvrdu "neka me bude prijavljen"*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) .keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label( width: 80%; )

Stilizirat ćemo dno obrasca koristeći ponavljajuće linearne gradijente kako bismo stvorili prugastu pozadinu.

P.change_link( pozicija: apsolutna; boja: rgb(127, 124, 124); lijevo: 0px; visina: 20px; širina: 440px; padding: 17px 30px 20px 30px; veličina fonta: 16px; poravnanje teksta: desno; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247 px)p) .change_link a (prikaz: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; boja: rgb(29, 162, 193); margin-left: 10px; tekst -dekoracija: nema; radijus ivice: 4px; granica: 1px solid rgb(203, 213, 214); prijelaz: sve 0.4s linearno; ) #wrapper p.change_link a:hover ( boja: rgb(57, 191, 215) ); pozadina: rgb(247, 247, 247); granica: 1px solid rgb(74, 179, 198); ) #wrapper p.change_link a:active( position: relative; top: 1px; )

Sada ćete primijetiti da imamo dvije lijepe forme, ali zaista želimo da prikazujemo samo jednu po jednu. Dakle, sada je vrijeme za neke animacije!!

Kreiranje animacije prebacivanja

Prva stvar koju treba učiniti je sakriti drugi obrazac postavljanjem neprozirnosti na 0:

#register( z-indeks: 21; neprozirnost: 0; )

Sjećate li se da je naš obrazac za prijavu imao z-indeks 22? Drugom obrascu dat ćemo z-indeks od 21, da ga stavimo “ispod” obrasca za prijavu.

A sada stvarno dobar dio: prebacivanje obrazaca pomoću:target pseudo klase. Ono što zaista morate razumjeti o:targetu je da ćemo koristiti sidra da napravimo tranziciju. Normalno ponašanje sidrene veze je da skoči na cilj na stranici. Ali ne želimo nigdje skakati, samo želimo mijenjati forme. I ovdje dolazi naš trik koristeći dvije veze na vrhu stranice. Umjesto da se direktno povezujemo na drugi obrazac i rizikujemo da dobijete efekat "skakanja", mi zapravo stavljamo dvije veze na vrh stranice i dajemo im prikaz: nema. Ovo će izbjeći bilo kakvo preskakanje stranice. Kredit na kojem je kredit: pronašao sam ovaj trik na CSS3 kreiranju (na francuskom).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-indeks: 22; naziv-animacije: fadeInLeft; kašnjenje animacije: .1s; )

Evo šta se dešava: kada kliknemo na Pridruži nam se dugme, pokrećemo #toregister. Zatim radimo animaciju, koristeći selektor siblinga ~ da pronađemo naš #register element. Koristimo animaciju tzv fadeInLeft. Budući da „skrivamo“ formu koristeći nultu neprozirnost, koristit ćemo animaciju koja blijedi kako bi se pojavila. Također smo promijenili z-indeks, kako bi se pojavio na vrhu drugog obrasca.
Isto se dešava i za drugi oblik.

A evo i koda za animaciju. Koristimo CSS3 okvir za animaciju od Dan Eden-a i prilagodili smo ga za ovaj tutorijal.

Animate( trajanje-animacije: 0,5 s; funkcija-vremenske-vremenske animacije: jednostavnost; način punjenja animacije: oba; ) @keyframes fadeInLeft ( 0% ( neprozirnost: 0; transformacija: translateX(-20px); ) 100% ( neprozirnost : 1; transform: translateX(0); ) )

Forma koja "nestaje" imat će još jednu animaciju zbog koje će nestati na lijevo:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register(ime-animacije: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( neprozirnost: 1; transform: translateX(0); ) 100% ( neprozirnost : 0; transform: translateX(-20px); ) )

Sada možete koristiti druge animacije iz animate.css Dana Edena: samo prilagodite svoju .animate klasu i zamijenite nazive animacija. Također ćete pronaći neke prilagođene animacije na kraju animate-custom.css datoteke.

Pa, to je to ljudi. Nadam se da ste uživali u tutorijalu!

Imajte na umu da u nekim pretraživačima background-clip:text nije podržano. U Internet Explorer 9 prijelazi i animacije ne rade, tako da neće biti otmjenog mijenjanja oblika. U Internet Exploreru 8 i starijim verzijama:target pseudo-klasa nije podržana, tako da uopće neće raditi (vidjet ćete samo obrazac za prijavu).

Sastavili smo listu od 60 besplatnih obrazaca za prijavu koje možete koristiti na svojoj WordPress stranici, blogu, forumu itd. Svaki obrazac je temeljno testiran kako bi se osiguralo da radi i da je izvorni kod dostupan.

WordPress Login Customizer

Obrasci na ovoj listi kreirani su pomoću HTML/CSS-a. Ali u ovom slučaju, govorimo o najboljem dodatku za prilagođavanje korisničkog sučelja WordPress-a. Dolazi s više predložaka koji se mogu dodatno prilagoditi kako bi odgovarali dizajnu vaše web stranice. Pomoću ovog dodatka možete se riješiti dosadne stranice za prijavu na WordPress.

Skinuti

Pregled

Obrazac ovlašćenja br. 19

Živahno, energično i uzbudljivo - to je ono o čemu se radi u ovoj formi za prijavu. Potpuno je prilagodljiv, optimiziran za mobilnih uređaja i kompatibilan je sa svim glavnim web pretraživačima.

Skinuti

Pregled

Obrazac ovlašćenja br. 20

Gradijentna pozadina, crno dugme sa hover efektom, polja za unos login i lozinke, kao i odeljak „Zaboravili ste lozinku?“. Sve se to nalazi u obrascu ovlaštenja broj 20.

Skinuti

Pregled

Skinuti

Animirani obrazac za prijavu

Zgodan mali formular za prijavu Kada kliknete na dugme “LOGIN” koje se nalazi na lijevoj strani, prikazat će se obrazac za prijavu.

U formatu ove lekcije kreiraćemo CSS formular za prijavu, pokazat ću vam kako povezati ikone fonta, kako postaviti transparentnost za elemente i koristiti animirane efekte lebdenja u obrascu.

Okvir obrazaca u HTML-u

Prvo kreiramo okvir obrasca. Otvorite html šablon i napišite sljedeći kod između oznaka.

Kreirajmo blok koji će služiti kao kontejner za obrazac. Dodijelimo mu klasu .container, postavimo formu sa unosom u nju.Prvi unos je za unos logina type="text" name="username" placeholder="Unesite svoju prijavu" !}, sekunda input type="password" name="password" placeholder="Unesite lozinku" !} prihvata lozinku nakon koje slijedi dugme za slanje. Ispod postavljamo natpis za oporavak lozinke, učinit ćemo to jednostavnom vezom.

Opisivanje elemenata forme u CSS-u

Zatim ćemo formatirati ove elemente forme. Kreirajmo dodatni CSS direktorij u koji ćemo smjestiti datoteke stilova. U njemu kreiramo datoteku style.css i povezujemo je sa našom stranicom.

Predlažem da sliku stavite u pozadinu; da bismo to učinili, napravimo dodatni img direktorij i postavimo našu sliku u njega. Uključujemo sliku u style.css za tijelo. Zapisujemo putanju do slike, izlazimo iz trenutnog direktorija, idemo u mapu img, a zatim naziv slike.

Body (pozadinska slika: url("../img/bg.png"); )

A( boja: #fff; ) a:hover( text-decoration: nema; )

Stilizirajmo kontejner sa .container formom. Postavimo širinu na 450 piksela, a visinu privremeno na 500 piksela. Postavimo boju na #182134 i centriramo je na sredinu margine ekrana: 250px auto 0 auto; . Postavite tekst unutar bloka u sredinu, sa uvlakom od 20 piksela na vrhu.

Kontejner (širina:450px; visina: 500px; boja pozadine: #182134; margina: 250px auto 0 auto; poravnanje teksta: centar; )

Kreirajmo zatim ulaz za unos Vašeg korisničkog imena i lozinke. Da ne bismo uticali na dugme, biramo ih po atributima teksta i lozinke, navodeći širinu od 300 piksela. , visine 50 vrhova. Povećajte tekst za 18 px, napravite uvlake između njih 25 px, zaokružite uglove border-radius: 4px; , tekst će biti pomjeren na 10 piksela. nalijevo.

Input,input( širina: 300px; visina:50px; veličina fonta: 18px; margin-bottom: 25px; granica-radijus: 4px; padding-left: 10px; )

Zatim ćemo centrirati inpyt tako što ćemo ih umotati u dodatni blok i dodijeliti klasu .dws-input. Napravimo prijelom linije nakon dugmeta i ubacimo sliku sa našim logom na vrhu prije dugmeta. Da biste to uradili, kopirajte ga u fasciklu img i upišite putanju img src="img/men.png" do njega.

Zatim ćemo opisati njegove stilove. Dodijelimo slici širinu i visinu od 120 piksela. , a zatim ga podignite malo iznad margine oblika: -60px 0 30px 0; , napravite otprilike votku na 5 vrhova. granica: 5px čvrsta #1a394f; , zaokruži uglove 50%.

Kontejner img( širina:120px; visina:120px; margina: -60px 0 30px 0; ivica: 5px čvrsta #1a394f; granica-radijus: 50%; )

Sada opišimo stilove dugmadi. Dodijelimo mu klasu .dws-submit i dodijelimo joj stilove. Dodjeljujemo uvlake, povećavamo tekst za 15 piksela, činimo ga bijelim, a pozadinu gumba plavom, uklanjamo votku i pravimo kvadrat na dnu, kao i pokazivač.

Dws-submit ( padding: 13px 30px; margina: 5px 0 20px 0; veličina fonta: 15px; boja: #fff; boja pozadine: #2ca8c6; granica: nema; granica-dno: 4px čvrsta #6ee9fd; kursor: pokazivač ; )

Da centriramo ulaze i dugme, postavimo ih zasebno, svaki u svoj blok. Hajde da opišemo stilove dugmeta kada se lebdi. Napravimo glatki prijelaz, promijenimo boju gumba u bijelu, a istovremeno će se font promijeniti u taman.

Dws-submit:hover(prijelaz: sve 0,5s; pozadina: #fff; boja: #2c536c; )

Napravimo plavi blok na vrhu našeg oblika, box-shadow: 0 -5px 0 #3adbfd; , i dodajte ga u sliku box-shadow: 0 -5px 0 #3adbfd; . Učinimo pozadinu obrasca malo transparentnijom; da bismo to učinili, napisat ćemo ovu boju u RGBA formatu.

Koristim uslugu w3schools.com, spustim se na Color Picker, unesem našu boju u obrazac i pretvorim je u RGB. Kopirajte i zalijepite u stil kontejnera.

Kontejner (širina:450px; visina: 500px; boja pozadine: rgba(24, 33, 52, 0.7); margina: 250px auto 0 auto; poravnanje teksta: centar; senka okvira: 0 -5px 0 #3adbfd; ) .container img( širina:120px; visina:120px; margina: -60px 0 30px 0; granica: 5px čvrsta #1a394f; granica-radijus: 50%; sjena okvira: 0 -5px 0 #3adbfd; )

Za efekat, zaokružite donje uglove, za ovo ćemo napisati border-radius: 0 0 10px 10px; .

Dodavanje ikona fonta

Dodajmo ikone u obliku fontova, idite na uslugu fontawesome.io i preuzmite ih na svoj kompjuter. Raspakiramo arhivu, kopiramo folder fontova koji sadrži fontove i kopirajmo datoteku stilova u css direktorij. Zatim povezujemo stilove sa stranicom.

Odaberimo ikone za naše unose, za to idemo na stranicu Ikone, prvi je da povežete stil za unos login, koristite korisnik, kopirajte njegov kod f007, i opišite ga u stilovima koristeći pseudo-element.

Povezivanje porodice fontova: "FontAwesome"; , zatim samu ikonu, postavite je apsolutno na margine, povećajte je za 30 piksela, centrirajte je i promijenite boju.

Dws-input::before( font-family: "FontAwesome"; sadržaj: "\f007"; pozicija: apsolutna; veličina fonta: 30px; padding: 10px 0 0 7px; boja: #2c536c; )

Pomerimo malo tekst u unosu - padding-left: 40px; .

Odaberimo drugu ikonu sa imenom lock, kopirajte njegov kod f023, i opisati njegove stilove.

Da biste to učinili, odaberite drugi element .dws-input:nth-child(2)::before(), i napišite sadržaj slike: " \f023";.

Dws-input::before( font-family: "FontAwesome"; sadržaj: "\f007"; pozicija: apsolutna; veličina fonta: 30px; padding: 10px 0 0 7px; boja: #2c536c; ) .dws-input: nth-child(2)::before(sadržaj: "\f023"; )

Dws-input:hover::before( boja: #319ebc; prijelaz: sve 0.3s; )

Takođe, stilovi lebdenja za unose.

Dws-input input:hover(box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35); )

Radi praktičnosti, hajde da ih umotamo u blok sa .social klasom i opišemo njihove stilove. Promijenimo njihovu boju u bijelu, povećajmo ih za 20 piksela, učinimo širokim 20 piksela i dodajmo malo podloge.

Dws-social i( boja: #fff; veličina fonta: 20px; širina: 20px; padding: 10px; )

Zatim ćemo opisati lebdeće stilove. Napravimo bijeli blok, promijenimo pozadinu ikone u tamnu, zaokružimo uglove i prikažemo kursor pri lebdenju.

Društveni i:hover( boja pozadine: #fff; boja: #1a394f; radijus granice: 5px; kursor: pokazivač; )

Uklonimo visinu bloka forme, koja je postavljena na samom početku, i na njegovo mjesto dodamo donji padding-bottom: 20px; .

U principu, to je sve, dobili smo prilično lijepu formu koja se može povezati na stranicu i koristiti za autorizaciju.

Pokušajte napraviti nešto originalno koristeći primjer ove lekcije, vježbajte i ne zaboravite podijeliti ovaj materijal.

Povratak

Upotreba

Obrazac upotrebe

wp_login_form(array("echo" => true, "redirect" => site_url($_SERVER["REQUEST_URI"]), "form_id" => "loginform", "label_username" => __("Korisničko ime"), "label_password " => __("Lozinka"), "label_remember" => __("Zapamti me"), "label_log_in" => __("Prijava"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "rememberme", "id_submit" => "wp-submit", "remember" => true, "value_username" => NULL, "value_remember" => false)); $args (niz/niz) Niz argumenata koji kontroliraju rezultat.
Podrazumevano: podrazumevane postavke

Argumenti parametara $args

echo (logično) Prikaz (1) ili povratak (0).
Podrazumevano: 1 preusmjeravanje (linija) URL na koji će se prenijeti nakon autorizacije.
Podrazumevano: trenutna stranica form_id (linija) atribut id oznake

.
Zadano: "loginform" label_username (linija) Tekst naslova za polje "korisničko ime".
Zadano: "__("Korisničko ime")" label_password (linija) Tekst naslova za polje "lozinka".
Zadano: "__("Lozinka")" label_remember (linija) Tekst naslova za polje "zapamti me".
Zadano: "__("Zapamti me")" label_log_in (linija) Pošalji tekst dugmeta.
Zadano: "__("Prijava")" id_username (linija) vrijednost atributa id:
Zadano: "user_login" id_password (linija) vrijednost atributa id:
Zadano: "user_pass" id_remember (linija) vrijednost atributa id:
Zadano: "sjeti me" id_submit (linija) vrijednost atributa id:
Zadano: "wp-submit" zapamti (logično) Zapamtite vrijednosti polja (1) ili ne (0).
Podrazumevano: 1 vrijednost_korisničko ime (linija) Zadano korisničko ime.
Zadano: "" value_remember (linija) Vrijednost atributa vrijednosti, polje "zapamti me". Podrazumevano je 1 - polje za potvrdu je označeno. 0 - polje za potvrdu je poništeno.
Podrazumevano: 1

Primjeri

#1. Prikaz normalnog oblika:

Prikazat će se:

#2 Ostavite na istoj stranici kada unesete pogrešnu login/lozinku

Podrazumevano, ako se u takav obrazac unese neispravan dnevnik, korisnik će biti preusmjeren na osnovnu stranicu za autorizaciju koja ukazuje na grešku.

Da biste ovo promijenili i zadržali korisnika na istoj stranici, čak i ako je unio pogrešne podatke, možete koristiti zakačicu wp_login_failed:

## Održava korisnika na istoj stranici kada unese pogrešnu prijavu/lozinku u formular za autorizaciju wp_login_form() add_action("wp_login_failed", "my_front_end_login_fail"); function my_front_end_login_fail($username) ( $referrer = $_SERVER["HTTP_REFERER"]; // odakle je došao zahtjev // Ako postoji referer, a ovo nije stranica wp-login.php if(!empty($referrer ) && !strstr($ referrer,"wp-login") && !strstr($referrer,"wp-admin")) ( wp_redirect(add_query_arg("login", "failed", $referrer)); // preusmjeravanje i dodati parametar upita?login= neuspješan izlaz; ) )

#3 WordPress formular za registraciju

Ne postoji posebna funkcija za prikaz obrasca za registraciju. Stoga se obrazac može prikazati pisanjem vlastitog HTML koda. Evo primjera HTML koda za obrazac za registraciju:

Lista promjena

Od verzije 3.0.0

Uvedeno.

Kod wp formular za prijavu: wp-includes/general-template.php WP 5.2.3

true, // Zadana vrijednost "preusmjeravanja" vraća korisnika na URI zahtjeva. "preusmjeravanje" => (is_ssl() ? "https://" : "http://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"], "form_id" => "loginform", "label_username" => __("Korisničko ime ili adresa e-pošte"), "label_password" => __("Lozinka"), "label_remember" => __ ("Zapamti me"), "label_log_in" => __("Prijava"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "rememberme", "id_submit" => "wp-submit", "remember" => true, "value_username" => "", // Postavite "value_remember" na true kao zadanu oznaku "Zapamti me" u polju za potvrdu. "value_remember" => false,); /** * Filtrira zadane izlazne argumente obrasca za prijavu. * * @s obzirom na verziju 3.0.0 * * @see wp_login_form() * * @param niz $defaults Niz zadanih argumenata obrasca za prijavu. */ $args = wp_parse_args($args, apply_filters("login_form_defaults", $defaults)); /** * Filtrira sadržaj za prikaz na vrhu obrasca za prijavu. * * Filter evaluira samo prateći element oznake za otvaranje obrasca. * * @od 3.0.0 * * @param string $content Sadržaj za prikaz. Zadano prazno. * @param array $args Niz argumenata formulara za prijavu. */ $login_form_top = apply_filters("login_form_top", "", $args); /** * Filtrira sadržaj za prikaz u sredini obrasca za prijavu. * * Filter procjenjuje samo praćenje lokacije na kojoj je prikazano polje "login-password" *. * * @od 3.0.0 * * @param string $content Sadržaj za prikaz. Zadano prazno. * @param array $args Niz argumenata formulara za prijavu. */ $login_form_middle = apply_filters("login_form_middle", "", $args); /** * Filtrira sadržaj za prikaz na dnu obrasca za prijavu. * * Filter vrši evaluaciju neposredno prije elementa oznake za zatvaranje obrasca. * * @od 3.0.0 * * @param string $content Sadržaj za prikaz. Zadano prazno. * @param array $args Niz argumenata formulara za prijavu. */ $login_form_bottom = apply_filters("login_form_bottom", "", $args); $form = " "; if ($args["echo"]) ( echo $form; ) else ( vrati $form; ) )

Celibat formular za prijavu html. HTML forme

Kreiranje tabele u bazi podataka

Veza sa bazom podataka

Struktura sajta

Već ste registrovani

Provjera valjanosti e-pošte pomoću jQueryja

Registracija korisnika

Autorizacija korisnika

Provjeravam poštansku adresu

Provjera lozinke

Izađite sa stranice

Da li vam se svidio članak?

HTML

Ulogovati se

Prijaviti se

CSS

Stiliziranje oba oblika koristeći CSS3

Kreiranje animacije prebacivanja

WordPress Login Customizer

Kreativni obrazac za prijavu

Obrazac ovlašćenja br.1

Obrazac ovlašćenja br. 2

Obrazac ovlaštenja br.3

Obrazac ovlaštenja br. 4

Obrazac ovlašćenja br. 5

Obrazac ovlaštenja br. 6

Obrazac ovlašćenja br. 7

Obrazac ovlaštenja br.8

Obrazac ovlašćenja br. 9

Obrazac ovlaštenja br. 10

Obrazac ovlašćenja br. 11

Obrazac ovlaštenja br. 12

Obrazac ovlašćenja br. 13

Obrazac ovlašćenja br. 14

Obrazac ovlaštenja br. 15

Obrazac ovlašćenja br. 16

Obrazac ovlašćenja br. 17

Obrazac ovlašćenja br. 18

Obrazac ovlašćenja br. 19

Obrazac ovlašćenja br. 20

Padajući obrazac za prijavu

Plutajući obrazac za registraciju

Jednostavan formular za autorizaciju

Flat Login – Formular za registraciju

Prijavite se pomoću samostalnog SCSS obrasca

Animirani obrazac za prijavu

Obrazac za prijavu koristeći CSS3 i HTML5

Prijavite se sa efektom potresanja

Boxy obrazac za prijavu

Animirani obrazac za prijavu

Okvir obrazaca u HTML-u

Opisivanje elemenata forme u CSS-u

Dodavanje ikona fonta

Povratak

Upotreba

Obrazac upotrebe

Argumenti parametara $args

Primjeri

#1. Prikaz normalnog oblika:

#2 Ostavite na istoj stranici kada unesete pogrešnu login/lozinku

#3 WordPress formular za registraciju

Lista promjena

Kod wp formular za prijavu: wp-includes/general-template.php WP 5.2.3