Formular de autentificare necondiționat html. Autentificare și formular de înregistrare cu HTML5 și CSS3

Etichete HTML, definind formulare HTML pe site

Creăm site-uri web și pagini individuale pe Internet pentru a comunica cu vizitatorii.

Formulare HTML sunt folosite pentru a înregistra vizitatori pe site, pentru sondaje interactive și vot, vă permit să trimiteți mesaje, să faceți cumpărături și așa mai departe. HTML Formularul este creat cu un singur scop: colectarea și apoi transferul de informații pentru procesare către un script de program sau prin e-mail.

Exemplu de formular HTML | conectare

Etichete, atribute și valori

- determinați forma.
name="" - definește numele formularului.
method="" - determină modul în care datele sunt trimise din formular. Valori: „get” (implicit) și „post” . Metoda „post” este mai des folosită, deoarece vă permite să transferați cantități mari de date.
action="" - determină adresa URL prin care datele sunt trimise spre prelucrare. În cazul nostru - enter_data.php ..
- definiți elemente de formular precum butoane, comutatoare, câmpuri de text pentru introducerea datelor.
type="text" - definește un câmp de text pentru introducerea datelor.
type="parolă" - definește un câmp pentru introducerea unei parole, în timp ce textul este afișat ca asteriscuri sau cercuri.
type="checkbox" - definește un buton radio.
type="hidden" - definește element ascuns forme – folosite pentru a transmite Informații suplimentare la server.
size="25" - lungime câmp de textîn caractere.
maxlength="30" - numărul maxim permis de caractere introduse.
value="" - definește valoarea care va fi trimisă pentru procesare dacă se referă la butoane radio sau butoane radio. Valoarea acestui atribut ca parte a unui câmp de text sau a unui buton va fi afișată ca, de exemplu, John sau Login în exemplul de mai sus.

Exemplu de formular HTML | Comentarii pe site

<a href="https://obanracer.ru/ro/gde-sozdat-lichnuyu-internet-stranicu-primer-sozdaniya-html-stranicy-v.html">Exemplu HTML</a> forme

Etichete, atribute și valori

action="http://site/comments.php" - determină adresa URL la care vor fi trimise datele din formular.
id="" - definește numele, identificatorul elementului de formular.
name="" - definește numele elementului de formular.
- definiți un câmp de text în formular.
cols="" - determină numărul de coloane din câmpul de text al formularului.
rows="" - Specifică numărul de rânduri pentru câmpul de text al formularului.

Dacă între pune text, acesta va fi afișat în interiorul casetei ca exemplu care este ușor de eliminat.

Exemplu de formular HTML | Lista verticală

Formulare HTML

Etichete, atribute și valori

- definiți o listă cu articole din care să alegeți.
size="" - determină numărul de poziții vizibile din listă. Dacă valoarea este 1, avem de-a face cu o listă derulantă.
- definiți pozițiile (punctele) listei.
value="" - conține valoarea care va fi trimisă prin formular către adresa URL specificată pentru procesare.
selected="selected" - selectează elementul din listă ca exemplu.

Exemplu de formular HTML | Lista cu bara de defilare

Prin creșterea valorii atributului size="", obținem o listă cu o bară de derulare:

Formulare HTML

Pentru această opțiune, folosim indicatorul multiple="multiple", care face posibilă selectarea mai multor elemente. Absența acestuia vă permite să selectați un singur articol.

type="submit" - definește un buton.

type="reset" - definește un buton de resetare.

value="" - definește eticheta butonului.

Vezi suplimentar:

Designul formularului de autentificare este foarte important pentru orice site web. Am colectat câteva șabloane de pagină de conectare receptive descărcare gratuită. The formular de conectare face parte dintr-un site web. Când mergem la un site web și dorim acces complet, trebuie să ne înscriem și să ne autentificăm. Formularul de conectare al oricărui site web poate fi găsit în orice parte a site-ului. Va fi pe partea dreaptă sau stângă. Niciun site web fără autentificare și formular de înscriere nu este complet. Deci este important pentru orice site web. Este foarte dificil să creezi un formular de conectare prin HTML CSS fără un dezvoltator profesionist.

HTML este o structură și CSS este design. HTML5 și CSS3 sunt versiunea actualizată pentru proiectare. Unele dintre formularele de conectare create prin această codificare de actualizare pot fi descărcate direct. Dezvoltatorul a distribuit acest formular gratuit. Acestea pot fi folosite pentru orice nevoi personale sau de afaceri.

Utilizați gratuit acest șablon de pagină de conectare receptivă și vă puteți construi singur. Puteți personaliza și schimba orice culoare sau stil. De asemenea, vă puteți conecta baza de date, jquery. Deci, acest șablon de autentificare este cu adevărat util și important.

Am împărtășit această postare câteva șabloane gratuite de formulare de conectare html5 css3. Această colecție va fi mărită. Încercăm să colectăm mai multe șabloane de bootstrap de pagină de autentificare.

forma de proiectare a materialului

Acest formular de conectare arată cu adevărat minunat și simplu. Puteți edita și schimba culoarea interfeței. Design simplu dar foarte profesionist.

DESCARCARE DEMO

Când trebuie să proiectați orice formular de conectare la aplicație, puteți utiliza acest Formular de autentificare Material Design. Va fi perfect pentru aplicația dvs.

DESCARCARE DEMO

Avatar SVG animat

Șablonul de autentificare animat are o cerere mare. Dacă vrei să-l folosești profesia ta. Acest formular de conectare cu avatar SVG animat este mai bun pentru tine.

DESCARCARE DEMO

Efect de agitare formular de autentificare

Acesta este un formular de conectare simplu și are un anumit efect și folosește afacerea dvs. profesională.

DESCARCARE DEMO

CSS3 Animation Cloud și formular de autentificare

Dacă aveți o afacere în cloud sau planificați orice tip de afacere în cloud, puteți utiliza acest CSS3 Animation Cloud și formularul de autentificare.

DESCARCARE DEMO

formular de conectare curat

Acesta este un design foarte curat și denumește, de asemenea, același formular de autentificare Clean. Utilizați acest formular site-ul dvs. curat.

DESCARCARE DEMO

Formular de autentificare pe HTML5

Acest formular de autentificare este conceput HTML5 și utilizat pentru cel mai bun site al dvs.

DESCARCARE DEMO

Formular de autentificare numai validare CSS

DESCARCARE DEMO

Formular de conectare CSS

DESCARCARE DEMO

Formular de conectare Batman

DESCARCARE DEMO

Formular de autentificare cu Materializecss

DESCARCARE DEMO

Formular de conectare pentru material unghiular

DESCARCARE DEMO

Formular de conectare receptiv

DESCARCARE DEMO

Formular de conectare receptiv

DESCARCARE DEMO

Formă plată simplă cu încărcător rotativ

DESCARCARE DEMO

Conectați-vă la Everdwell

Formularele sunt concepute pentru a trimite date de la utilizator la serverul web. Formularele în HTML pot consta din câmpuri de text și zone de text, casete de selectare și butoane radio și liste derulante. Toate acestea sunt elemente de formă. Fiecare element servește pentru a transmite o anumită valoare site-ului.
În esență, un formular HTML este o pagină web în care vezi zone pentru introducerea informațiilor. După ce completați formularul și faceți clic pe butonul de trimitere, informațiile din formular sunt împachetate și trimise la serverul web pentru procesare de către un script de server (fișier handler). După procesare, o altă pagină web vă este returnată ca răspuns. Următoarea figură demonstrează clar cum funcționează formularul:

Nu este nimic dificil în crearea formularelor HTML. Cel mai simplu mod de a vă face o idee despre formulare este să analizați puțin cod HTML și apoi să vedeți cum funcționează. Următorul exemplu arată sintaxa pentru crearea unui formular HTML simplu:

Exemplu: formular HTML simplu

Incearca-l tu insuti "

Prima mea forma:
Nume:
Nume de familie:

formă simplă

Element

Formularele sunt inserate în paginile web prin intermediul elementului . Este un container pentru tot conținutul formularului, inclusiv elemente precum câmpurile de text și butoanele, precum și orice alte etichete. limbaj HTML. Cu toate acestea, nu poate conține un alt element. .
Pentru a trimite formularul la server se folosește butonul „Trimite”, același rezultat se va obține dacă se apasă tasta „Enter” în cadrul formularului. Dacă nu există un buton Trimitere pe formular, tasta Enter poate fi folosită pentru a trimite.
Majoritatea atributelor elementului afectează procesarea formularului, nu designul acestuia. Cele mai comune dintre care sunt acțiuneși metodă. Atribut acțiune conține adresa URL la care vor fi trimise informațiile din formular pentru procesare de către server. Atribut metodă este metoda HTTP pe care browserele ar trebui să o utilizeze pentru a trimite datele din formular.

Element

Aproape toate câmpurile de formular sunt create folosind elementul (din engleză input - input). Aspect element se modifică în funcție de valoarea atributului său tip:

Iată câteva valori ale atributelor tip:

Introducerea textului și a parolei

Unul dintre cele mai simple tipuri de elemente de formular este un câmp de text, conceput pentru a introduce text dintr-o singură linie. Acest tip introducerea textului este setată implicit și, prin urmare, este câmpul cu o singură linie care va fi afișat dacă uitați să specificați atributul tip. Pentru a adăuga un câmp de introducere a textului pe o singură linie la un formular, ar trebui să fie în interiorul elementului atributul de înregistrare tip cu valoare text:

Câmpul de introducere a parolei este o variație a câmpului de text obișnuit. Acceptă aceleași atribute ca și un câmp de text cu o singură linie. Atribut Nume setează numele câmpului de introducere a parolei care va fi trimis la server împreună cu parola introdusă de utilizator. Pentru a crea un câmp pentru introducerea unei parole, trebuie să setați valoarea atributului parolei tip(parolă (engleză) - parolă):

Un exemplu de creare a unui formular cu un câmp de parolă:

Exemplu: câmpul pentru parolă

Incearca-l tu insuti "

Autentificarea dvs.:

Parola:

Autentificarea dvs.:

Parola:

Împreună cu acest atribut, puteți utiliza și atributul lungime maximă, a cărui valoare specifică numărul maxim de caractere care pot fi introduse linie dată. De asemenea, puteți seta lungimea câmpului de introducere folosind atributul mărimea. În mod implicit, majoritatea browserelor limitează câmpurile de text la 20 de caractere. Pentru a controla lățimea elementelor de formular noi, în loc de un atribut mărimea, vă recomandăm să utilizați foi de stil în cascadă (CSS).
Atribut valoare specifică valoarea care este afișată implicit în caseta de text atunci când formularul este încărcat. Introducând o valoare implicită în câmp, puteți explica utilizatorului ce fel de date și în ce format doriți să introducă utilizatorul aici. Acesta este ca o mostră, pentru că este mult mai convenabil pentru utilizator să completeze formularul, văzând un exemplu în fața lui.

Comutatoare (radio)

Element tip radio creează butoane radio care utilizează principiul logic „SAU”, permițându-vă să selectați doar una dintre mai multe valori: dacă selectați o poziție, atunci toate celelalte devin inactive. Sintaxa de bază a unui element buton radio este:

Atribut Nume pentru butoanele radio este obligatorie și joacă un rol important în gruparea mai multor elemente de butoane radio într-un grup. Pentru a combina butoanele radio într-un grup, trebuie să setați aceeași valoare atribut Numeși valoare de atribut diferită valoare. Atribut valoare setează valoarea butonului radio selectat pentru a fi trimis către server. Valoarea fiecărui element de buton radio trebuie să fie unică în cadrul grupului, astfel încât serverul să știe ce opțiune de răspuns a selectat utilizatorul.
Prezența atributului verificat(din engleză - set) la elementul comutator indică care dintre opțiunile propuse ar trebui să fie selectată implicit la încărcarea paginii, dacă este necesar. Acest atribut poate fi setat doar pentru un element comutator din grup:

Incearca-l tu insuti "

Cati ani ai?

sub 18
de la 18 la 24
de la 25 la 35
peste 35

Cati ani ai?

sub 18
de la 18 la 24
de la 25 la 35
peste 35

Casete de selectare

Element tip Caseta de bifat creează casete de selectare care sunt similare cu butoanele radio, în sensul că permit utilizatorului să aleagă dintre opțiunile pe care le furnizați. Principala diferență față de butoanele radio este că vizitatorul poate selecta mai multe opțiuni simultan, iar steagurile în sine sunt indicate prin pătrate, nu cercuri. Ca și în cazul butoanelor radio, un grup de casete de selectare este creat prin alocarea fiecărui element cu aceeași valoare de atribut. Nume, cu toate acestea, fiecare casetă de selectare are propriul său sens. Sintaxa de bază a casetei de selectare:

Atribut verificat, ca și în cazul butoanelor radio, specifică că caseta de selectare dată ar trebui să fie selectată în mod implicit atunci când pagina se încarcă. Acest atribut poate fi setat simultan pentru mai multe steaguri dintr-un grup.
Următorul exemplu utilizează casete de selectare pentru a specifica mai multe opțiuni de răspuns implicite:

Exemplu: Utilizarea butoanelor radio

Incearca-l tu insuti "

Jazz
Blues
stâncă
Chanson
Țară

Ce genuri muzicale vă plac?

Jazz
Blues
stâncă
Chanson
Țară

Butoane pentru confirmare (trimitere) și ștergere (resetare)

Element tip Trimite creează un buton care, atunci când este apăsat, trimite browserul către un script de server pentru a procesa datele introduse de utilizator în formular. Dacă creăm un buton care șterge formularul, atunci atribuim atributului tip valoarea „resetare”. element tip Trimite se poate atribui un atribut opțional Nume. Atribut valoare este folosit în acest element pentru a specifica textul care indică eticheta de pe buton. Implicit, în browsere, butonul este scris „Trimite” (Trimite), dacă această inscripție nu vă convine, introduceți-o singur. Deoarece stilurile butoanelor de confirmare pot diferi în diferite browsere, este mai bine să personalizați singur stilul butonului folosind instrumente CSS sau să utilizați butoane grafice.
Creați butoane de confirmare și ștergere:

Exemplu: se utilizează trimiterea și resetarea

Incearca-l tu insuti "

Făcând clic pe butonul Resetare, se resetează toate datele introduse de utilizator.

atribut de acțiune.

Principal pentru element

Fișierul de procesare se află pe server mytestserver.comîn dosar folderul de numeși numele script-ului serverului care va procesa datele - obrabotchik.php. Lui îi vor fi transferate toate datele introduse de dumneavoastră în formularul de pe pagina web. Extensia .php indică faptul că formularul specificat este procesat de un script PHP. Managerul în sine poate fi scris într-o altă limbă, de exemplu, poate fi limbajul de scripting al lui Python, Ruby etc.
Este recomandabil să setați întotdeauna valoarea atributului acțiune. Dacă formularul trebuie să trimită valori pe aceeași pagină în care se află, specificați un șir gol ca valoare a atributului acțiune: action="".

atributul metodei

Atribut metodă specifică modul în care informațiile trebuie trimise către server. Alegerea metodei de trimitere a formularului depinde de datele care trebuie trimise împreună cu acesta. Aici volumul acestor date joacă un rol major. Cele mai populare două metode de a transmite datele brute ale formularului dvs. de la browser la server sunt: OBȚINEși POST. Metoda este setată la oricare la alegerea dvs. și, dacă nu ați specificat-o, va fi folosită implicit OBȚINE. Să luăm în considerare aplicarea fiecăruia dintre ele.

Metoda POST

Metodă POSTîmpachetează datele formularului și le trimite la server fără ca utilizatorul să le observe, deoarece datele sunt conținute în corpul mesajului. Browser web atunci când utilizați metoda POST trimite o cerere către server constând din anteturi speciale urmate de date de formular. Deoarece conținutul acestei solicitări este disponibil numai pentru server, POST utilizate pentru a transfera date confidențiale, cum ar fi parolele, detaliile cardului bancar și alte informații personale ale utilizatorilor. Metodă POST potrivită și pentru trimiterea unor cantități mari de informații, deoarece, spre deosebire de metodă OBȚINE, nu are limită pentru numărul de caractere transmise.

metoda GET

După cum știți deja, sarcina principală a unui browser este să primească pagini web de la server. Deci, când folosești metoda OBȚINE, browserul dvs. primește pur și simplu pagina web așa cum o primește întotdeauna. Metodă OBȚINE de asemenea, include datele formularului, dar le adaugă la sfârșitul adresei URL înainte de a trimite cererea către server. Pentru a înțelege cum funcționează metoda OBȚINE hai sa-l vedem in actiune. Deschideți primul exemplu din acest tutorial (Exemplu: un formular HTML simplu) într-un bloc de note (cum ar fi Notepad++) și faceți o mică modificare a codului HTML:

acestea. a inlocui POST pe OBȚINE.
Salvați fișierul cu un nume filename.htmlși reîmprospătați pagina browserului (F5), apoi completați formularul like Vasya Pupkinși faceți clic pe butonul Trimiteți. În bara de adrese a browserului veți vedea ceva de genul acesta:

File_name.html?firstname=Vasya&lastname=Pukin

Acum vedeți numele fiecărui element de formular, precum și valoarea acestuia, chiar aici în adresa URL.
URL-ul este separat de restul datelor din formular printr-un semn de întrebare, iar numele variabilelor și valorile sunt separate printr-un ampersand (&) .
Această metodă ar trebui utilizată dacă nu transferați cantități mari de informații.
Această metodă nu va funcționa dacă datele din formularul dvs. sunt sensibile, cum ar fi stocarea unui număr de card bancar sau a unei parole.
În plus, metoda OBȚINE nu este potrivit dacă doriți să trimiteți fișiere către server împreună cu formularul.

Gruparea elementelor de formular

Elementele de formular care sunt legate în sens pot fi grupate între etichete

și

. Se va afișa browserul

ca o cutie în jurul unui grup de elemente de formă. Aspectul cadrului poate fi modificat folosind Cascading Style Sheets (CSS).
Pentru a adăuga un titlu pentru fiecare grup, aveți nevoie de un element A care specifică textul antetului grupului care urmează să fie încorporat în cadru.

Câmpul de introducere a parolei este un câmp de text obișnuit, textul introdus în care, în funcție de browser, este afișat sub formă de asteriscuri sau puncte. Această caracteristică este concepută pentru a se asigura că nimeni nu se uită la parola introdusă. Deși textul introdus nu este afișat pe ecran, informațiile introduse sunt transmise serverului în text clar, fără criptare. Prin urmare, utilizarea acestui câmp nu asigură securitatea datelor și poate fi interceptat.

Sintaxa de creare este următoarea.

Atributele sunt aceleași cu atributele câmpului de text și sunt enumerate în Tabelul 1. unu.

Câmpul de parolă este utilizat pe scară largă pe site-uri pentru autorizarea utilizatorilor și restricționarea accesului la secțiunile site-ului în care trebuie să vă confirmați autoritatea. Exemplul 1 arată cum se creează astfel de câmpuri.

Exemplu 1. Câmp pentru parolă

Câmpul pentru parolă

Autentificare:

Parola:

Ca rezultat, obținem următoarele (Fig. 1).

Orez. 1. Tip de câmp cu o parolă

Proprietățile stilului sunt aplicabile câmpului de parolă, care setează parametrii de culoare, fundal, cadru etc. Exemplul 2 arată adăugarea de imagini de fundal în câmpurile de formular. Să luăm ca bază stilul ca pentru câmpurile de text.

Exemplul 2: Adăugarea unei imagini într-o casetă de text

Câmpul pentru parolă

Rezultatul acestui exemplu este prezentat în Fig. 2. Imaginile sunt adăugate ca fundal, deci textul trebuie deplasat la dreapta folosind padding-left , altfel va fi afișat deasupra imaginii.

În acest articol, vei învăța cum se creează un formular de înregistrare și autorizare folosind HTML, JavaScript, PHP și MySql. Astfel de formulare sunt folosite pe aproape orice site, indiferent de tipul acestuia. Sunt create pentru forum, și pentru magazinul online și pentru rețelele sociale (cum ar fi Facebook, Twiter, Odnoklassniki) și pentru multe alte tipuri de site-uri.

Dacă aveți un site pe computerul local, atunci sper că aveți deja . Nimic nu va funcționa fără el.

Crearea unui tabel în baza de date

Pentru a implementa înregistrarea utilizatorilor, avem nevoie mai întâi 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 DB), acum trebuie să creăm un tabel utilizatoriiîn care vom adăuga utilizatorii noștri înregistrați.

Cum se creează un tabel în baza de date, am explicat și în articol. Înainte de a crea un tabel, trebuie să definim ce câmpuri va conține. Aceste câmpuri se vor potrivi cu câmpurile din formularul de înregistrare.

Deci, ne-am gândit, ne-am imaginat ce câmpuri va avea formularul nostru și creăm un tabel utilizatorii cu aceste câmpuri:

id- Identificator. Camp id ar trebui să fie în fiecare tabel din baza de date.
Nume- Pentru a salva numele.
numele de familie- Pentru a salva 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ă un index 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 0.
parola- Pentru a salva parola.

Dacă doriți ca formularul de înregistrare să aibă mai multe câmpuri, le puteți adăuga și aici.

Asta e, masa noastră utilizatorii gata. Să trecem la pasul următor.

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, iar în el scriem următorul script:

Eroare de conectare la baza de date. 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" ; ?>

Acest fișier dbconnect.php va trebui să fie conectat la manipulatorii de formulare.

Acordați atenție variabilei $address_site, aici am indicat numele site-ului meu de testare, la care voi lucra. În consecință, indicați numele site-ului dvs.

Structura site-ului

Acum să aruncăm o privire asupra structurii HTML a site-ului nostru.

Mutați antetul și subsolul site-ului în fisiere individuale, header.phpși footer.php. Le vom conecta pe toate paginile. Și anume, pe principal (fișier index.php), la pagina cu formularul de înregistrare (file form_register.php) și pe pagina cu formularul de autorizare (dosar form_auth.php).

Blocați cu link-urile noastre, înregistrareși autorizare, adăugați la antetul site-ului astfel încât acestea să fie afișate pe toate paginile. Un link va intra pe 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 ați înțeles deja, îl avem în dosar form_register.php.

Mergem la baza de date (în phpMyAdmin), deschidem structura tabelului utilizatoriiși vedem de ce câmpuri avem nevoie. Deci, avem nevoie de câmpuri pentru introducerea unui prenume și prenume, un câmp pentru introducerea unei adrese poștale (E-mail) și un câmp pentru introducerea unei parole. Și din motive de securitate, vom adăuga un câmp de intrare 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ă îi afișeze mesaje despre aceste erori.

Înainte de afișarea formularului, adăugăm un bloc pentru afișarea mesajelor de eroare din sesiune.

Și încă un moment, dacă utilizatorul este deja autorizat, și de dragul interesului, acesta intră direct pe pagina de înregistrare scriind în bara de adrese a browserului website_url/form_register.php, atunci în acest caz, în locul formularului de înregistrare, vom afișa un titlu pentru acesta că este deja înregistrat.

În general, codul fișierului form_register.php am prins asa:

Esti deja inregistrat

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

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

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

Noi, în valoarea atributului src pentru imagine, am specificat calea către fișier 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 punct.

În interiorul unei funcții imagineTtfText(), este specificată calea către font verdana.ttf. Deci aici este pentru funcţionare corectă captcha, trebuie să creăm un folder fonturi, și puneț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.

Validarea e-mailului cu jQuery

Orice formular necesită validarea datelor introduse, atât pe partea client (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 de e-mail introdusă să fie validă.

Pentru câmp dat input , setăm tipul de e-mail (type="email"), acest lucru ne avertizează puțin împotriva formatelor incorecte. Dar, acest lucru nu este suficient, deoarece prin intermediul inspectorului de cod pe care ni-l pune la dispoziție browser-ul, puteți modifica cu ușurință valoarea atributului tip Cu e-mail 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, adăugați codul de verificare de validare a e-mailului. Aici adăugăm codul pentru verificarea lungimii parolei introduse. Trebuie să aibă cel puțin 6 caractere.

Cu ajutorul acestui script, verificăm valabilitatea adresei de e-mail introduse. Dacă utilizatorul a introdus un e-mail greșit, atunci afișăm o eroare despre acesta și dezactivăm butonul de trimitere al formularului. Dacă totul este în regulă, atunci eliminăm eroarea și activăm butonul de trimitere al formularului.

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

Înregistrare utilizator

Trimitem formularul pentru prelucrare la dosar înregistrare.php, prin metoda POST. Nume fisierul dat handler 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ă includem fișierul creat anterior dbconnect.php(În acest fișier, am făcut o conexiune la baza de date). Și totuși, declară imediat celulele mesaje de eroareși mesaje_succesîn matricea globală a sesiunii. V mesaje_eroare vom înregistra toate mesajele de eroare care apar în timpul procesării formularelor și în mesaje_succes Să scriem mesaje fericite.

Înainte de a continua, trebuie să verificăm dacă formularul a fost depus. Un atacator poate privi valoarea unui atribut acțiune din formular și aflați ce fișier procesează acest formular. Și poate veni cu ideea să meargă direct la acest fișier introducând următoarea adresă în bara de adrese a browserului: http://site_site/register.php

Deci trebuie să verificăm dacă există 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. Vă reamintesc că variabila $address_site conține numele site-ului și a fost declarată în fișier dbconnect.php.

Eroare! Pagina principală .

"); } ?>

Valoarea captcha din sesiune a fost adăugată în timpul generării acesteia, în fișier captcha.php. Ca o reamintire, voi afișa încă o dată această bucată de cod din fișier captcha.php, unde valoarea captcha este adăugată la sesiune:

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

//Verificați captcha primită //Tăiați spațiile de la început și de la sfârșitul șirului $captcha = trim($_POST["captcha"]); 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, întoarceți utilizatorul la pagina de înregistrare și acolo vom afișa un mesaj de eroare că a introdus captcha greșit. $error_message. = "

Eroare! Ai introdus captcha greșit

"; // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] = $error_message; // 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(); ) // (2) Loc pentru următoarea bucată de cod )else( //Dacă captcha nu este trecut sau este ieșire gol ("

Eroare! Nu există cod de verificare, adică codul 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 se potrivesc cu numele câmpurilor de intrare din formularul nostru.

Dacă celula există, atunci tăiem spațiile de la început și de la sfârșitul șirului din această celulă, în caz contrar, redirecționăm utilizatorul înapoi la pagina cu formularul de înregistrare.

Mai departe, după ce spațiile au fost tăiate, adăugăm un șir la variabilă și verificăm această variabilă pentru golire, 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) Loc pentru următoarea bucată de cod".

/* Verificați dacă există date trimise din formular în tabloul global $_POST și includeți datele trimise în variabile obișnuite. = trim($_POST["first_name"]); //Verificați dacă variabila este goală 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"] .= "

Introdu numele tau

Câmp 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 șirului $last_name = trim($_POST["last_name"]); if(!empty($last_name)) ( // Pentru siguranță, 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"] .= "

Introduceți numele dvs. de familie

Câmp 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["email"]))( // Tăiați spațiile de la începutul și sfârșitul șirului $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Locul codului pentru a verifica formatul adresei de e-mail și unicitatea acesteia )else( // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages" ] .= "

Introduceți adresa dvs. de email

"; //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); //Criptați parola $parolă = md5($parolă."top_secret"); )else( // Salvați mesajul de eroare în sesiune. $_SESSION["messaje_de_eroare"] .= "

Introduceți parola

Domeniul are o importanță deosebită. e-mail. Trebuie să verificăm formatul adresei de corespondență primite și unicitatea acesteia în baza de date. Adică dacă un utilizator cu aceeași adresă de e-mail este deja înregistrat.

La locatia specificata" // (3) Locul codului de verificare a formatului adresei poștale și unicitatea acesteia" adăugați următorul cod:

//Verificați formatul adresei de e-mail primite folosind expresia 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 nevalid

"; //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(); ) // Verificați dacă există deja o astfel de adresă în baza de date $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); Dacă există sunt exact un rând, atunci utilizatorul cu această adresă de e-mail este deja înregistrat if($result_query->num_rows == 1)( //Dacă rezultatul nu este fals if(($row = $result_query->fetch_assoc())! = fals) ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Utilizatorul 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"] .= "

Eroare la interogarea bazei de date

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); ) /* închideți selecția */ $ result_query-> close(); //Oprește scriptul exit(); ) /* închide selecția */ $result_query->close();

Și așa, am terminat cu toate verificările, este timpul să adăugăm utilizatorul în 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."", "".$parola."")"); if(!$result_query_insert)( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Eroare solicitarea de a adăuga un utilizator la baza de date

Înregistrarea s-a încheiat cu succes!!!
Acum vă puteți conecta folosind numele de utilizator și parola.

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

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

În rest, dacă totul a mers bine, adăugăm și un mesaj la sesiune, dar deja 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.

Scriptul pentru verificarea formatului adresei de e-mail și a lungimii parolei se află în fișier header.php, deci va afecta și câmpurile din formularul respectiv.

Sesiunea este începută și în fișier header.php, deci în dosar form_auth.php sesiunea nu trebuie pornită, deoarece primim o eroare.

După cum am spus, 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 greșită sau o parolă scurtă, va primi imediat un mesaj de eroare. Un buton a intra va deveni inactiv.

După remedierea erorilor, butonul a intra devine activ și utilizatorul poate trimite formularul la serverul unde va fi procesat.

Autorizarea utilizatorului

Pentru a atribui valoare acțiune formularul de autorizare are un dosar auth.php, ceea ce înseamnă că formularul va fi procesat în acest fișier.

Deci, să deschidem fișierul auth.phpși scrieți codul pentru a procesa formularul de autorizare. Primul lucru de făcut este să porniți sesiunea și să includeți fișierul dbconnect.php pentru a se conecta la baza de date.

//Declară o celulă pentru a adăuga erori care pot apărea în timpul procesării formularelor. $_SESSION["error_messages"] = ""; //Declară o celulă pentru a adăuga mesaje de succes $_SESSION["success_messages"] = "";

/* Verificați dacă formularul a fost trimis, adică dacă s-a făcut clic pe butonul Autentificare. Daca da, atunci mergem mai departe, daca nu, atunci vom afisa utilizatorului un mesaj de eroare, in care sa se precizeze ca a mers direct pe aceasta pagina. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Loc 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 șirului $captcha = trim($_POST["captcha"]); if(!empty ($captcha ))( //Compară valoarea primită cu valoarea din sesiune. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != ""))( // Dacă captcha-ul este invalid, atunci returnăm utilizatorul la pagina de autorizare și acolo vom afișa un mesaj de eroare că a introdus captcha greșit. $error_message = "

Eroare! Ai introdus captcha greșit

Eroare! 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 din script(); ) //(2) Loc pentru procesarea adresei de e-mail //(3) Loc pentru procesarea parolei //(4) Loc pentru efectuarea unei interogări la baza de date )else ( //Dacă captcha nu este trecut exit("

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

"); }

Dacă utilizatorul a introdus corect codul de verificare, atunci mergem mai departe, altfel îl întoarcem pe pagina de autorizare.

Verificarea adresei de e-mail

// Tăiați spațiile de la începutul și sfârșitul șirului $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 expresia 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 în sesiune mesajul de eroare.$_SESSION["error_messages"] .= "

Ați introdus un e-mail nevalid

"; //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"] .= "

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

Nu există câmp pentru introducerea e-mailului

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 desemnat" //(3) Loc pentru procesarea parolei", noi scriem:

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["messageri_de_eroare"] . = "

Introduceți parola

Nu există câmp pentru introducerea unei parole

"; //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, folosind funcția md5 (), criptăm parola primită, întrucât în baza de date avem parole în formă criptată. Cuvânt secret suplimentar în criptare, în cazul nostru " top_secret" trebuie să fie cea care a fost folosită la înregistrarea utilizatorului.

Acum trebuie să faceți o interogare la baza de date pe o selecție de utilizator a cărei adresă de e-mail este egală cu adresa de e-mail primită și parola este egală cu parola primită.

//Interogare la baza de date la alegerea 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 utilizatorului 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, atunci salvați autentificarea și parola la matricea sesiunii. $_SESSION["email"] = $e-mail; $_SESSION["parolă"] = $parolă; //Readuceți utilizatorul la pagina principala antet ("HTTP/1.1 301 mutat permanent"); header("Locație: ".$address_site."/index.php"); )else( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Nume de utilizator și/sau parolă greșite

"; //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(); ) )

Ieșirea din site

Și ultimul lucru pe care îl punem în aplicare este procedura de iesire. Momentan, în antet afișăm link-uri către pagina de autorizare și pagina de înregistrare.

În antetul site-ului (fișier header.php), folosind sesiunea, verificăm dacă utilizatorul este deja autentificat. Dacă nu, atunci afișăm link-urile de înregistrare și autorizare, în caz contrar (dacă este autorizat), atunci în loc de link-urile de înregistrare și autorizare afișăm link-ul Ieșire.

O bucată de cod modificată din fișier header.php:

înregistrare

Ieșire

Când faceți clic pe linkul de ieșire de pe site, intrăm în fișier logout.php, unde pur și simplu distrugem celulele cu adresa de e-mail și parola din sesiune. După aceea, întoarcem 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 implementează și procesează formulare de înregistrare și autorizare utilizator pe site-ul dvs. Aceste formulare se găsesc pe aproape fiecare site, așa că fiecare programator ar trebui să știe cum să le creeze.

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 serverului (folosind limbaj PHP). Am învățat și noi implementați procedura de deconectare.

Toate scripturile sunt 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ă contactați, de asemenea, dacă observați vreo greșeală în articol, vă rog să-mi spuneți.

Planul de lecție (Partea 5):