Crearea unui formular de contact Bootstrap folosind PHP și AJAX. Scripturi PHP pentru procesarea formularelor HTML

Una dintre cele mai frecvente sarcini în practică este implementarea unui formular de feedback. Tobish își scrie codul HTML, îl proiectează în CSS, creează un script PHP care să proceseze datele primite de la utilizator și să le trimită către e-mailul nostru, scriind un script JS care să verifice formularul pentru adecvarea datelor de intrare, protejându-ne. descendenți din spam, astfel încât cutia poștală să nu se prăbușească din cauza atacurilor bot.

Toate punctele de mai sus vor fi luate în considerare în recenzia noastră și comentate în detaliu.

Deci, să începem să creăm un formular de feedback:

HTML

În primul rând, scriem cod HTML, acesta stabilește câmpurile pe care utilizatorul le va completa. Ele vor fi dezvoltate în viitor. Codul formularului arată astfel:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Nume: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefon: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Mesaj: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "trimite" />

Și vizual arată așa acum:

Sunt de acord, până acum totul este urât și nimic clar, dar tocmai am început.

Luați în considerare codul de mai sus în detaliu:

• < form method= "post" action= "mail.php" > …

  
  Pentru a crea un formular, trebuie să utilizați eticheta de formular. El este cel care determină începutul și sfârșitul formei pentru interpretul de cod. Ea, ca orice etichetă, are un set întreg de atribute, dar sunt necesare doar două pentru ca formularul să funcționeze, acestea sunt metoda (metoda de trimitere a unei cereri către server, postarea este utilizată în mod standard pentru formulare) și acțiune (indică calea către fișierul de gestionare a formularelor, și anume în acest fișier va conține un script PHP, care ne va trimite apoi valorile introduse de utilizator prin poștă, în cazul nostru vedem că acest fișier se numește mail.php și acesta se află în același director de site ca pagina pe care o luăm în considerare).

• < input maxlength= "30" type= "text" name= "name" />

  
  În continuare avem intrări. Acestea sunt de fapt câmpurile de formular în care utilizatorii vor introduce informațiile de care avem nevoie (tip = „text” indică faptul că va fi text). Atributul maxlength specifică câte caractere poate introduce utilizatorul în câmpul de formular dat. Cel mai important atribut este numele - specifică numele unui anumit câmp. Prin aceste nume scriptul PHP va procesa în continuare informațiile care vin în el. Dacă doriți, puteți seta și atributul substituent, care afișează text în interiorul câmpului care dispare când cursorul este plasat în interiorul acestuia. O problemă cu substituentul este că nu este acceptat de unele browsere mai vechi.

• < label for = "name" >Nume:

  
  Folosit dacă avem substituenți abandonați. Eticheta obișnuită de câmp, atributul for indică la ce câmp se referă eticheta dată. Valoarea indică numele câmpului care ne interesează.

• < textarea rows= "7" cols= "50" name= "message" >

  
  La fel ca și intrarea, este destinat ca utilizatorul să introducă informații, doar că de această dată câmpul este ascuțit pentru mesaje lungi. Rânduri specifică dimensiunea câmpului în linii, cols în caractere. În general, ei stabilesc înălțimea și lățimea câmpului nostru.

• < input type= "submit" value= "trimite" />

  
  Type="submit" ne spune că acesta este un buton pentru trimiterea formularului, iar value specifică textul care va fi în interiorul acestui buton.

• < div class = "right" >

  
  folosit numai pentru proiectarea vizuală ulterioară a formularului.

css

Pentru ca formularul nostru de feedback să pară prezentabil, trebuie să fie proiectat. Pentru a obține următorul rezultat:

Am folosit acest cod:

formular ( fundal: #f4f5f7; umplutură: 20px; ) formular . stânga, formă. dreapta (afișare: bloc inline; aliniere verticală: sus; lățime: 458px; ) form . dreapta ( padding- stânga: 20px; ) etichetă ( afișare: bloc; dimensiunea fontului: 18px; text- aliniere: centru; margine: 10px 0px 0px 0px; ) intrare, textarea ( chenar: 1px solid #82858D; padding: 10px; dimensiunea fontului: 16px; lățime: 436px; ) zona text (înălțime: 98px; marginea inferioară: 32px; ) input[ type= "submit" ] ( lățime: 200px; float: dreapta; chenar: niciunul; fundal: #595B5F; culoare: #fff; text-transform: majuscule; )

Nu văd rostul în a descrie CSS în detaliu, vă voi atrage atenția doar asupra punctelor cheie:

1. Nu este necesar să scrieți un design pentru fiecare etichetă din formular. Încercați să vă construiți selectoarele în așa fel încât să puteți stila toate elementele de care aveți nevoie în câteva linii de cod.
2. Nu utilizați etichete suplimentare după tip pentru a întrerupe linii și a crea indentări < br>, < p> și așa mai departe, aceste sarcini sunt gestionate perfect de CSS cu afișarea proprietăților: bloc și margine cu padding. Mai multe despre de ce nu ar trebui să utilizați < br> în aspect, în general, puteți citi eticheta br din articol, dar este cu adevărat nevoie? .
3. Nu utilizați aspectul tabelar pentru formulare. Acest lucru este împotriva semanticii acestei etichete, iar motoarele de căutare adoră codul semantic. Pentru a forma structura vizuală a documentului, etichetele div sunt suficiente pentru noi, iar afișarea: proprietățile inline-block stabilite în CSS (aranjează blocurile pe rând) și vertical-align: top (nu le permite să se împrăștie peste tot). ecran), le setăm înălțimea necesară și voilà, nimic de prisos și totul este aranjat așa cum avem nevoie.

Pentru cei care doresc să-și economisească timp la designul site-urilor, vă pot sfătui să utilizați framework-uri CSS atunci când creați site-uri, în special cele scrise de sine. Alegerea mea în acest sens este Twitter Bootstrap. Poate fi vizualizată o lecție despre proiectarea formularelor folosindu-l.

PHP

Ei bine, este timpul să ne facem forma funcțională.

Mergem în directorul nostru rădăcină al site-ului și creăm acolo fișierul mail.php, căruia i-am specificat anterior calea în atributul action al etichetei form.

În cele din urmă, codul său va arăta astfel:

\" javascript: history.back()\" >Înapoi

Puteți sări peste discuția despre părțile HTML și CSS ale acestui document. În esență, aceasta este o pagină obișnuită a site-ului, pe care o puteți proiecta după cum doriți și aveți nevoie. Să luăm în considerare cea mai importantă parte a acesteia - scriptul PHP pentru procesarea formularului:

$back = "

\" javascript: history.back()\" >Înapoi

Cu această linie creăm un link pentru a reveni la pagina anterioară. Deoarece nu știm dinainte de pe ce pagină va ajunge utilizatorul la aceasta, acest lucru se face folosind o funcție JS mică. În viitor, ne vom referi pur și simplu la această variabilă pentru a o afișa în locurile de care avem nevoie.

dacă (! gol ($_POST [ „nume” ] ) și ! gol ($_POST [ „telefon” ] ) și ! gol ($_POST [ „mail” ] ) și ! gol ($_POST [ „mesaj” ] ) ) ( // partea internă a handler-ului) altfel ( ecou „Vă rugăm să completați toate câmpurile pentru a trimite un mesaj! $back”; Ieșire; )

Aici fixăm verificarea formularului pentru plenitudinea câmpurilor. După cum ați ghicit, în partea $_POST["nume"] scriem valoarea atributului nume al intrărilor noastre între ghilimele.

Dacă toate câmpurile sunt completate, atunci scriptul va începe procesarea datelor în partea sa internă, dar dacă cel puțin un câmp nu a fost completat, atunci pe ecranul utilizatorului va fi afișat un mesaj cu o solicitare de completare a tuturor câmpurilor. din formularul ecou "Pentru a trimite un mesaj, completați toate câmpurile! $back" și un link pentru a reveni la pagina anterioară pe care am creat-o chiar de la prima linie.

Apoi, lipiți-l în interiorul handler-ului de formulare:

$nume = trim (strip_tags ($_POST [ "nume" ] ) ) ); $phone = trim (strip_tags ($_POST [ "telefon" ] ) ); $mail = trim (strip_tags ($_POST [ "mail" ] ) ); $message = trim (strip_tags ($_POST [ "mesaj" ] ) ) );

Astfel, am șters introducerea utilizatorului din etichetele html și spațiile suplimentare. Acest lucru ne permite să ne protejăm împotriva primirii de coduri rău intenționate în mesajele trimise către noi.

Verificările pot fi complicate, dar depinde de tine. Am stabilit deja protecția minimă pe partea serverului. Vom face restul din partea clientului folosind JS.

Nu recomand abandonarea completă a protecției formularelor pe partea de server în favoarea JS, deoarece, deși este extrem de rar, există persoane unice cu JS dezactivat în browser.

După curățarea etichetelor, adăugați mesajul care trimite:

Poștă ( „[email protected]”, „E-mail de la adresa_site-ului dvs.”, "V-am scris: " . $nume . "
Numărul lui: " . $telefon ."
Poșta lui: „ . $mail . "
Mesajul lui: „. $mesaj , „Content-type:text/html;charset=windows-1251”) ;

Această linie este angajată în formarea și transmiterea unui mesaj către noi. Se completează după cum urmează:

1. „[email protected]” - introduceți e-mailul dvs. între ghilimele aici
2. „Email from your_site_address” este subiectul mesajului care va fi trimis pe e-mail. Aici poți scrie orice.
3. „Ți-am scris: „.$name”. < br /> Numărul lui este: „.$telefon”. < br /> Poșta lui: „.$mail”. < br /> Mesajul acestuia este: ".$mesaj - formăm textul mesajului propriu-zis. $nume - introducem informațiile completate de utilizator accesând câmpurile de la pasul anterior, în ghilimele descriem ce înseamnă acest câmp, cu etichetă < br /> facem o întrerupere de linie, astfel încât mesajul în ansamblu să fie lizibil.
4. Content-type:text/html;charset=windows-1251 - la sfârșit există o indicație explicită a tipului de date transmis în mesaj și codificarea acestuia.

IMPORTANT!

Codificarea specificată în „capul” documentului ( < meta http- equiv= "Content-Type" content= „text/html; charset=windows-1251” /> ), codificarea din mesajul Content-type:text/html;charset=windows-1251 și în general codificarea fișierului PHP trebuie să se potrivească, altfel în mesajele primite prin poștă, în loc de litere rusești sau engleze, „cuvinte nebunești”. ” va fi afișat.

Mulți oameni nu indică în mod explicit codificarea mesajului trimis, dar acest lucru poate cauza probleme în viitor la unii clienți de e-mail (în poștă sosesc scrisori care nu pot fi citite), așa că vă recomand să o specificați oricum.

Verificarea formularului pentru caracterul adecvat al datelor de intrare

Pentru ca utilizatorii să nu rateze din neatenție câmpurile și să completeze totul corect, merită să verificați datele de intrare.

Acest lucru se poate face atât în ​​PHP pe partea de server, cât și în JS pe partea client. Folosesc a doua variantă, deoarece astfel o persoană poate afla imediat ce a greșit și poate corecta greșeala fără a face tranziții suplimentare de pagină.

Codul de script este inserat în același fișier în care avem partea HTML a formularului. Pentru cazul nostru, va arăta astfel:

< script>function checkForm(form) ( var name = form. name. value; var n = name. match(/ ^[ A- Za- zA- Za-z] * [ A- Za- zA- Za-z] + $/ ); dacă (! n) ( alertă( „Numele a fost introdus incorect, vă rugăm să corectați eroarea”) ; return false; ) var phone = form. telefon. valoare; var p = telefon. potrivire(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; dacă (! p) ( alertă( „Telefonul a fost introdus incorect”) ; return false; ) var mail = formular. Poștă. valoare; var m = mail . meci(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; dacă (! m) ( alertă( „E-mailul introdus este incorect, vă rugăm să corectați eroarea”) ; return false; ) returnează adevărat; )

Ei bine, acum analiza obișnuită:

Pentru asta, astfel incat atunci cand dai click pe butonul de trimitere al formularului, il avem validat agățăm lansarea scriptului nostru pe eticheta de formular:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Acum, punct cu punct, luăm compoziția cecului:

După cum puteți vedea, un astfel de mini cec este scris pentru fiecare dintre câmpurile noastre. Am evidențiat verificarea pentru un câmp din captura de ecran cu un pătrat roșu, pentru alte câmpuri are o structură similară, iar dacă trebuie să adăugați un câmp sau să-l eliminați, acum o puteți face cu ușurință.

Acest articol detaliază utilizarea variabilei PHP _SELF.

Ce este variabila PHP _SELF?

Variabila _SELF PHP returnează numele și calea fișierului curent (relativ cu rădăcina documentului). Puteți utiliza această variabilă în atributul de acțiune al formularului. Există, de asemenea, câteva nuanțe de care ar trebui să fii conștient. Desigur, nu putem ignora aceste nuanțe.

Să ne uităm la câteva exemple.

echo $_SERVER["PHP_SELF"];

1) Să presupunem că fișierul dvs. php se află la următoarea adresă:

http://www.yourserver.com/form-action.php

În acest caz, variabila PHP _SELF ar conține:

„/form-action.php”

2) Să presupunem că fișierul dvs. php se află la această adresă:

http://www.yourserver.com/dir1/form-action.php

PHP _SELF va fi:

„/dir1/form-action.php”

PHP _SELF în atributul de acțiune al formularului. De ce era ea acolo?

În mod obișnuit, variabila PHP _SELF este utilizată în atributul de acțiune al etichetei formular. Atributul acțiune specifică adresa la care va fi trimis conținutul formularului după confirmare (utilizatorul face clic pe butonul cu tip="submit"). De regulă, aceasta este aceeași pagină din care a plecat formularul.

Cu toate acestea, dacă redenumiți fișierul la care face referire formularul, va trebui să redenumiți numele fișierului în atributul acțiune, altfel formularul nu va funcționa.

Variabila PHP _SELF vă va scuti de corecții inutile, deoarece adresa paginii va fi generată automat pe baza numelui fișierului.

Să presupunem că aveți un fișier form-action.php și doriți ca formularul să fie trimis în același fișier după ce l-ați trimis. De obicei scris astfel:

Codul din partea de sus a paginii HTML va fi executat mai întâi. Prima linie de cod verifică dacă formularul a fost trimis sau nu. Dacă $_POST["submit"] există, atunci constructul IF este executat (TRUE) și va fi afișat numele introdus de utilizator.

Dacă variabila $_POST["submit"] nu există, atunci formularul nu a fost trimis și, în consecință, constructul IF nu va fi executat (FALSE). Prin urmare, numele de utilizator nu va fi afișat.

Puncte nedorite legate de variabila PHP _SELF

Variabila _SELF PHP este folosită pentru a obține numele și calea fișierului curent - bine, dar poate fi folosită și de hackeri - rău. Dacă pagina dvs. are PHP _SELF, utilizatorul poate introduce o bară oblică (/) și poate scrie scripturi XXS rău intenționate.

Luați în considerare un exemplu:

Utilizatorul va interacționa cu toate aceste câmpuri și butoane. Parent div cu clasa atribuită rândului - sintaxa clasică Bootstrap, creează un rând din elemente col. Coloanele din Bootstrap creează umplutură sau spațiere - adăugarea unei linii în jurul lor va elimina umplutura din stânga și din dreapta, iar coloanele se potrivesc perfect în containerul principal.

Am creat două coloane cu clasa col-sm-6 (50%) pe care le vom folosi pentru a ne separa formularul. În prima coloană col-sm-6 am creat o etichetă și un câmp pentru nume, în a doua coloană un câmp pentru e-mail. Fiecare dintre acestea include o etichetă cu un atribut corespunzător pentru care se referă la câmpul corespunzător. Fiecare dintre aceste coloane este înfășurată într-o clasă de grup de formulare care grupează semantic eticheta și câmpul împreună și adaugă, de asemenea, o mică umplutură în partea de jos.

Tipografie

Bootstrap vă permite să utilizați clasele de antet H1-H6. Aceste clase ne ajută să folosim elemente inline fără a adăuga o umplutură suplimentară sau a crea elemente de bloc. Am aplicat etichetelor clasa H4, mărindu-le rapid dimensiunea și făcându-le mai lizibile.

Clasa de control al formularului aplicată fiecărui câmp de intrare îi permite să se întinde pe întreaga lungime a containerului (100%). De asemenea, adaugă diverse stiluri pentru a îmbunătăți lizibilitatea textului (creșterea înălțimii textului, adăugarea unui chenar etc.).

După aceste coloane, adăugăm o casetă de text pentru mesaj. Din nou, includem acest lucru în clasa grupului de formulare și aplicăm stiluri similare etichetei și câmpului de text așa cum am făcut înainte.

Apel la acțiune

Și în final, adăugăm un buton. Bootstrap are mai multe clase pentru butoane diferite cu culori și stări diferite. Am decis să folosim butonul „succes” (btn-success), care este implicit verde. În plus, trebuie să adăugăm clasa btn pentru a reseta stilurile implicite ale butonului (chenar, umplutură, alinierea textului, greutatea fontului). Am aplicat clasa btn-lg care face butonul mai mare și în final clasa pull-right pentru a alinia butonul la dreapta.

După butonul nostru, am adăugat un div cu id-ul #msgSubmit și am aplicat următoarele clase: „h3 text-center hidden”. h3 creează un titlu mai mare, text-center (ai ghicit) face ca textul să se alinieze la centru și, în sfârșit, setăm clasa ascunsă, care setează atât proprietatea de afișare la none, cât și proprietatea de vizibilitate la ascuns (afișare: niciuna; vizibilitate : ascuns;).

Adăugarea unei funcții de trimitere

După cum puteți vedea în browser, am creat formularul de bază Bootstrap. Dar până acum ea nu a făcut absolut nimic. Următorul pas este să creați o funcție care acceptă intrarea utilizatorului și o trimite asincron la clasa noastră de mail PHP.

Deschideți scripts.js și copiați următorul cod:

$("#contactForm").submit(function(event)( // anulează transmiterea formularului event.preventDefault(); submitForm(); ));

Această bucată de cod este un fragment jQuery care acceptă o funcție de trimitere în ID-ul nostru #contactForm (așa cum a fost definit mai devreme). Pe baza acestei funcții, analizăm variabila eveniment, care stochează acțiunea de trimitere a formularului la funcție. Event event.preventDefault(); oprește trimiterea datelor din formular ca de obicei pentru a reîmprospăta pagina, deoarece nu este setată nicio acțiune de formular. În cele din urmă, funcția submitForm() este apelată; .

submitForm();

Apoi vom crea funcția submitForm(); :

Funcția submitForm()( // Inițiază variabile cu conținutul formularului var name = $("#name").val(); var email = $("#email").val(); var mesaj = $("#message") ").val(); $.ajax(( tip: "POST", url: "php/form-process.php", date: "name=" + nume + "&email=" + email + "&message=" + mesaj, succes: function(text)( if (text == "succes")( formSuccess(); ) ) )); ) function formSuccess()( $("#msgSubmit").removeClass("hidden"); )

Cele trei variabile dețin valorile tuturor intrărilor din formular și le atribuie unei variabile JavaScript care va fi folosită ulterior.

Inițializam un obiect AJAX în jQuery și setăm tipul de solicitare la post , URL-ul este un link către fișierul PHP, datele pe care dorim să le trimitem, iar la procesarea cu succes, funcția de succes este declanșată. Datele includ toate cele trei variabile combinate cu ID-ul/eticheta corespunzătoare. Funcția de apel invers este apelată atunci când obiectul Ajax primește cu succes informații din scriptul PHP. Funcția compară textul returnat și verifică dacă este egal cu șirul „succes”. Dacă totul este corect, atunci funcția formSuccess este rulată.

Funcția formSuccess elimină clasa ascunsă din #msgSubmit div pe care l-am aplicat mai devreme, arătând astfel textul.

Conectarea funcției de mail PHP

Trebuie doar să scriem un script PHP pentru a primi date și a trimite informațiile noastre folosind funcția de e-mail php încorporată. Deschide process.php și adaugă următorul cod:

Similar cu fragmentul de cod jQuery de mai sus, creăm și stocăm variabilele pe care dorim să le folosim. Din funcția de post, obținem trei variabile de intrare și le scriem valorile în aceleași variabile PHP. Variabila $EmailTo este o adresă de e-mail predefinită care este specificată în script și trimisă către e-mailul dvs. din formular. $Subject este un șir care este folosit ca subiect al e-mailului.

Corpul mesajului este format din trei variabile. Mai întâi, este indicat mesajul „Nume:”, apoi este adăugat caracterul de linie nouă /n. (linie nouă/întrerupere de linie). Aceasta se repetă și se combină cu variabila $body.

Pentru a trimite în sfârșit un mesaj, scriem o funcție pentru a trimite un mesaj. În variabila $success, returnăm rezultatul trimiterii, care include: destinatar, subiect, text și expeditor.

Pentru a iniția procesul de trimitere a e-mailului, îl putem apela într-o declarație if. De asemenea, ajută să verificați dacă totul a mers bine sau nu. Dacă funcția de mail a returnat valoarea „adevărat”, scriptul va returna valoarea „succes”, iar dacă este fals, respectiv „invalid”.

Acest rezultat va fi returnat obiectului AJAX și procesat înapoi pe partea clientului. Frumusețea AJAX este că totul se întâmplă asincron pe partea clientului, permițând clientului să folosească site-ul în timp ce mesajul este trimis.

Ordine perfecta

După ce a acoperit structura de bază și funcționalitatea formularului nostru în prima jumătate a acestui tutorial, acum vom vorbi despre cum să oferim feedback utilizatorilor prin diferitele caracteristici suplimentare pe care le putem adăuga. În special, vom analiza formularul de feedback prin gestionarea erorilor, atât pe partea client, cât și pe partea serverului.

Încă o dată, vom folosi câteva instrumente pentru a valida formularul. Acestea includ:

Adăugați-le și la proiect, la fel cum am făcut mai devreme cu Bootstrap și jQuery. Aceste instrumente vor ajuta la furnizarea de feedback utilizatorului la trimiterea formularului. Există multe instrumente și cadre pentru validarea formularelor (inclusiv validatorul HTML5 încorporat), dar am folosit Bootstrap Validator deoarece se integrează frumos cu formularul nostru actual.

Structura proiectului ar trebui acum să arate cam așa:

Bootstrap-Form: ├── css/ ├── bootstrap.min.css ├── animate.css ├── imagini/ ├── js/ ├── ├─── scripturi bootstrap.j─j├──j├s-ps.j─ 1.11.2.min.js ├── validator.min.js ├── php/ ├── proces.php ├── index.html

Validarea formularului nostru

Să începem prin a crea un validator pentru a valida formularul atunci când se face clic pe butonul. Înapoi la fișierul scripts.js, trebuie să edităm prima bucată de cod care apelează funcția submitForm() atunci când formularul este trimis.

Acum codul arată astfel:

$("#contactForm").validator().on("submit", function (event) ( if (event.isDefaultPrevented()) ( // gestionează formularul nevalid... ) else ( // totul arată bine! event.preventDefault(); submitForm(); ) ));

Acest nou fragment de cod verifică dacă Bootstrap Validator a găsit erori și oprește procesul. Dacă nu este, vom continua. Încă trebuie să prevenim acțiunea implicită (reîmprospătarea paginii) la trimiterea cu succes a formularului, așa că să păstrăm asta.

Acum, când dai clic pe butonul de trimitere al formularului, când acesta nu este complet completat, validarea formularului va funcționa și câmpurile vor fi evidențiate cu roșu, arătând ce trebuie introdus, e ușor!

În procesul de adăugare a acestei validări, am eliminat sau dezactivat validarea nativă HTML5. Ne putem îmbunătăți validarea prin includerea mesajelor de eroare. Bootstrap Validator are o caracteristică excelentă care face destul de ușor afișarea mesajelor de eroare lângă fiecare câmp de introducere. Pentru a-l adăuga, trebuie să scrieți cod HTML suplimentar.

În fiecare grup de formulare, sub câmpurile de introducere, plasați următorul cod html:

De exemplu, iată un div suplimentar adăugat la câmpurile Nume și E-mail:

Acum, la retrimiterea formularului, dacă câmpurile sunt lăsate necompletate, în mod implicit, ar trebui să apară un mesaj de eroare „Vă rugăm să completați acest câmp.”. Adăugând atributul „data-error” în câmpul de intrare, puteți adăuga un mesaj de eroare personalizat. De exemplu:

Există o serie de alte caracteristici, cum ar fi modelele de expresie regulată, care pot fi aplicate validatorului Bootstrap. Puteți vedea mai multe pe Github.

Adăugarea de animație

Validarea noastră din partea clientului arată foarte bine; avem o evidențiere grațioasă a câmpurilor goale în roșu. Cu toate acestea, ar fi bine să adăugați mai multe animații în formular și să adăugați mai multe mesaje pentru a informa utilizatorul ce se întâmplă. Momentan avem un mesaj „Mesajul trimis!”, care apare la trimiterea cu succes, dar cum rămâne cu mesajul de eroare?

Vom schimba codul pentru a fi mai generic, vom schimba mesajul de succes pentru a accepta și mesajele de eroare.

În primul rând, să eliminăm textul „Mesajul trimis!” din codul HTML și lăsați un bloc div gol:

Acum trebuie să creăm o nouă funcție pentru a procesa starea mesajului. Adăugați această funcție la sfârșitul scripts.js

Funcția submitMSG(valid, msg)( var msgClasses; if(valid)( msgClasses = "h3 text-center tada animated text-success"; ) else ( msgClasses = "h3 text-center text-danger"; ) $("# msgSubmit").removeClass().addClass(msgClasses).text(msg); )

Această funcție are două argumente. valid va fi o variabilă booleană [booleană]: dacă este adevărată, este afișat un mesaj de succes, dacă este fals atunci este afișat un mesaj de eroare. msg conține un mesaj de afișat într-un div.

În primul rând, funcția verifică pentru a vedea dacă reușește sau nu reușește, verificând valoarea valid. În orice caz, numele de clasă CSS necesare sunt scrise în variabilă (trebuie să includeți din nou h3 și text-center, deoarece le vom elimina implicit mai târziu).

Notă: folosim niște clase animate.css. Clasa tada va aplica animația atunci când mesajul este trimis cu succes.

În cele din urmă, funcția elimină toate clasele din #msgSubmit (evitați clasele conflictuale), apoi adaugă clasele setate mai devreme și apoi adaugă textul mesajului în interiorul elementului div.

În formularul nostru de validare, pe care l-am actualizat la începutul acestei secțiuni, putem adăuga următorul apel de funcție în interiorul declarației if atunci când este adevărat.

SubmitMSG(false, „Ați completat corect formularul?”);

Ar trebui să apară un mesaj de eroare la trimiterea unui formular cu câmpuri goale „Ați completat corect formularul?”

Ultimul pas pentru această nouă funcție submitMSG este să o apelați atunci când mesajul este trimis cu succes. Actualizați funcția formSuccess() după cum urmează:

$("#contactForm").reset(); submitMSG(true, „Mesajul trimis!”)

În primul rând, dorim să resetam datele formularului și să ștergem valorile câmpului la trimiterea cu succes, apoi apelăm funcția noastră submitMSG ca înainte. O trimitere cu succes ar trebui să afișeze acum un mesaj cu efectul de animație tada de la animate.css .

Scutura

O altă animație, nu? Să mai adăugăm o animație pentru întregul formular când eroarea este raportată, animația „jitter” ar trebui să arate foarte bine!

Creați o nouă funcție imediat după formSuccess() și numiți-o formError()

Funcția formError()( $("#contactForm").removeClass().addClass("shake animated").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function()( $(this).removeClass(); )) ;)

Această funcție folosește abordarea găsită pe pagina demo animate.css, care vă permite să adăugați o animație la un element și apoi să o reapelați/adăugați din nou și din nou. Există o mică problemă cu animațiile CSS, dacă adăugați o animație la un element o dată și apoi eliminați stilurile și apoi le adăugați din nou, atunci animația nu se va repeta. Această caracteristică vă ajută să resetați clasele când animația este completă și apoi vă permite să le adăugați din nou. Când utilizatorul face clic pe butonul "Trimite"în forma incompletă, vrem ca animația să tremure. Iar dacă forma încă completat incorect, trebuie ca animația să funcționeze din nou.

Putem apela această funcție formError() în funcția submitMSG(). De exemplu:

FormError(); submitMSG(false, „Ați completat corect formularul?”);

Acum, când trimitem un formular gol, acesta se va agita pentru a anunța utilizatorul că ceva a mers prost.

verificare suplimentară

Toată această validare pe partea clientului arată grozav, totuși orice utilizator poate dezactiva aceste măsuri și poate trimite formularul cu câmpuri goale prin editarea codului în browserul său. Așa că merită să adăugați validare pe partea serverului pentru a înregistra tot ceea ce se strecoară.

Deschideți fișierul nostru process.php, trebuie să-l schimbăm puțin, adăugați o verificare pentru câmpurile goale; Dacă nu sunt goale, trimitem mesajul înapoi către front-end. Vom crea o variabilă numită $errorMSG în care vom scrie erori și apoi vom include o verificare suplimentară $_POST.

Acest cod PHP verifică dacă câmpurile nu sunt goale înainte de a scrie în variabilele corespunzătoare (înlocuiește codul existent prin setarea variabilelor din $_POST). Dacă sunt goale, formăm un mesaj de bază pentru a-l trimite înapoi clientului. Putem verifica chiar mai atent decât să verificăm câmpurile pentru goluri (dacă valoarea este prea scurtă/lungă, atunci o verificăm cu expresii regulate) în PHP și JavaScript. Cu toate acestea, de dragul simplității, ne vom limita la testarea golului.

Trebuie să returnați un mesaj la o funcție AJAX care va fi afișată în browser. Vom edita condiția if creată mai devreme în partea de jos a fișierului PHP.

În condiția noastră if, verificăm și dacă variabila $errorMSG este goală (""), pe care am folosit-o în variabila $success. În restul nostru, am inclus o verificare suplimentară. Este doar o verificare aici, dacă rezultatul este fals în variabila $success, atunci revine "Ceva n-a mers bine:(".În caz contrar, afișăm mesajul care a fost compilat la verificarea valorilor nule.

Ultimul pas este să acceptați noua postare în AJAX și să o afișați în formular. Trebuie să actualizăm obiectul Ajax din fișierul scripts.js astfel:

$.ajax(( tip: "POST", url: "php/form-process.php", date: "name=" + nume + "&email=" + email + "&message=" + mesaj, succes: function( text)( if (text == „succes”)( formSuccess(); ) else (formError(); submitMSG(false,text); ) ) ));

Tocmai am actualizat condiția else care verifică dacă text == succes . În restul nostru am numit funcția formError() care activează animația shake, funcția submitMSG() afișează textul mesajului din fișierul PHP. Textul returnat va fi "Ceva n-a mers bine:(", sau date despre câmpurile goale.

Concluzie

Accesați Github pentru a vedea tot codul pe care l-am scris!

Acum formularul nostru oferă feedback utilizatorilor și arată care câmpuri sunt incorecte sau goale. În formular, am furnizat mesaje contextuale bazate pe starea valorii returnate din fișierul PHP și am implementat un strat suplimentar de validare pe server pentru a-i prinde pe acei utilizatori care doreau să ocolească validarea front-end.

Una peste alta, acum ai o formă foarte vie în mâinile tale, gata să fie stilată și integrată cu site-ul tău. Sper că v-a plăcut acest tutorial, vă rugăm să lăsați orice întrebări și gânduri în comentariile de mai jos!

În acest articol, voi descrie crearea și trimiterea unui formular AJAX. După aceea, ne putem uita la implementarea animației cu animate.css , a validării datelor cu JavaScript.

La momentul scrierii acestui articol, Bootstrap 3.3.5 este versiunea actuală a cadrului. Pentru acest articol, folosim versiunea Bootstrap implicită (12 coloane). Când finalizați sarcinile din acest articol, asigurați-vă că utilizați cele mai recente fragmente și structura de cod descrise în Documentația bootstrap.

Structura fișierelor și folderelor

Vom crea un director rădăcină și vom adăuga următoarele fișiere și foldere la el:

Formular bootstrap:

Va trebui să includem câteva biblioteci front-end:

• Bootstrap ;
• jquery.

Având în vedere aceste biblioteci, structura fișierului va arăta astfel:

Formular bootstrap:

Crearea formei

Deschideți fișierul index.html și copiați următoarea structură de bază în el Formulare de contact AJAX:

"

Acesta este șablonul HTML de bază în care vom adăuga conținutul formularului. Am inclus toate fișierele CSS și JavaScript necesare. Rețineți că nu avem nevoie de bootstrap.js pentru acest exemplu special.

Am inclus metaeticheta viewport pentru interogări media în Bootstrap . JavaScript a fost plasat în partea de jos a fișierului, astfel încât codul principal să fie procesat mai întâi.

În eticheta body, am inclus un div cu clasa col-sm-6 col-sm-offset-3 . Aceasta înseamnă că în interiorul și deasupra ferestrei de vizualizare sm (mică) dorim să afișam o coloană lată de 50% ( numărul maxim de coloane 12). Clasa col-sm-offset-3 stabilește marja din stânga la 25%.

Acest lucru creează un aspect care ocupă jumătate din spațiul disponibil și este centrat pe orizontală. După aceea, am inclus h3 și apoi vine baza formularului. Asigurați-vă că dați formularului un ID, astfel încât să puteți atașa ulterior un eveniment de trimitere a formularului AJAX jQuery:

Nu există victorie fără luptă

Acestea sunt toate câmpurile de introducere și butoanele cu care utilizatorul va interacționa. Div-ul inițial cu clasa de rând este sintaxa clasică Bootstrap, care este o grupare orizontală de elemente col. Coloanele din Bootstrap creează umplutură sau spații albe. Îndepărtându-le, vă puteți asigura că sfoara se potrivește uniform în recipient.

Am creat două coloane cu clasa col-sm-6 (50%) pe care le vom folosi pentru a separa partea de sus a formularului. În prima coloană, col-sm-6, am creat o etichetă și câmpuri pentru nume și e-mail. Fiecare conține o etichetă cu un atribut corespunzător pentru, astfel încât eticheta este asociată cu câmpul corespunzător.

Fiecare dintre aceste coloane include un grup de formulare , care grupează etichetele semantic, creând o ușoară umplutură în partea de jos:

Tipografie

Bootstrap permite cursuri pentru H1-H6. Ele vă ajută să stilați elementele inline fără a adăuga câmpuri suplimentare sau a crea blocuri de elemente de formular de contact super AJAX. Am folosit o clasă pentru H4 pentru a modela etichetele și a le face mari.

Clasa de control al formularului este aplicată fiecărui element de intrare, astfel încât să ocupe toată lățimea containerului (lățime 100%). Această clasă adaugă, de asemenea, diverse stiluri care vă permit să creați un element de formular ușor de citit ( dimensiuni mari, margini clare etc.).

După aceste coloane, includem corpul mesajului. Îl împachetăm într-un grup de formulare și aplicăm aceleași stiluri ca pentru etichete și pentru câmpurile de text.

Apel la acțiune

Să creăm un buton de trimitere. Bootstrap conține clase pentru diferite butoane și stările acestora. Am decis să folosim butonul " succes” (btn-succes), care este verde în mod implicit.

De asemenea, trebuie să aplicați clasa de bază btn pentru a reseta setările de bază ale butonului ( cadru, umplutură, alinierea textului, dimensiunea fontului). Am aplicat clasa btn-lg, care creează un buton mare, și apoi clasa pull-right, care înfășoară butonul din stânga.

După buton, am inclus un div cu id-ul #msgSubmit și am aplicat următoarele clase: " h3 text-center ascuns". Clasa h3 ajută la crearea unui titlu mai mare, text-center setează alinierea textului la centru, iar seturile ascunse afișează: niciunul și vizibil: ascuns :

Adăugarea funcției de trimitere a datelor

Am creat un formular Bootstrap jQuery AJAX de bază, dar încă nu face nimic. Următorul nostru pas este să creăm o funcție care acceptă intrarea utilizatorului și o trimite asincron către PHP.

Deschideți fișierul scripts.js și copiați următorul cod în el:

$("#contactForm").submit(function(event)( // anulează transmiterea formularelor event.preventDefault(); submitForm(); ));

Acest Fragment de cod jQuery, care ascultă #contactForm ( după cum s-a afirmat mai înainte). Înainte de această funcție, ne ocupăm de variabila eveniment, care deține acțiunea de a trimite datele din formular pentru funcție.

event.preventDeafult() oprește trimiterea datelor din formular atunci când pagina este reîmprospătată fără a selecta o acțiune în formular. Și la sfârșit, acest cod solicită funcția submitForm(); :

function submitForm()( // Initializeaza o variabila cu continutul formularului var name = $("#name").val(); var email = $("#email").val(); var mesaj = $(" #message ").val(); $.ajax(( tip: "POST", url: "php/form-process.php", date: "name=" + name + "&email=" + email + "&message =" + mesaj, succes: function(text)( if (text == "succes")( formSuccess(); ) ) )); ) function formSuccess()( $("#msgSubmit").removeClass("hidden" );)

Cele trei variabile declanșate captează valorile fiecărui câmp de intrare ale formularului și le transmit unei variabile JavaScript pentru utilizare ulterioară.

noi initiem obiect ajax în interiorul jqueryși setați parametrii pentru postare, adresa URL a fișierului PHP, datele pe care vrem să le trimitem și funcția de apel invers. Datele includ toate cele trei variabile cu id-ul corespunzător. Funcția de apel invers este apelată atunci când obiectul AJAX a primit cu succes informații din scriptul PHP. Funcția preia textul returnat și verifică dacă este egal cu șirul " succes". Dacă da, atunci funcția finală formSuccess este rulată.

Îndepărtează clasa ascunsă din #msgSubmit DIV pe care l-am aplicat mai devreme, afișând astfel textul.

Conectarea la funcția PHP Mail

Acum trebuie să scriem un script care va primi date din formularul AJAX și să trimitem conținutul prin funcția PHP Mail. Deschideți fișierul process.php și adăugați următorul cod la acesta:

Trebuie să stocăm variabilele pe care vrem să le folosim. Trei variabile de intrare pot fi preluate din funcția de e-mail și pot fi primite aceleași nume în PHP. Variabila $EmailTo este o adresă de e-mail care poate fi setată în script. $Subject este un șir care descrie subiectul e-mailului.

Corpul literei este creat în mod arbitrar cu adăugarea a trei variabile create. Mai întâi, setăm textul descrierii, de exemplu, „ Nume:", apoi vine variabila și apoi o nouă linie (/n) . Repetăm ​​aceiași pași, legând toate datele la variabila $body.

Pentru a trimite un e-mail, îl atașăm la funcția de e-mail. Atribuind o valoare variabilei $success, setăm adresa de e-mail la care va fi trimis e-mailul, subiectul e-mailului, corpul și adresa de e-mail a expeditorului.

Pentru a începe procesul de trimitere a unui e-mail, trebuie să îl apelați într-o declarație if. Astfel puteți verifica dacă datele formularului au fost trimise cu succes sau nu. Dacă funcția Mail revine „ Adevărat”, scriptul returnează „ succes”, dacă funcția aruncă o eroare, returnează „ invalid”.

Acest rezultat va fi returnat obiectului AJAX și procesat pe partea clientului. Avantajul AJAX este că totul se face asincron pe partea clientului. Acest lucru permite utilizatorului să continue să interacționeze cu site-ul în timp ce trimite datele formularului AJAX:

Să strălucim

Acum ne vom concentra pe furnizarea de feedback utilizatorilor prin diverse funcții suplimentare care pot fi activate. În special, vom analiza feedback-ul din formular utilizând gestionarea erorilor, atât pe partea client, cât și pe partea serverului.

De asemenea, folosim câteva instrumente pentru a valida formularul:

• Animate.css: ;
• Validator Bootstrap.

Adăugați-le la proiect așa cum am făcut mai devreme cu Bootstrap și JQuery. Aceste instrumente vor ajuta la furnizarea de feedback utilizatorului după ce acesta a trimis datele.

Structura proiectului ar trebui acum să arate astfel:

Validarea formularului

Să începem prin a configura un validator după introducerea datelor din formularul de contact PHP AJAX. Accesați fișierul scripts.js și editați prima bucată de cod care apelează funcția SubmitForm() după ce datele formularului sunt trimise.
Trebuie schimbat astfel:

$("#contactForm").validator().on("trimite", funcția (eveniment) ( if (event.isDefaultPrevented()) ( // gestionează eroarea formularului... ) else ( // totul este bine! eveniment .preventDefault(); submitForm(); ) ));

Acest nou fragment de cod verifică dacă Bootstrap Validator a găsit probleme și a oprit rularea codului. Dacă nu, continuăm cu acțiunile în modul standard. Încă trebuie să excludem acțiunea implicită ( reîncărcarea paginii fără a completa formularul) din scriptul de trimitere a datelor din formular.

Acum, dacă facem clic pe butonul de trimitere al datelor din formular fără a completa toate câmpurile, cele goale vor fi evidențiate cu roșu:

În procesul de adăugare a validării, am dezactivat validarea HTML5 nativă. Puteți adăuga context suplimentar la validare prin includerea mesajelor de eroare. Validatorul Bootstrap are o caracteristică la îndemână care vă permite să afișați mesaje de eroare pentru fiecare câmp. Pentru a le adăuga, trebuie să completați marcajul HTML.

În interiorul fiecărui grup de formulare, sub câmpul de introducere a datelor, plasați următorul cod HTML:

Ca exemplu, mai jos este un div suplimentar adăugat la câmpurile de nume și e-mail:

Acum, când retrimiteți datele formularului AJAX jQuery, va fi afișat un mesaj de eroare dacă câmpurile formularului nu au fost completate: „ Vă rugăm să completați acest câmp.". Prin adăugarea unui atribut de date pentru datele de intrare numit „ eroare de date”, puteți include un mesaj de eroare personalizat.

De exemplu:

Adăugarea de animație de feedback

Am adăugat o funcționalitate pentru a indica câmpurile de formular goale. Dar ar fi bine să adăugați o animație suplimentară la formular și câteva mesaje pentru a informa utilizatorul ce se întâmplă. În prezent, la trimiterea cu succes a datelor din formular, mesajul „ Mesaj trimis!„Dar ce zici de greșeli?

Pentru a utiliza codul existent, vom modifica mesajul de succes al transmiterii datelor existente. Mai întâi, eliminați textul " Mesaj trimis!' din marcajul HTML și lăsați un div gol:

Acum trebuie să creăm o nouă funcție pentru a procesa starea mesajului. Adăugați această funcție în partea de jos a fișierului dvs. scripts.js:

function submitMSG(valid, msg)( var msgClasses; if(valid)( msgClasses = "h3 text-center tada animated text-success"; ) else ( msgClasses = "h3 text-center text-danger"; ) $("# msgSubmit").removeClass().addClass(msgClasses).text(msg); )

Această funcție are două argumente. valid va fi o variabilă booleană: dacă valoarea sa este adevărată, va fi afișat un mesaj care indică faptul că datele au fost trimise cu succes. Dacă este fals, va fi afișat un mesaj de eroare. msg este mesajul pe care îl vom afișa pe ecran în blocul div.

Această funcție verifică dacă avem de-a face cu un mesaj de trimitere de date cu succes sau cu un mesaj de eroare. Acest lucru se face prin verificarea valorii variabilei valide. În orice caz, setează o variabilă cu clasele CSS corespunzătoare ( trebuie să reactivăm h3 și text-center, deoarece le vom elimina).

Notă: folosim câteva clase animate.css pentru clasa de mesaje de succes. După trimiterea cu succes a datelor din formularul de contact AJAX JQuery, se va reda animația tada.

În cele din urmă, funcția elimină toate clasele din #msgSubmit ( pentru a evita suprapunerea claselor) și apoi setează clasele de prioritate și adaugă textul mesajului la div.

În inițializarea validatorului de la începutul acestei secțiuni, actualizăm codul pentru a adăuga următorul apel de funcție în instrucțiunea if când se evaluează la adevărat:

submitMSG(false, „Ați completat corect formularul?”);

Acum, dacă nu ați completat toate câmpurile, va fi afișat un mesaj de eroare „ Ai completat corect formularul?»

Pasul final pentru această nouă funcție submitMSG este să o apelați atunci când datele din formular sunt trimise cu succes. Actualizați funcția formSuccess() după cum urmează:

$("#contactForm").reset(); submitMSG(true, „Mesajul trimis!”)

Dorim să resetam formularul și să ștergem valorile atunci când apelăm funcția submitMSG ca mai sus cu un mesaj de succes. Acum, după trimiterea cu succes a datelor din formular, ar trebui să fie afișat un mesaj corespunzător cu animația animate.css tada :

hai să-l scuturăm

Să adăugăm o animație de eroare întregului formular, animația generică „agitare” ar trebui să facă treaba!

Creați unul nou imediat după funcția formSuccess() și numiți-o formError() :

function formError()( $("#contactForm").removeClass().addClass("shake animated").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function()( $(this).removeClass(); )) ;)

Această funcție folosește abordarea descrisă pe pagina demo animate.css, care vă permite să adăugați o animație unui element și apoi să o apelați din nou.

Animațiile CSS au o particularitate urâtă: incapacitatea de a relua chiar dacă eliminați și adăugați din nou clasa. Această caracteristică ajută la resetarea claselor de final de animație, permițându-vă să le adăugați din nou. Când utilizatorul face clic pe butonul Trimite fără a completa toate câmpurile formularului de contact AJAX, redăm o animație de agitare. Și dacă nu completează din nou toate câmpurile, trebuie să redai această animație.

Puteți apela această funcție formError() deasupra funcției submitMSG() pe care am creat-o pentru a raporta eroarea. De exemplu, așa:

formError(); submitMSG(false, „Ați completat corect formularul?”);

Acum, când utilizatorul încearcă să trimită datele din formular fără a completa toate câmpurile, acesta se va zgudui astfel încât să înțeleagă că ceva nu este în regulă.

Mai multă validare

Validarea la nivelul clientului este bună, dar orice utilizator o poate dezactiva și trimite formularul cu câmpuri goale prin editarea codului în browser. Trebuie să creați un serviciu de validare pe partea serverului.

Trebuie să deschidem fișierul process.php și să facem modificările necesare pentru a ne asigura că toate câmpurile sunt completate. Vom crea o variabilă $errorMSG pe care o vom folosi pentru a captura mesaje de eroare și apoi vom activa o verificare suplimentară $_POST:

Acest cod PHP verifică dacă există câmpuri de formular AJAX goale înainte de a-și seta datele ca variabile adecvate ( înlocuiește variabilele existente setate în codul de la $_POST). Dacă câmpurile sunt goale, setăm mesajul general să fie trimis înapoi clientului.

Ca răspuns la apelul AJAX original, trebuie să trimitem un mesaj de eroare care să fie afișat în browser. Pentru a face acest lucru, editați instrucțiunea if pe care am creat-o mai devreme în partea de jos a codului PHP:

Prin instrucțiunea if, verificăm dacă variabila $errorMSG este goală ("") , precum și starea funcției Mail încorporate pe care am folosit-o pentru variabila $success. În clauza else, am inclus o verificare suplimentară pentru a vedea dacă eroarea este rezultatul unui eșec $success. Dacă da, trimiteți înapoi mesajul „ Ceva n-a mers bine:„. În caz contrar, tipărim mesajul care a fost compilat când am verificat câmpurile goale.

Iar ultimul pas este să acceptați un mesaj nou în AJAX și să îl afișați în formular. Trebuie să actualizăm obiectul AJAX din fișierul scripts.js astfel:

$.ajax(( tip: "POST", url: "php/form-process.php", date: "name=" + nume + "&email=" + email + "&message=" + mesaj, succes: function( text)( if (text == „succes”)( formSuccess(); ) else (formError(); submitMSG(false,text); ) ) ));

Tocmai am actualizat condiția else, care verifică pentru text == succes . În else, apelăm funcția formError(), care aplică animația shake, și solicităm funcției submitMSG() textul returnat de PHP.

Concluzie

Verificați Github pentru a vedea codul complet. Acum Formular de feedback PHP AJAX oferă utilizatorului informații despre care dintre câmpurile nu a completat. Afișăm mesaje contextuale pe baza stării și a mesajului returnat din PHP. Și a implementat, de asemenea, un nivel suplimentar de validare pe partea de server pentru acei utilizatori care încearcă să ocolească validarea front-end.

Sper că v-a plăcut acest articol. Vă rugăm să lăsați întrebările și feedback-ul dvs. în comentarii.

Funcționalitatea de încărcare a fișierelor ar trebui să aibă o bară de progres. Dar majoritatea dezvoltatorilor din anumite motive ignoră acest element. Utilizatorii nu trebuie să...

În acest articol, vă voi arăta cum să colectați și să validați datele formularului HTML folosind link-uri de date bidirecționale AngularJS. Vom învăța cum să implementăm un simplu...

Adesea, pe site-urile Web puteți găsi pagini cu formulare HTML plasate pe ele. Formularele web sunt o modalitate convenabilă de a obține informații de la vizitatorii site-ului dvs. Un exemplu în acest sens este cartea de oaspeți, care oferă feedback vizitatorilor și dezvoltatorilor site-ului. Formularele sunt, de asemenea, convenabile pentru dezvoltatorii de site-uri atunci când dezvoltă un CMS, ceea ce vă permite să mențineți proprietatea principală a site-ului - relevanța. Acest articol se concentrează pe elementele de bază ale creării de formulare HTML, procesarea acestora și modul de transmitere a datelor de la formularele de pe ecran la scripturile PHP.

1) Crearea unui formular simplu

Etichete

Acest formular html are un element naviga, care deschide o casetă de dialog pentru selectarea unui fișier de încărcat pe server. Prin apăsarea butonului „Fișier de transfer”, fișierul este transmis scriptului de gestionare.

Apoi trebuie să scrieți un handler de script acțiune.php. Înainte de a scrie handler-ul, trebuie să decideți în ce director vom copia fișierul:

if(isset($_FILES [ "fișierul meu" ])) // Dacă fișierul există
{
$catalog = "../imagine/" ; // Directorul nostru
if (este_dir ($catalog )) // Dacă există un astfel de director
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Fișier temp
$myfile_name = $_FILES [ "fișierul meu" ][ "nume" ]; // Nume de fișier
if(! copie ($fișierul meu, $catalog)) ecou „Eroare la copierea fișierului”. $myfile_name // Dacă copierea fișierului a eșuat
}
else mkdir("../imagine/"); // Dacă nu există un astfel de director, îl vom crea
}
?>

cometariu

Dacă aveți încredere în utilizatorii să încarce orice fișiere pe serverul dvs., trebuie să fiți extrem de atenți. Atacatorii pot injecta cod „rău” într-o imagine sau fișier și îl pot trimite la server. În astfel de cazuri, trebuie să controlați strâns descărcarea fișierelor.

Acest exemplu demonstrează crearea unui director și copierea unui fișier în acel director de pe server.

De asemenea, aș dori să demonstrez un exemplu cu un element Caseta de bifat. Acest element este ușor diferit de alte elemente, dacă nu unul dintre elemente Caseta de bifat'a nu este selectat, atunci o variabilă superglobală $_POST va returna o valoare goala:

if (!empty($_POST [ "culoarea mea" ])) echo $_POST [ "culoarea mea" ]; // Dacă este selectat cel puțin 1 articol
ecou „Selectați valoarea”;
?>