Retururi

Utilizare

Model de utilizare

wp_login_form(array("echo" => true, "redirect" => site_url($_SERVER["REQUEST_URI"]), "form_id" => "loginform", "label_username" => __("Username"), "label_password" " => __("Parolă"), "label_remember" => __("Reține-mă"), "label_log_in" => __("Log In"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "rememberme", "id_submit" => "wp-submit", "remember" => true, "value_username" => NULL, "value_remember" => false)); $args(șir/matrice)
O serie de argumente care controlează rezultatul.

Implicit: setări implicite

$args Argumente ale parametrilor ecou(logic)
Afișează (1) sau returnează (0). Implicit: 1 redirecţiona(linia)
Adresa URL la care va fi transferată după autorizare. Implicit: pagina curentă redirecţiona form_id

.
atributul etichetei id Implicit: „loginform” redirecţiona label_username
Textul titlului pentru câmpul „nume de utilizator”. Implicit: "__("Nume de utilizator")" redirecţiona etichetă_parolă
Textul titlului pentru câmpul „parolă”. Implicit: "__("Parola")" redirecţiona label_remember
Textul titlului pentru câmpul „Ține-mă minte”. Implicit: „__(„Ține minte”)” redirecţiona label_log_in
Trimite textul butonului. Implicit: "__("Log In")" redirecţiona id_nume utilizator
valoarea atributului id: Implicit: „user_login” redirecţiona id_nume utilizator
id_parolă Implicit: „user_pass” redirecţiona id_nume utilizator
id_remember Implicit: „rememberme” redirecţiona id_nume utilizator
id_submit Implicit: „wp-submit” ecou amintește-ți
Afișează (1) sau returnează (0). Amintiți-vă valorile câmpului (1) sau nu (0). redirecţiona value_username
Nume de utilizator implicit. Implicit: "" redirecţiona value_remember
Afișează (1) sau returnează (0).

Valoarea atributului valoare, câmpul „ține minte”. Valoarea implicită este 1 - caseta de selectare este bifată. 0 - caseta de selectare este debifată.

Exemple

#1. Afișare în formă normală:

Va afișa:

Log in

pentru totdeauna

http://site/s

#2 Lăsați pe aceeași pagină când introduceți o autentificare/parolă incorectă

În mod implicit, dacă într-un astfel de formular este introdus un jurnal incorect, utilizatorul va fi redirecționat către pagina de autorizare de bază indicând eroarea.

## Menține utilizatorul pe aceeași pagină atunci când introduce o autentificare/parolă incorectă în formularul de autorizare wp_login_form() add_action("wp_login_failed", "my_front_end_login_fail"); function my_front_end_login_fail($username) ( $referrer = $_SERVER["HTTP_REFERER"]; // de unde a venit cererea // Dacă există un referrer și aceasta nu este pagina wp-login.php if(!empty($referrer) ) && !strstr($ referrer,"wp-login") && !strstr($referrer,"wp-admin")) ( wp_redirect(add_query_arg("login", "failed", $referrer)); // redirecționează și adăugați un parametru de interogare?login= ieșire eșuată ))

#3 Formular de înregistrare WordPress

Nu există nicio funcție specială furnizată pentru afișarea formularului de înregistrare. Prin urmare, formularul poate fi afișat scriind propriul cod HTML. Iată un exemplu de cod HTML pentru formularul de înregistrare:

" method="post">

Nume de utilizator

E-mail

Confirmarea înregistrării va fi trimisă pe e-mailul dumneavoastră.

Lista modificărilor

Din versiunea 3.0.0

Introdus.

Cod formular de conectare wp: wp-includes/general-template.php WP 5.3.2

true, // Valoarea implicită de „redirecționare” duce utilizatorul înapoi la URI-ul solicitării.

"redirect" => (is_ssl() ? "https://" : "http://") . $_SERVER[„HTTP_HOST”] . $_SERVER["REQUEST_URI"], "form_id" => "loginform", "label_username" => __("Nume de utilizator sau adresă de e-mail"), "label_password" => __("Parolă"), "label_remember" => __ ("Reține-mă"), "label_log_in" => __("Log In"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "rememberme", "id_submit" => „wp-submit”, „remember” => true, „value_username” => „”, // Setați „value_remember” la true pentru ca caseta de selectare „Remember me” să fie bifată.

„value_remember” => false,);

/** * Filtrează argumentele implicite de ieșire din formularul de conectare.

* * @since 3.0.0 * * @see wp_login_form() * * @param array $defaults O matrice de argumente implicite ale formularului de conectare.

*/ $args = wp_parse_args($args, apply_filters("login_form_defaults", $defaults));

" : "") . "

/** * Filtrează conținutul pentru a fi afișat în partea de sus a formularului de conectare.

* * Filtrul evaluează doar după elementul etichetei formularului de deschidere.

* * @since 3.0.0 * * @param string $content Conținut de afișat. Implicit gol. * @param array $args Matrice de argumente ale formularului de conectare. folosind HTML, JavaScript, PHP și MySql. Astfel de formulare sunt folosite pe aproape fiecare site web, indiferent de tipul acestuia. Sunt create pentru un forum, un magazin online, rețele sociale (cum ar fi Facebook, Twitter, Odnoklassniki) și multe alte tipuri de site-uri.

Dacă aveți un site web pe computerul dvs. local, atunci sper că aveți deja . Fără el, nimic nu va funcționa.

Crearea unui tabel în baza de date

Pentru a implementa înregistrarea utilizatorilor, în primul rând avem nevoie de o bază de date. Dacă îl aveți deja, atunci grozav, în caz contrar, trebuie să îl creați. În articol, explic în detaliu cum să faci asta.

Și așa, avem o bază de date (abreviată ca DB), acum trebuie să creăm un tabel utilizatoriiîn care vom adăuga utilizatorii noștri înregistrați.

Am explicat și cum se creează un tabel într-o bază de date în articol.

Înainte de a crea un tabel, trebuie să stabilim ce câmpuri va conține. Aceste câmpuri vor corespunde câmpurilor din formularul de înregistrare. utilizatorii Deci, ne-am gândit, ne-am imaginat ce câmpuri ar avea formularul nostru și am creat un tabel

• cu aceste câmpuri: id cu aceste câmpuri:- Identificator. Domeniu
• Fiecare tabel din baza de date ar trebui să-l aibă. prenume
• - Pentru a salva numele. nume
• - Pentru a păstra numele de familie. e-mail
• - Pentru a salva adresa poștală. Vom folosi e-mailul ca logare, deci acest câmp trebuie să fie unic, adică să aibă indexul UNIC. email_status
• - Un câmp pentru a indica dacă e-mailul este confirmat sau nu. Dacă e-mailul este confirmat, atunci acesta va avea valoarea 1, în caz contrar valoarea este 0. În mod implicit, acest câmp va avea valoarea 0. parolă

- Pentru a salva parola.

Toate câmpurile de tip „VARCHAR” trebuie să aibă o valoare implicită NULL.

Dacă doriți ca formularul de înregistrare să aibă alte câmpuri, le puteți adăuga și aici. utilizatorii Asta e, masa noastră

gata. Să trecem la următoarea etapă.

Conexiune la baza de date

Am creat baza de date, acum trebuie să ne conectăm la ea. Ne vom conecta folosind extensia PHP MySQLi. În folderul site-ului nostru, creați un fișier cu numele dbconnect.php

, și scrieți următorul script în el: Eroare de conexiune DB

. Descrierea erorii: „.mysqli_connect_error().”

"; exit(); ) // Setați codificarea conexiunii $mysqli->set_charset("utf8"); // Pentru comoditate, adăugați aici o variabilă care va conține numele site-ului nostru $address_site = "http://testsite .local" ; ?> În folderul site-ului nostru, creați un fișier cu numele Acest fișier

va trebui conectat la manevrele de formulare. Observați variabila, aici am indicat numele site-ului meu de testare la care voi lucra. Vă rugăm să indicați numele site-ului dvs. în consecință.

Structura site-ului

Acum să ne uităm la structura HTML a site-ului nostru.

Vom muta antetul și subsolul site-ului în fișiere separate, header.phpŞi footer.php. Le vom include pe toate paginile. Și anume pe pagina principală (fișier index.php), la pagina cu formularul de înregistrare (file form_register.php) și la pagina cu formularul de autorizare (dosar form_auth.php).

Blocați cu link-urile noastre, înregistrareŞi autorizare, adăugați-le în antetul site-ului, astfel încât să fie afișate pe toate paginile. Un link va fi introdus la pagina formular de înregistrare(fişier form_register.php) iar celălalt la pagina cu formular de autorizare(fişier form_auth.php).

Conținutul fișierului header.php:

Numele site-ului nostru

Ca rezultat, pagina noastră principală arată astfel:

Desigur, site-ul dvs. poate avea o structură complet diferită, dar acest lucru nu este important pentru noi acum. Principalul lucru este că există link-uri (butoane) pentru înregistrare și autorizare.

Acum să trecem la formularul de înregistrare. După cum înțelegeți deja, îl avem în dosar form_register.php.

Accesați baza de date (în phpMyAdmin), deschideți structura tabelului utilizatoriiși uită-te la ce domenii avem nevoie. Aceasta înseamnă că avem nevoie de câmpuri pentru introducerea prenumelui și prenumelui, un câmp pentru introducerea adresei poștale (E-mail) și un câmp pentru introducerea parolei. Și din motive de securitate, vom adăuga un câmp pentru introducerea unui captcha.

Pe server, ca urmare a procesării formularului de înregistrare, pot apărea diverse erori din cauza cărora utilizatorul nu se va putea înregistra. Prin urmare, pentru ca utilizatorul să înțeleagă de ce înregistrarea eșuează, este necesar să afișeze mesaje despre aceste erori.

Înainte de a afișa formularul, adăugați un bloc pentru a afișa mesajele de eroare din sesiune.

Si inca ceva, daca utilizatorul este deja autorizat, si de curiozitate merge direct pe pagina de inregistrare scriind in bara de adrese a browserului adresa_site-ului/form_register.php, apoi în acest caz, în locul formularului de înregistrare, vom afișa un antet în care se menționează că este deja înregistrat.

În general, codul fișierului form_register.php avem asta:

Ești deja înregistrat

În browser, pagina cu formularul de înregistrare arată astfel:

Prin utilizarea atribut necesar, am făcut toate câmpurile obligatorii.

Atenție la codul formularului de înregistrare unde este afișat captcha:

Am specificat calea către fișier în valoarea atributului src pentru imagine captcha.php, care generează acest captcha.

Să ne uităm la codul fișierului captcha.php:

Codul este bine comentat, așa că mă voi concentra doar pe un singur punct.

În interiorul unei funcții imagineTtfText(), este specificată calea către font verdana.ttf. Deci, pentru ca captcha să funcționeze corect, trebuie să creăm un folder fonturi, și plasați fișierul font acolo verdana.ttf. Îl puteți găsi și descărca de pe Internet, sau îl puteți lua din arhiva cu materialele acestui articol.

Am terminat cu structura HTML, este timpul să trecem mai departe.

Verificarea validității e-mailului folosind jQuery

Orice formular trebuie să verifice validitatea datelor introduse, atât pe partea clientului (folosind JavaScript, jQuery), cât și pe partea serverului.

Trebuie să acordăm o atenție deosebită câmpului E-mail. Este foarte important ca adresa poștală introdusă să fie validă.

Pentru acest câmp de introducere, setăm tipul de e-mail (type="email"), acest lucru ne avertizează ușor împotriva formatelor incorecte. Dar acest lucru nu este suficient, deoarece prin inspectorul de cod pe care ni-l pune la dispoziție browser-ul putem modifica cu ușurință valoarea atributului tip Cu - Pentru a păstra numele de familie. pe text, și atât, cecul nostru nu va mai fi valabil.

Și în acest caz, trebuie să facem o verificare mai fiabilă. Pentru a face acest lucru, vom folosi biblioteca jQuery din JavaScript.

Pentru a conecta biblioteca jQuery, în fișier header.phpîntre etichete , înainte de eticheta de închidere , adăugați această linie:

Imediat după această linie, vom adăuga codul de validare a e-mailului. Aici vom adăuga un cod pentru a verifica lungimea parolei introduse. Lungimea sa trebuie să fie de cel puțin 6 caractere.

Folosind acest script, verificăm valabilitatea adresei de e-mail introduse. Dacă utilizatorul a introdus un e-mail incorect, afișăm un mesaj de eroare în acest sens și dezactivăm butonul de trimitere a formularului. Dacă totul este în regulă, atunci eliminăm eroarea și activăm butonul de trimitere a formularului.

Și așa, am terminat cu validarea formularului din partea clientului. Acum îl putem trimite la server, unde vom face și câteva verificări și vom adăuga date în baza de date.

Înregistrarea utilizatorului

Trimitem formularul la dosar pentru procesare înregistrare.php, prin metoda POST. Numele acestui fișier de gestionare este specificat în valoarea atributului acţiune. Și metoda de trimitere este specificată în valoarea atributului metodă.

Deschideți acest fișier înregistrare.phpși primul lucru pe care trebuie să-l facem este să scriem o funcție de lansare a sesiunii și să conectăm fișierul creat anterior În folderul site-ului nostru, creați un fișier cu numele(În acest fișier am făcut o conexiune la baza de date). Și, de asemenea, să declarăm imediat celulele mesaje_de_eroareŞi mesaje_succesîn matricea globală de sesiuni. ÎN mesaje_eroare vom înregistra toate mesajele de eroare care apar în timpul procesării formularelor și în mesaje_succes, vom înregistra mesaje vesele.

Înainte de a continua, trebuie să verificăm a fost depus formularul deloc?. Un atacator poate privi valoarea atributului acţiune din formular și aflați ce fișier procesează acest formular. Și poate avea ideea să meargă direct la acest fișier introducând următoarea adresă în bara de adrese a browserului: http://adresa_site-ului/register.php

Deci, trebuie să verificăm o celulă în matricea globală POST al cărei nume se potrivește cu numele butonului nostru „Înregistrare” din formular. Astfel verificăm dacă butonul „Înregistrare” a fost apăsat sau nu.

Dacă un atacator încearcă să meargă direct la acest fișier, va primi un mesaj de eroare. Permiteți-mi să vă reamintesc că variabila $address_site conține numele site-ului și a fost declarată în fișier În folderul site-ului nostru, creați un fișier cu numele.

Eroare! pagina principală.

"); } ?>

Valoarea captcha din sesiune a fost adăugată atunci când a fost generată, în fișier captcha.php. Ca o reamintire, vă voi arăta din nou această bucată de cod din fișier captcha.php, unde valoarea captcha este adăugată la sesiune:

Acum să trecem la verificarea în sine. În dosar înregistrare.php, în interiorul blocului if, unde verificăm dacă a fost apăsat butonul „Înregistrare”, sau mai degrabă unde este indicat comentariul „” // (1) Spațiu pentru următoarea bucată de cod„noi scriem:

//Verificați captcha primită //Tăiați spațiile de la începutul și sfârșitul liniei $captcha = trim($_POST["captcha"]);

Eroare! if(isset($_POST["captcha"]) && !empty($captcha))( //Compară valoarea primită cu valoarea din sesiune. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Dacă captcha-ul nu este corect, atunci returnăm utilizatorul la pagina de înregistrare și acolo îi vom afișa un mesaj de eroare că a introdus captcha greșit . $error_message = "

Ai introdus captcha greșit

Eroare!"; // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] = $error_message; // Reveniți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: " .$address_site ."/form_register.php" //Opriți ieșirea scriptului( // (2) Loc pentru următoarea bucată de cod )else( //Dacă captcha nu este trecut sau este gol exit(); "

"); }

Nu există un cod de verificare, adică un cod captcha. Puteți merge la pagina principală.

În continuare, trebuie să procesăm datele primite din matricea POST. În primul rând, trebuie să verificăm conținutul matricei globale POST, adică dacă există celule acolo ale căror nume corespund cu numele câmpurilor de intrare din formularul nostru.

Apoi, după ce am tăiat spațiile, adăugăm linia la variabilă și verificăm această variabilă dacă nu este goală, apoi trecem mai departe, altfel redirecționăm utilizatorul înapoi la pagina cu formularul de înregistrare;

Lipiți acest cod în locația specificată" // (2) Spațiu pentru următoarea bucată de cod".

/* Verificați dacă există date trimise din formular în matricea globală $_POST și includeți datele trimise în variabile obișnuite.*/ if(isset($_POST["first_name"]))( //Tăiați spațiile de la început și sfârșitul șirului $first_name = trim($_POST["first_name"] //Verificați variabila pentru golire if(!empty($first_name))( // Pentru siguranță, convertiți caracterele speciale în entități HTML $first_name = htmlspecialchars($first_name, ENT_QUOTES) )else( // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Introduceți numele dvs

Câmpul de nume lipsește

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) if( isset($_POST["last_name"]))( //Tăiați spațiile de la începutul și sfârșitul liniei $last_name = trim($_POST["last_name"]); if(!empty($last_name)) ( // Pentru securitate , convertiți caracterele speciale în entități HTML $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Vă rugăm să introduceți numele dvs. de familie

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) )else ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Câmpul numelui de familie lipsește

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) if( isset($_POST["email"]))( //Tăiați spațiile de la începutul și sfârșitul liniei $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Locația codului pentru verificarea formatului adresei de e-mail și a unicității acesteia )else( // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Introduceți adresa dvs. de e-mail

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) )else ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) if( isset($_POST["parolă"]))( //Tăiați spațiile de la începutul și sfârșitul șirului $parolă = trim($_POST["parolă"]); if(!empty($parolă)) ( $parolă = htmlcaractere speciale ($parolă, ENT_QUOTES); //Criptează parola $parolă = md5($parolă."top_secret");else( //Salvează mesajul de eroare în sesiune. $_SESSION["messageri_de_eroare"] . = "

Introduceți parola

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) )else ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) // (4) Locul pentru codul pentru adăugarea unui utilizator la baza de date

De o importanță deosebită este domeniul - Pentru a păstra numele de familie.. Trebuie să verificăm formatul adresei poștale primite și unicitatea acesteia în baza de date. Adică există vreun utilizator cu aceeași adresă de e-mail deja înregistrat?

La locatia specificata" // (3) Locația codului pentru a verifica formatul adresei poștale și unicitatea acesteia" adăugați următorul cod:

//Verificați formatul adresei de e-mail primite folosind o expresie regulată $reg_email = "/^**@(+(*+)*\.)++/i";

//Dacă formatul adresei de e-mail primite nu se potrivește cu expresia regulată if(!preg_match($reg_email, $email))( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Ați introdus un e-mail incorect

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) // Verificăm dacă o astfel de adresă este deja în baza de date $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); sunt exact un rând, ceea ce înseamnă că utilizatorul cu această adresă de e-mail este deja înregistrat if($result_query->num_rows == 1)( //Dacă rezultatul obținut nu este fals if(($row = $result_query->fetch_assoc()) ) != fals) ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Un utilizator cu această adresă de e-mail este deja înregistrat

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); )else( // Salvați mesajul de eroare la sesiune $_SESSION["error_messages"] .= "

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); ) /* închiderea selecției */ $ result_query-> close( //Oprirea scriptului exit() /* inchiderea selectiei */ $result_query->close();

Și așa, am terminat cu toate verificările, este timpul să adăugăm utilizatorul la baza de date. La locatia specificata" // (4) Locul pentru codul pentru adăugarea unui utilizator la baza de date" adăugați următorul cod:

//Interogare pentru a adăuga un utilizator la baza de date $result_query_insert = $mysqli->query("INSERT INTO `users` (prenume, prenume, e-mail, parolă) VALUES ("".$prenume."", "".$nume ." ", "".$email.", "".$parolă."")");

if(!$result_query_insert)( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Eroare la solicitarea de adăugare a utilizatorului la baza de date

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); )else( $_SESSION["success_messages"] = "
Inregistrarea a avut succes!!!

Acum vă puteți autentifica folosind numele de utilizator și parola.

"; //Trimite utilizatorul la antetul paginii de autorizare ("HTTP/1.1 301 Mutat permanent"); header ("Locație: ".$address_site."/form_auth.php"); ) /* Completarea cererii */ $ result_query_insert-> close(); //Închide conexiunea la baza de date $mysqli->close();

Dacă a apărut o eroare în cererea de adăugare a unui utilizator la baza de date, adăugăm un mesaj despre această eroare în sesiune și returnăm utilizatorul la pagina de înregistrare.

În rest, dacă totul a mers bine, adăugăm și un mesaj la sesiune, dar de data aceasta este mai plăcut și anume îi spunem utilizatorului că înregistrarea a avut succes. Și îl redirecționăm către pagina cu formularul de autorizare. header.php Scriptul pentru verificarea formatului adresei de e-mail și a lungimii parolei se află în fișier

, deci se va aplica și câmpurilor din acest formular. header.php Sesiunea este începută și în fișier form_auth.php, deci în dosar

Nu este nevoie să începem o sesiune, deoarece vom primi o eroare. După cum am spus deja, aici funcționează și scriptul pentru verificarea formatului adresei de e-mail și a lungimii parolei. Prin urmare, dacă utilizatorul introduce o adresă de e-mail incorectă sau o parolă scurtă, va primi imediat un mesaj de eroare. Un buton log in

va deveni inactiv. După cum am spus deja, aici funcționează și scriptul pentru verificarea formatului adresei de e-mail și a lungimii parolei. Prin urmare, dacă utilizatorul introduce o adresă de e-mail incorectă sau o parolă scurtă, va primi imediat un mesaj de eroare. Un buton După remedierea erorilor, butonul

devine activ, iar utilizatorul va putea trimite formularul la server, unde va fi procesat.

Autorizarea utilizatorului acţiune Pentru a atribui valoare handicapul de autorizare are un dosar specificat, aceasta înseamnă că formularul va fi procesat în acest fișier.

Și așa, deschideți fișierul handicapul de autorizare are un dosar specificatși scrieți codul pentru a procesa formularul de autorizare. Primul lucru pe care trebuie să-l faceți este să începeți o sesiune și să conectați fișierul În folderul site-ului nostru, creați un fișier cu numele pentru a se conecta la baza de date.

//Declară o celulă pentru a adăuga erori care pot apărea la procesarea formularului.

$_SESSION["error_messages"] = "";

Eroare!//Declară o celulă pentru adăugarea mesajelor de succes $_SESSION["success_messages"] = "";

"); }

/* Verificați dacă formularul a fost trimis, adică dacă s-a făcut clic pe butonul Autentificare. Dacă da, atunci mergem mai departe, dacă nu, atunci vom afișa utilizatorului un mesaj de eroare care indică faptul că a accesat direct această pagină.

Eroare! if(isset($_POST["captcha"]) && !empty($captcha))( //Compară valoarea primită cu valoarea din sesiune. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Dacă captcha-ul nu este corect, atunci returnăm utilizatorul la pagina de înregistrare și acolo îi vom afișa un mesaj de eroare că a introdus captcha greșit . $error_message = "

*/ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Spațiu pentru următoarea bucată de cod )else( exit("

Eroare! Ați accesat direct această pagină, deci nu există date de prelucrat. Puteți merge la pagina principală.

//Verificați captcha primit if(isset($_POST["captcha"]))( //Tăiați spațiile de la începutul și sfârșitul liniei $captcha = trim($_POST["captcha"]); if(! empty($captcha ))( //Compară valoarea primită cu valoarea din sesiune. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")) ( // Dacă captcha-ul este incorect, atunci returnăm utilizatorul la pagina de autorizare și acolo îi vom afișa un mesaj de eroare că a introdus captcha greșit $error_message = ".

Eroare!"; // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] = $error_message; // Readuceți utilizatorul la antetul paginii de autorizare ("HTTP/1.1 301 Mutat permanent"); header("Locație: " .$address_site ."/form_auth.php"); //Opriți scriptul exit()) )else( $error_message = "

"); }

Câmpul de introducere captcha nu trebuie să fie gol.

"; // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] = $error_message; // Readuceți utilizatorul la antetul paginii de autorizare ("HTTP/1.1 301 Mutat permanent"); header("Locație: " .$address_site ."/form_auth.php" //Opriți ieșirea scriptului( //(2) Loc pentru procesarea adresei de e-mail //(3) Loc pentru procesarea parolei //(4) Loc pentru compunere; o cerere către baza de date )else ( //Dacă captcha nu este trecut exit("

//Tăiați spațiile de la începutul și sfârșitul liniei $email = trim($_POST["email"]);

if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //Verificați formatul adresei de e-mail primite folosind o expresie obișnuită $ reg_email = " /^**@(+(*+)*\.)++/i" //Dacă formatul adresei de e-mail primite nu se potrivește cu expresia regulată if(!preg_match($reg_email, $email); ))( // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Ați introdus un e-mail incorect

"; //Readuceți utilizatorul la antetul paginii de autorizare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_auth.php"); //Opriți ieșirea din script(); ) )else ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) )else ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Câmpul pentru introducerea unei adrese poștale (e-mail) nu trebuie să fie gol.

Câmpul de introducere a e-mailului lipsește

"; //Readuceți utilizatorul la antetul paginii de autorizare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_auth.php"); //Opriți ieșirea din script(); ) // (3) Zona de procesare a parolei

Dacă utilizatorul a introdus o adresă de e-mail în format greșit sau valoarea câmpului adresei de e-mail este goală, atunci îl întoarcem la pagina de autorizare unde afișăm un mesaj despre aceasta.

Verificarea parolei Următorul câmp de procesat este câmpul pentru parolă. La locul specificat"//(3) Loc pentru procesarea parolei

", scriem:

Introduceți parola

If(isset($_POST["parolă"]))( //Tăiați spațiile de la începutul și sfârșitul șirului $parolă = trim($_POST["parolă"]); if(!empty($parolă))( $parolă = htmlspecialchars($parolă, ENT_QUOTES); //Criptează parola $parolă = md5($parolă."top_secret");else( //Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_auth.php"); //Opriți ieșirea din script(); ) )else ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Câmpul pentru parolă lipsește

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_auth.php"); //Opriți ieșirea din script(); ) Aici folosim funcția md5() pentru a cripta parola primită, deoarece parolele noastre sunt în formă criptată în baza de date. Un cuvânt secret suplimentar în criptare, în cazul nostru "" trebuie să fie cea care a fost folosită la înregistrarea utilizatorului.

Acum trebuie să faceți o interogare la baza de date pentru a selecta un utilizator a cărui adresă de e-mail este egală cu adresa de e-mail primită și a cărui parolă este egală cu parola primită.

//Interogare în baza de date pe baza selecției utilizatorului.

$result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND parola = "".$parola.""");

if(!$result_query_select)( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Eroare de interogare la selectarea unui utilizator din baza de date

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_auth.php"); //Opriți ieșirea din script(); )else( //Verificați dacă nu există niciun utilizator cu astfel de date în baza de date, apoi afișați un mesaj de eroare if($result_query_select->num_rows == 1)( // Dacă datele introduse se potrivesc cu datele din baza de date, apoi salvați login și parola pentru matricea sesiunilor $_SESSION["email"] = $_SESSION["password"] = $parolă //Readuceți utilizatorul la antetul paginii principale("HTTP/1.1 301 Mutat permanent"; ); ."/index.php"); )else( // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Autentificare și/sau parolă incorecte

"; //Readuceți utilizatorul la antetul paginii de autorizare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_auth.php"); //Opriți ieșirea scriptului(); ) ) Ieșiți de pe siteȘi ultimul lucru pe care îl punem în aplicare este

procedura de parasire a site-ului header.php. Momentan, în antet afișăm link-uri către pagina de autorizare și pagina de înregistrare. În antetul site-ului (fișier.

), folosind sesiunea verificăm dacă utilizatorul este deja autorizat. Dacă nu, atunci afișăm link-uri de înregistrare și autorizare, în caz contrar (dacă este autorizat), atunci în loc de link-uri de înregistrare și autorizare afișăm un link header.php:

Ieșire

O bucată de cod modificată din fișier

Înregistrare Ieșire Când faceți clic pe linkul de ieșire de pe site, suntem duși la un fișier logout.php.

, unde pur și simplu distrugem celulele cu adresa de e-mail și parola din sesiune. După aceasta, returnăm utilizatorul înapoi la pagina pe care a fost făcut clic pe link Ieșire

Cod fișier logout.php: Asta e tot. Acum știi cum

De asemenea, am învățat cum să validăm datele de intrare, atât pe partea client (în browser, folosind JavaScript, jQuery), cât și pe partea server (folosind PHP). Am învățat și noi implementează o procedură de părăsire a site-ului.

Toate scripturile au fost testate și funcționează. Puteți descărca arhiva cu fișierele acestui mic site de pe acest link.

Pe viitor voi scrie un articol unde voi descrie. Și mai am de gând să scriu un articol în care să explic (fără a reîncărca pagina). Deci, pentru a fi la curent cu lansarea de noi articole, vă puteți abona la site-ul meu.

Dacă aveți întrebări, vă rugăm să mă contactați, iar dacă observați vreo eroare în articol, vă rog să-mi spuneți.

Planul de lecție (Partea 5):

1. Crearea unei structuri HTML pentru formularul de autorizare
2. Prelucrăm datele primite
3. Afișăm salutul utilizatorului în antetul site-ului

Ți-a plăcut articolul?

Iată un exemplu de formular de înregistrare folosind HTML. Aici un programator poate afișa câte „Câmpuri de text” dorește. Numele din fața câmpului de text se numește „Etichetă”. La sfârșitul formularului de înregistrare există un buton „ADĂUGAȚI” în spatele căruia poate fi folosit orice link dorit. Odată făcut clic, acesta va redirecționa către acea destinație specială.

Iată un exemplu de formular de înregistrare folosind HTML. Aici un programator poate afișa câte „Câmpuri de text” dorește. Numele din fața câmpului de text se numește „Etichetă”. La sfârșitul formularului de înregistrare există un buton „ADĂUGAȚI” în spatele căruia poate fi folosit orice link dorit. Odată făcut clic, acesta va redirecționa către acea destinație specială.

Cod HTML pentru formularul de înregistrare

Iată un exemplu de formular de înregistrare folosind HTML. Aici un programator poate afișa câte „Câmpuri de text” dorește. Numele din fața câmpului de text se numește „Etichetă”. La sfârșitul formularului de înregistrare există un buton „ADĂUGAȚI” în spatele căruia poate fi folosit orice link dorit. Odată făcut clic, acesta va redirecționa către acea destinație specială.

În acest exemplu am arătat 9 „Câmp de text”. Mărimea casetei de text poate fi, de asemenea, modificată conform cerințelor.

înregistrare.html

Formular de înregistrare

Id:
Nume:
Curs:
Filiala:
Rollno:
Adresa de e-mail:
Nume_Utilizator:
Despre noi:
Parolă:

Formularele de conectare sunt peste tot pe web. Dar acum toate modelele de formulare de conectare sunt frumoase și au o interfață de utilizare bună, de aceea decidem să creăm aceste modele de șabloane de formulare de autentificare și să le distribuim gratuit.

Folosești rețelele sociale? Trebuie să treceți printr-un fel de formular de conectare. Ai un email? Te-ai alăturat vreun forum? Ai încercat să lași un comentariu pe un site WordPress? Pentru a obține acces la orice de pe internet, sunt șanse să fii nevoit să treci printr-un fel de proces de conectare. Probabil va trebui să vă înregistrați mai întâi, să vă înscrieți sau să lăsați câteva informații în urmă. Va trebui să utilizați un fel de formular de autentificare pentru a face orice pe internet.

Deci, ce legătură au formularele de autentificare cu HTML și CSS? Ambele sunt părțile esențiale ale formularelor de autentificare.

HTML (HyperText Markup Language) este un limbaj de marcare standard folosit pentru a crea pagini web. Elementele HTML sunt elementele de bază ale tuturor site-urilor web.

CSS (Cascading Style Sheet) este un limbaj folosit pentru a descrie aspectul și formatarea unui document scris într-un limbaj de marcare. Cum ar fi HTML!

Folosim HTML pentru a construi un site web și CSS pentru a-l face să arate frumos. Aceasta este ceea ce se confruntă majoritatea utilizatorilor în timp ce navighează pe web.

Am făcut o listă de 50 de modele de formulare de autentificare gratuite pe care le puteți utiliza pe site-ul dvs. WordPress, blog, forum sau oriunde altundeva. Aceasta este o listă aleasă manual de Colorlib pentru a asigura cea mai înaltă calitate a formularelor. Fiecare formular a fost testat temeinic pentru a se asigura că nu lipsesc componente și codul sursă este disponibil la fiecare descărcare. Desigur, sunteți liber să utilizați aceste formulare în scopuri personale și comerciale, fără a fi nevoie de atribuire.

Explorați 2,5 milioane de active digitale, inclusiv cele mai bune șabloane WordPress din 2019

Peste 2 milioane de articole de pe cea mai mare piață din lume pentru șabloane, teme și elemente de design HTML5. Indiferent dacă de asta aveți nevoie, fie că doriți doar câteva fotografii de stoc - toate acestea pot fi găsite aici la Envato Market.

DESCARCĂ ACUM

Personalizare autentificare WordPress

Restul listei și formularele de conectare bazate pe HTML/CSS, dar aici puteți vedea cel mai bun plugin de personalizare de conectare pentru WordPress. Vine cu mai multe șabloane definite pe care le puteți modifica în continuare pentru a se potrivi cu designul site-ului dvs. Acesta este acest plugin, în sfârșit puteți scăpa de pagina plictisitoare WordPress wp-admin și puteți crea o experiență cu adevărat unică pentru dvs. și utilizatorii dvs.

Descărcați

Formularul de autentificare 1 de la Colorlib

Formular de conectare simplu, creativ și vibrant, cu un fundal gradient. Îl poți folosi pentru tot felul de intenții, cum ar fi aplicații web, mobile sau desktop. Dar fiți creativ cu el dacă doriți.

Versiune WordPress

Design creativ formular de conectare

Formular de conectare simplu, dar creativ, creat folosind HTML5 și CSS3. Acest formular poate fi folosit și ca formular de înregistrare. Acesta este șablonul nostru preferat din această listă datorită flexibilității și asemănării sale care vă permite să creați

Versiune WordPress

Am căutat pe internet formulare interesante de autentificare, dar a fost foarte dificil să le găsim pe cele frumoase, prin urmare, am decis să avem părerea noastră asupra lor. Am dori să vă prezentăm 20 de formulare de conectare concepute și dezvoltate de echipa Colorlib.

Formularul de autentificare 2 de la Colorlib

Formular de conectare minimal și sofisticat de la Colorlib, cu un buton gradient cu animație și un logo. Folosiți-l, modificați-l și aveți-l ca un plus frumos pentru spațiul dvs. web deja ingenios.

Versiune WordPress

Formularul de autentificare 3 de la Colorlib

O pagină de autentificare superbă cu o imagine de fundal cu umbră și o casetă de formular gradient cu efect de trecere a butonului de conectare. Singura limitare pe care o ai este imaginația ta, așa că extinde-ți viziunea și folosește Formularul de autentificare 3 la întregul său potențial.

Versiune WordPress

Formularul de autentificare 4 de la Colorlib

Creativitatea nu cunoaște limite și nici Login Form 4. Iată-l, la dispoziție, gata și pregătit pentru a-l descărca și a-l folosi. Nu vă faceți griji nici pentru capacitatea de răspuns.

Versiune WordPress

Formularul de autentificare 5 de la Colorlib

Formă superbă, curată și modernă, cu opțiunea de conectare cu Facebook sau Google. Toate butoanele au un efect plăcut care condimentează experiența.

Versiune WordPress

Formular de autentificare 6 de la Colorlib

Dacă pagina ta este deja super îngrijită și ordonată, un formular de autentificare nu ar trebui să fie diferit. Iată unul care îți va îndeplini cu ușurință așteptările dacă minimalismul este ceașca ta de ceai.

Versiune WordPress

Formularul de autentificare 7 de la Colorlib

Un formular cu o opțiune triplă de autentificare la cont. Fie că preferă autentificarea pe Facebook, Twitter sau e-mail, acesta este tipul de instrument pe care trebuie să îl prezentați pe pagina dvs. Și dacă nu au deja un cont, îl poți conecta și cu pagina ta de înscriere.

Versiune WordPress

Formularul de autentificare 8 de la Colorlib

Un alt formular de conectare contemporan, la modă și atrăgător, cu totul rotunjit. Acesta este aplicabil în special utilizatorilor de telefonie mobilă datorită stilului său foarte popular cu colțurile rotunjite.

Versiune WordPress

Formularul de autentificare 9 de la Colorlib

Dacă doriți să evitați fundalul alb sau cu o singură culoare, aceasta este pagina de formular de conectare pe care ar trebui să o luați în considerare. Nu numai că acceptă un fundal complet al imaginii, dar vine și cu o suprapunere în gradient și o opțiune de conectare cu Facebook sau Google.

Versiune WordPress

Formular de autentificare 10 de la Colorlib

Un opus oarecum complet în comparație cu cel precedent este Formularul de autentificare 10. Aproape că nu ar putea fi mai minimalist, având în continuare această senzație de ultimă oră.

Versiune WordPress

Formular de autentificare 11 de la Colorlib

Cu colecția noastră de cele mai bune formulare de conectare HTML5 și CSS3, economisiți timp și efort (de asemenea, bani). În loc să construiți unul de la zero, iată un alt șablon ucigaș gata de utilizare pe care să îl utilizați.

Versiune WordPress

Formular de autentificare 12 de la Colorlib

Fundal de imagine cu o suprapunere de umbră albastră, nume, imagine și formularul obligatoriu, asta este cu Formularul de autentificare 12. Există, de asemenea, un efect de hover cool pe butonul de autentificare și vă oferă șansa de a-l conecta cu formularul de înregistrare pentru toți utilizatorii noi.

Versiune WordPress

Formular de autentificare 13 de la Colorlib

Un formular de înscriere pe ecran împărțit, în care o jumătate este dedicată unei imagini și cealaltă jumătate formularului. Este un instrument gratuit pe care îl puteți folosi chiar în acest moment. Doar descărcați aspectul și mergeți complet cu el.

Versiune WordPress

Formular de autentificare 14 de la Colorlib

În această colecție, avem un amestec de formulare de conectare simpliste și cele puțin mai complexe și avansate. Pe scurt, există ceva pentru toată lumea, iar Login Form 14 este mai mult pe latura minimalistă. Dar de ce chiar complicați cu un formular de conectare, nu? Fiecare a lui.

Versiune WordPress

Formular de autentificare 15 de la Colorlib

Deși păstrează lucrurile la minimum, o completare interesantă la Formularul de autentificare 15 este bannerul cu imagine chiar deasupra formularului. Cu această mică caracteristică, puteți face experiența puțin mai captivantă.

Versiune WordPress

Formular de autentificare 16 de la Colorlib

Acesta este un formular de conectare cu o imagine pe ecran complet deasupra căruia este plasat un formular cu câmpuri pentru nume de utilizator și parolă și un buton gradient cu efect de hover. Simplu și direct.

Versiune WordPress

Formular de autentificare 17 de la Colorlib

Pentru ca acesta să pară mai personal, acest șablon de formular de conectare încadrat este cel mai potrivit pentru dvs. Are o latură de imagine și o latură de formă, dar menține lucrurile la minimum, asigurând totodată profesionalismul.

Versiune WordPress

Formular de autentificare 18 de la Colorlib

Dacă vă place să vă diferențiați și să păstrați lucrurile originale, luați în considerare utilizarea Formularului de autentificare 18. În timp ce unii se bucură de paginile de autentificare foarte simple, ceilalți doresc să aibă câteva bunătăți suplimentare care să influențeze aspectul. Și dacă adaugi o imagine este ceea ce cauți, aceasta este pentru tine.

Versiune WordPress

Formular de autentificare 19 de la Colorlib

Vibrant, energic și care atrage atenția, despre asta se referă acest următor formular de conectare bazat pe HTML5 și CSS3. De asemenea, este pe deplin receptiv și pregătit pentru mobil, precum și compatibil cu toate browserele web majore.

Versiune WordPress

Formular de autentificare 20 de la Colorlib

Fundal degradat, buton negru de conectare cu efect de hover, câmpuri pentru nume de utilizator și parolă, împreună cu text personalizat și „Ați uitat parola?” secțiunea, da, toate acestea fac parte din Formularul de conectare 20. Sună copleșitor, dar în realitate, departe de asta.

Versiune WordPress

Formularul este ascuns dacă nu faceți clic pe opțiunea „Autentificare”. Funcție foarte bună pentru site-urile web moderne care doresc să evite să aibă o pagină separată pentru formularul de conectare. Puteți afișa formularul oriunde pe site-ul dvs. cu acest instrument puternic.

Descărcați

Un design pentru un formular de înregistrare folosind file și etichete de formular plutitoare.

Descărcați

Ceea ce a fost făcut inițial pentru a împiedica oamenii să intre pe site-ul WordPress al unei persoane, a devenit o formă cu adevărat populară datorită simplității și designului său îngrijit.

Descărcați

Autentificare plată – Formular de înscriere

După ce faceți clic pe butonul „Clic pe mine” din colțul din dreapta sus, veți obține o animație fluidă care transformă acest formular de autentificare în formular de înregistrare.

Descărcați

Conectați-vă cu formularul SCSS autonom

Acesta este un formular cu SCSS autonom. O extensie a CSS care adaugă putere și eleganță limbajului de bază. Vă permite să utilizați variabile, reguli imbricate, mixuri, importuri inline și multe altele.

Descărcați

Acesta este de fapt un formular de autentificare animat, cu partea de sus „Hei, autentificarea deja” transformându-se în formularul din partea de jos. Efecte de animație fluide.

Descărcați

Acesta este un exemplu despre cum să creați un formular simplu de conectare folosind HTML5 și CSS3. Acest formular folosește pseudo elemente (:după și:înainte) pentru a crea efectul de mai multe pagini. Aceste elemente sunt rotite folosind proprietatea de transformare CSS3. Acest formular folosește HTML5 pentru a facilita validarea și trimiterea.

Descărcați

Odată ce ați introdus o parolă greșită în acest formular, un efect de agitare plăcut vă va avertiza că nu ați introdus parola corectă. O soluție simplă și eficientă care va evidenția problema parolelor incorecte.

Descărcați

Un formular de conectare cu o mică surpriză. Încercați „admin” ca nume de utilizator și „1234” ca parolă, pentru o experiență completă.

Descărcați

Mic formular de conectare îngrijit. Odată ce faceți clic pe „LOGIN” din partea stângă, efectul de animație creează un mic formular de autentificare în partea dreaptă. Abordare cu siguranță unică!

Descărcați

Forma de proiectare a materialelor

Destul de simplu și ușor de utilizat formularul de conectare pe care îl puteți adăuga pe blogul dvs. sau pe orice alt site web și să condimenteze experiența. Nu este nevoie să vă complicați prea mult cu un lucru simplu, așa cum este formularul de autentificare. Chiar dacă doar strângeți abonați, puteți, de asemenea, să vă jucați cu acest aspect și să puneți lucrurile în mișcare.

Descărcați

Formular de fragment Bootstrap

Evident, acest următor formular gratuit de autentificare HTML5 se bazează pe bine-apreciatul cadru Bootstrap. Acest lucru vă spune că vă puteți aștepta la o flexibilitate plăcută pe care orice site web și element modern trebuie să o practice. Adresă de e-mail, parolă și o casetă de selectare pentru a bifa dacă un utilizator dorește ca platforma să-și amintească informațiile. Ușor și la obiect.

Descărcați

Indiferent de designul dvs. web principal, cu lucruri precum formularele de conectare, nu doriți să o complicați prea mult. În schimb, ați dori să păstrați totul simplu și să-l lăsați să treacă, astfel încât utilizatorii să își acceseze conturile fără probleme. Veți atinge acest obiectiv cu acest formular de conectare cu interfață de utilizare plată, fără îndoială.

Descărcați

Formular Trendy UI Kits

De la formulare de conectare super simple la cele cu puțin mai multă acțiune. Acesta este destul de asemănător în comparație cu ultimul, doar că veți observa un cadru în jurul formei. Fă-i să-și introducă numele sau numele de utilizator și parolele și pot intra în lumea ta uimitoare.

Descărcați

Tabloul de bord CSS3 HTML5 Formular

Toate formularele de conectare HTML5 și CSS3 pe care le găsiți în această listă sunt simplu de utilizat și ușor de atașat la platforma dvs. web. Acesta are chiar și un „Ați uitat parola?” chiar în partea de jos pentru toți cei care pur și simplu nu-și pot aminti parolele. Șablonul este perfect pentru a intra în tabloul de bord, dar îl puteți aplica și pentru alte nevoi.

Descărcați

Conectați-vă cu formularul de recuperare

Titlul spune cam totul; acesta este un formular de conectare îngrijit, curat și cu aspect minimal, cu recuperare. Ceea ce observați, de asemenea, este că nu există o „cutie” tradițională pe care să fiți obișnuit să vedeți utilizarea formularelor de conectare. Dacă doriți să faceți o diferență, acum știți ce aspect să alegeți.

Descărcați

Un formular de conectare plat gratuit, cu un aspect întunecat uimitor și elegant, cuplat cu un buton verde de îndemn. Sigur, puteți modifica instrumentul după preferințele dvs., dar îl puteți folosi exact așa cum este și îl puteți afișa pe site-ul dvs. într-o clipă. Joacă-te cu caracteristicile sale și configurați totul așa cum vă place.

Descărcați

Conectare transparentă

Chiar și un formular de conectare poate fi de natură super creativă și atrage atenția. În timp ce mulți rămân la aspectul simplu și de bază, există altora cărora le place special și exclusiv. Acest formular transparent de autentificare vă va ajuta cu siguranță. Cu un fundal de imagine și un formular deasupra, acest aspect vă poate urma branding-ul la un T.

Descărcați

Nu este nevoie să mergeți prea în profunzime cu această următoare autentificare, deoarece este destul de explicit. Este compatibil cu extensia Google Chrome, precum și cu butoanele de funcții pentru cei care nu sunt încă înscriși sau și-au pierdut parola. Dacă acesta este cel pe care îl căutați, atunci derularea până aici a fost mai mult decât meritată.

Descărcați

Formă plată elegantă

Un formular plat elegant pe care îl puteți atașa spațiului dvs. web ca fereastră pop-up sau anunț ca widget pe o pagină. Oricare ar fi cazul, vă va păstra abordarea profesională intactă. Este simplu și ușor pentru ochi și are, de asemenea, un CTA pentru toți cei care au ratat înscrierea în zona dvs. de membri. Folosește-l ca atare sau îmbunătățește-l după gustul tău.

Descărcați

Din ce în ce mai mulți proprietari de site-uri web implementează autentificări sociale și vă puteți alătura și dvs. tendinței. Acest formular gratuit de conectare cu integrare socială este opțiunea potrivită pentru a face pasul. Cu toate acestea, împreună cu butoanele Twitter și Facebook, aspectul prezintă și modul tradițional de a vă înscrie cu un e-mail.

Descărcați

Dacă parola dvs. este super complexă, uneori doriți doar să o introduceți într-un mod „afișare”. Oferiți aceeași funcție tuturor utilizatorilor dvs. cu formularul de autentificare afișați și ascundeți parola. Are un aspect întunecat uimitor cu detalii verzi perfecte pentru cei care sapă acest tip de modele. Desigur, nu ezitați să-l modificați și să îl reglați în funcție de nevoile dvs.

Descărcați

Înregistrați și încărcați formularul animat

Dacă exersezi deja animații și efecte speciale pe pagina ta, păstrează tendința și cu formularul de autentificare. În loc să creați propriul dvs., puteți pur și simplu să utilizați acest formular animat Log 'N Load, care va face truc. Odată ce treceți cu mouse-ul peste butonul de conectare, formularul se dezvăluie chiar în fața dvs. Are chiar și o încărcare circulară care îmbunătățește experiența.

Descărcați

Acest formular de conectare plat, modern și ușor de utilizat funcționează excelent pe toate dispozitivele, mobil, tabletă și desktop. De asemenea, puteți să vă jucați cu diferite ajustări și să modificați setările implicite în funcție de stilul site-ului dvs. web. Instrumentul are, de asemenea, efecte de hover, care adaugă o notă de sofisticare experienței generale.

Descărcați

Formă CSS3 cu umbră

Deși puteți adăuga această și acea funcție suplimentară pe site-ul dvs., mulți doresc să o lase fără distracție. Acest lucru este valabil și pentru efecte speciale, animație și alte lucruri. Cu toate acestea, o simplă atingere de creativitate sub formă de umbră vă poate face bine. În special pentru un formular de conectare, acest aparat special prezintă o umbră cu o margine rotunjită.

Descărcați

Acest widget de conectare simplu, modern și flexibil este mai mult decât următorul șablon de formular de conectare. Aspectul este curat și la obiect, oferind elementele de bază și apoi câteva. Și că „atunci unele” sunt butoane pentru a face legătura la secțiunea de nume de utilizator și parolă uitat. În plus, pentru toți cei nou în spațiul dvs., butonul de cont nou răstoarnă widgetul de conectare și afișează un . Inteligent!

Descărcați

Dețineți controlul deplin asupra site-ului dvs. Ceea ce adaugi sau eviți să adaugi pe pagina ta depinde de tine. Și dacă sunteți în căutarea formularului de autentificare HTML5 și CSS3 potrivit, avem foarte multe la dispoziție. În plus, toate sunt gratuite. Nu numai asta, dar le poți edita și ajusta în funcție de preferințele tale. Cât de tare este?

Descărcați

Forma Verde și Galbenă

Ziua Sfântului Patrick s-ar putea să nu fie astăzi, dar poți să urmezi în continuare tradiția și să-ți trezești brandul plin de verde. În loc să pierdeți timpul creând un formular de conectare cu un astfel de stil de la zero, puneți mâna pe acest formular verde și galben și numiți-l o zi. Este aici, la doar un clic distanță, gata și setat pentru a-l folosi și a-l folosi la maximum.

Descărcați

Combină simplitatea cu creativitatea și obții acest widget pentru formularul de autentificare dop cu un încărcător de rotire clar. Acesta din urmă apare numai după ce un utilizator își completează numele de utilizator și parola și apasă butonul de conectare. Dați-i drumul, încercați-l singur și veți vedea cât de minunat și atrage atenția este.

Descărcați

Formular protejat cu parolă

Formular atrăgător protejat prin parolă, care oferă trei șanse de a o introduce pe cea potrivită înainte de a vă oferi să-l recuperați. Nimic prea complicat, totuși rezultatul pare fantastic și suficient de adaptabil pentru a fi adăugat la site-ul sau aplicația dvs. fără probleme. Fă-l al tău, reglandu-i aspectul și fă-l să respecte reglementările tale de branding.

Descărcați

Dacă doriți să afișați o imagine pe tot ecranul pe pagina dvs. de conectare, atunci acest formular transparent de autentificare HTML5 și CSS3 este perfect pentru dvs. De asemenea, puteți adăuga marca sau logo-ul companiei și păstrați toate segmentele prezenței dvs. online la același nivel de expertiză. Încercați diferite modificări de personalizare, schimbați culoarea butonului de îndemn și îmbunătățiți-l cu stilul dvs. de semnătură.

Descărcați

Vorbind de modern, unii se gândesc la minimalism, în timp ce alții își imaginează ceva super creativ și avansat. Dacă primul este ceea ce căutați cel mai mult, atunci vă va plăcea acest formular de conectare modern, cu un efect de hover pe butonul de îndemn. Widgetul vă oferă, de asemenea, o opțiune de a-l conecta la pagina/formularul de recuperare a parolei.
Descărcați

Vă mulțumim că ați vizitat Colorlib și că ați citit acest articol! Apreciem foarte mult! Acum poate doriți să învățați cum să folosiți gratuit.

Dezvoltator web frontend și designer web specializat în dezvoltarea de teme WordPress gratuită și premium. Am început să învăț să codific acum 2 ani și acum sunt familiarizat cu CSS/HTML/JavaScript (jQuery) și PHP. Obsedat de performanța aplicației, experiența utilizatorului și simplitate.

Dezvăluire: Această pagină conține link-uri de afiliere externe care pot duce la primirea unui comision dacă alegeți să cumpărați produsul menționat. Opiniile de pe această pagină sunt ale noastre și nu primim bonus suplimentar pentru recenzii pozitive.

2018-08-15

Crearea unui formular de înregistrare

Buna draga vizitatoare!

Astăzi vom crea un formular de înregistrare conceput pentru a introduce datele contului atunci când plasați o comandă online. Ca urmare, folosind un login și o parolă, clienții se vor putea conecta la contul lor personal pentru a obține informații despre comenzile plasate. Prin urmare, în cazul nostru, elementele de înregistrare pot fi considerate ca una dintre secțiunile formularului de comandă online creat anterior.

Trebuie remarcat faptul că accentul principal aici va fi pe crearea elementelor HTML și validarea completării câmpurilor de formular pe partea clientului.

În același timp, pentru toate câmpurile, cu câteva excepții, vom folosi instrumente de validare folosind capabilitățile bogate ale HTML5. În comparație cu versiunile anterioare de HTML, când în aceste scopuri era necesară compilarea diverselor scripturi în JavaScript, acum această problemă se rezolvă mult mai ușor. Ceea ce putem verifica în practică.

Singura excepție va fi verificarea identității intrărilor inițiale și repetate ale parolei. Ceea ce vom face mai târziu folosind scriptul corespunzător.

În ceea ce privește elementele de stil care folosesc stiluri CSS, nu vom lua în considerare această problemă aici. Deoarece acest lucru a fost discutat suficient de detaliat în articolul anterior folosind exemplul de elemente din alte secțiuni ale formularului de comandă online. Și probabil că nu merită repetat.

• Formarea elementelor formularului de înregistrare
• Verificarea validării formularului din partea clientului
• Fișierele sursă ale site-ului

Formarea elementelor formularului de înregistrare

Să creăm câmpurile „Nume”, „Autentificare”, „E-mail”, „Parolă” și „Confirmare parolă” în formularul de înregistrare, folosit de obicei în aceste cazuri.

Pentru a face acest lucru, vom folosi etichete ca elemente HTML: conceput pentru a crea câmpuri de intrare și - etichetă pentru câmpul de intrare.

Fig.1 Corespondența elementelor HTML în formularul de înregistrare

În același timp, vom adăuga blocuri de înveliș suplimentare la unele elemente