HTML5 și atributele sale pentru validarea formularelor. Crearea unui formular de contact simplu folosind Angularjs și autentificare php T 15 folosind numele necesar

Atributul boolean HTML necesar îi spune browserului să trimită datele formularului numai atunci când câmpurile obligatorii sunt completate. Aceasta înseamnă că câmpul nu poate fi lăsat necompletat și că, în funcție de alte atribute sau tipuri de câmpuri, pot fi acceptate doar anumite tipuri de valori. Vom vorbi puțin mai târziu despre a spune browserelor să trimită anumite tipuri de date.

Dacă câmpurile obligatorii sunt lăsate necompletate, formularul nu va fi trimis. Opera, Firefox, Internet Explorer 10+ și Chrome oferă utilizatorului un mesaj de eroare. De exemplu, „Completați acest câmp” sau „Trebuie să completăm câmpurile goale”.

În terminologia Javascript, evenimentul focus declanșează un element de formular atunci când primește focalizarea, când focalizarea se mută către alt element sau când își pierde focalizarea.

În CSS, puteți folosi pseudoclasa :focus pentru a stila elementele care sunt evidențiate în prezent.

Atributul necesar se aplică oricărui tip de element de intrare, cu excepția butonului, trimiterea, imaginea, culoarea și ascuns. Toate aceste elemente au o valoare implicită, așa că un atribut suplimentar ar fi inutil. Sintaxa pentru acest atribut este pur și simplu obligatorie sau obligatorie = "obligatorie" dacă utilizați sintaxa XHTML.

Să adăugăm un atribut Intrare HTML solicitate la formularul de înregistrare. Să facem câmpuri pentru nume și adresă E-mail, parola și data abonamentului sunt necesare:

Numele meu:
Email-ul meu:
Site-ul meu:
Parola mea viitoare:
(cel puțin 6 caractere, fără spații)
Cunoștințele mele HTML de la 1 la 10:
Vreau ca abonamentul meu să înceapă cu:
Aș dori să primesc copii ale cărților The HTML5 Herald
De asemenea, aș dori să mă abonez la The CSS3 Chronicle

În capturile de ecran de mai jos puteți vedea ce face atributul HTML necesar când încercați să trimiteți un formular:

Mesaj despre câmpurile obligatorii din Firefox

Aceeași situație în Opera...

și în Google Chrome

Stilul câmpurilor obligatorii dintr-un formular

Puteți stila câmpurile obligatorii pe formulare folosind pseudoclasa :required,:opțională sau pseudoclasa negativă :not(:required)). De asemenea, puteți stila câmpuri valide și invalide folosind pseudo-clasele :valid și :invalid. Folosind aceste pseudoclase obligatorii de introducere HTML, puteți arăta utilizatorilor ce câmpuri sunt obligatorii:

input ( fundal-poziție: 0% 50%; fundal-repeat: nu-repeat; padding-left: 15px; ) input:required ( background-image: url("../images/required.png"); ) input :focus:invalid ( imagine de fundal: url("../images/invalid.png"); ) input:focus:valid ( imagine de fundal: url("../images/valid.png"); )

În acest caz, adăugăm o imagine de fundal (asterisc) la câmpurile de formular necesare. Conținutul generat nu poate fi inclus în elementele de intrare. Prin urmare, ar fi mai bine să folosiți o imagine de fundal. În plus, câmpurile valide și invalide pot fi evidențiate cu imagini de fundal diferite. Modificările vor fi observate numai dacă utilizatorul a selectat elementul de formular corespunzător.

Avertisment: Firefox stilează elemente nevalide

Te rog noteaza asta browser Firefoxîși aplică propriul stil (umbră roșie) elementelor nevalide, așa cum se arată în una dintre imaginile de mai sus. Pentru a dezactiva acest efect pentru HTML necesar, utilizați următorul cod CSS:

:invalid (box-shadow: none; )

Sfat: stiluri direcționate pentru browserele vechi

Browserele vechi, cum ar fi IE8 și IE9, nu acceptă pseudo-clasa :required, dar puteți furniza stiluri vizate folosind un selector de atribute:

input:required, input ( imagine de fundal: url("../images/required.png"); )

De asemenea, puteți utiliza acest atribut ca un cârlig de validare a formularelor în browserele care nu acceptă validarea bazată pe HTML5. Codul Javascript va verifica elementele de intrare goale pentru atributul necesar și nu va trimite formularul dacă întâlnește câmpuri obligatorii goale.

Salutare băieți, sperăm că lucrurile merg bine, astăzi vă vom explica un tutorial foarte util. În tutorialul de astăzi vom crea un formular simplu de contact folosind angularJS și php.

Formularul de contact este o pagină web standard care este disponibilă pe fiecare site web. Acest lucru permite vizitatorilor site-ului să contacteze proprietarii site-ului sau furnizorii de servicii care sunt responsabili pentru întreținerea site-ului respectiv. Așa că ne-am gândit de ce să nu creăm un simplu formular de contact folosind Angularjs și php pentru a primi mesaje de la site-uri web, cititori și/sau utilizatori.

Folosim Angularjs pentru front end și php pe partea de server. Vom scrie cod în php care preia date dintr-un formular Angular și le trimite prin e-mail administratorului site-ului. Creați un folder numit „contact-form” în directorul aplicației dvs. web și creați un exemplu de design Pagini HTML– index.html. Acum copiați și inserați codul de mai jos în fișierul index.html.

Demo - Formular simplu de contact folosind Angularjs și php Formular de contact folosind angularjs și PHP Numele tău E-mail Mesaj Trimite

Cod PHP pentru a trimite e-mail

Creați o pagină contact.php și copiați și lipiți codul de mai jos. Mai jos este codul php care va prelua datele din formularul unghiular și le va trimite prin e-mail la adresa de e-mail specificată.

< ?php $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name: " . $data->Nume; echo "E-mail: " . $date->email; echo "Mesaj: " . $date->mesaj; // a trimis un e-mail $la = $date->email; $subject = "Site de scrisori de testare pentru testarea angularjs Formular de contact"; $message = $date->message; $headers = "De la: " . $date->nume .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" . phpversion(); //funcție e-mail PHP pentru a trimite e-mail la adresa de e-mail mail($to, $subject, $message, $headers); ?>

De ce am primit acest formular?

În prezent, există un atac de forță brută pe site-ul dvs. Un atac cu forță brută este un atac de ghicire a parolei. În acest caz, o parolă este selectată pentru panoul administrativ al site-ului dvs.

Pentru a preveni piratarea site-ului dvs. și pentru a crește securitatea acestuia, am instalat protecție suplimentară.

Cum pot accesa acum panoul de administrare al site-ului?

Acum, la accesarea panoului administrativ al site-ului dvs. (pe Joomla sau WordPress), va apărea o fereastră suplimentară pentru introducerea login-ului și a parolei cu inscripția „vă rugăm să utilizați parola panoului de control”. Ca logare, trebuie să introduceți autentificarea serviciului dvs. de găzduire, arată ca „u1234567”. Parola este parola curentă pentru serviciul dvs. de găzduire.

După ce ați trecut autentificarea HTTP de bază, veți vedea un câmp standard de conectare în panoul de administrare al site-ului dvs. Acum va trebui să introduceți numele și parola administratorului site-ului.

Cum funcționează autentificarea de bază HTTP

Când introduceți parola de conectare în fereastra de autentificare de bază, valorile hash de conectare și parolă vor fi comparate cu valorile din dosar special~/etc/users , disponibil în panoul de control al găzduirii. Conținutul fișierului arată cam așa: „u1234567:dm48bspxIO3rg” . Unde „u1234567” este login și „dm48bspxIO3rg” este hash-ul parolei (notă: doar hash-ul, nu parola în sine!). Un hash de parolă este rezultatul conversiei unei parole folosind un algoritm specific.

Astfel, atunci când introduceți numele de utilizator și parola în fereastra de autentificare de bază, se ia un hash al parolei introduse și se compară cu valoarea hash din fișierul ~/etc/users. Dacă valorile se potrivesc, ești autentificat.

Nu pot trece autentificarea de bază

Probabil ați introdus o parolă greșită. Instalare Parolă Nouă pentru autentificarea de bază:

Dacă ați trecut autentificarea de bază, dar nu vă puteți conecta direct la panoul de administrare al site-ului dvs. Joomla sau WordPress, utilizați ajutorul:

Cum să creșteți protecția site-ului dvs. împotriva atacurilor cu forță brută?

Pentru a crește securitatea site-ului:

schimbați autentificarea superutilizatorului într-una mai unică. Nu folosiți nume scurte, este mai bine dacă folosiți prenumele împreună cu numele de familie. Există multe resurse pe Internet unde sunt colectate cele mai populare autentificări. Familiarizați-vă cu ele și nu le folosiți niciodată;
Setați o parolă complexă de administrator de site. O parolă complexă trebuie să conțină litere mari și mici, numere și simboluri suplimentare, cum ar fi „* - _ # :”, etc. Lungimea parolei nu este mai mică de 6 caractere. De preferință 10 și peste.

Cum să eliminați formularul de autentificare de bază HTTP?

Pentru a elimina formularul de autentificare de bază HTTP:

AuthType Basic AuthName „te rugăm să folosești parola panoului de control” AuthUserFile .../utilizatori Solicită un utilizator valid

Pentru a comenta o linie, puneți un simbol hash (“#”) la începutul liniei, astfel.

„Protecția proștilor” este un set de măsuri pentru a preveni introducerea de informații incorecte într-un formular. De exemplu, dacă un câmp necesită introducerea unui număr pozitiv de la 0 la 10, atunci ar trebui să verificați dacă utilizatorul nu introduce text sau un număr care nu se află în intervalul specificat, de exemplu. numărul nu trebuie să fie mai mic de zero și mai mare de zece.

De ce sunt introduse informații incorecte? Acest lucru se face în principal din trei motive.

Utilizatorul a greșit din greșeală, de exemplu, a citit cu neatenție ceea ce i s-a cerut să indice.

Pagina web solicită date într-un mod ambiguu, lăsând utilizatorul să ghicească și să ghicească ce își dorește cu adevărat. Cu toate acestea, opiniile dezvoltatorului și ale utilizatorului nu coincid întotdeauna.

Există un număr de oameni care percep instrucțiunile ca pe o provocare și încearcă să facă opusul. Astfel de utilizatori motivează așa ceva: „Da, îmi cer să introduc un număr. Ce se va întâmpla dacă voi indica literele?” Apoi cer informații în mod evident incorecte și văd la ce duce acestea.

Trebuie înțeles că formularea precisă și corectă, deși reduce probabilitatea erorilor, nu te scutește în niciun fel de ele. Doar mijloacele tehnice din partea serverului vă permit să obțineți rezultatul dorit și să evitați introducerea de informații incorecte. Cu toate acestea, revizuirea sau, așa cum se mai numește, validarea client-side vă permite să verificați rapid datele introduse de utilizator pentru corectitudine, fără a trimite formularul la server. Acest lucru economisește timp utilizatorului și reduce sarcina pe server. Din punct de vedere al utilizabilității, există și avantaje - utilizatorul primește imediat un mesaj despre informațiile introduse incorect și își poate corecta greșeala.

Câmp obligatoriu

Unele câmpuri de formular trebuie completate înainte de a fi trimise la server. Acest lucru, de exemplu, se aplică formularului de înregistrare, în care vi se solicită să introduceți o autentificare și o parolă. Pentru a specifica câmpurile obligatorii, utilizați atributul obligatoriu, așa cum se arată în Exemplul 1.

Exemplul 1. Atributul necesar

HTML5 IE 10+ Cr Op Sa Fx

Câmp obligatoriu

Parola:

Câmpurile obligatorii trebuie completate înainte de a trimite formularul, altfel formularul nu va fi trimis la server și browserul va emite un avertisment în acest sens. Tipul de mesaj depinde de browser, de exemplu Chrome afișează un sfat explicativ, așa cum se arată în Fig. 1.

Orez. 1. Câmpul obligatoriu nu este completat

Corectitudinea datelor

Inițial, există două câmpuri în care introducerea utilizatorului este verificată automat. Aceasta este o adresă web și o adresă de e-mail. browser Chrome de asemenea, verifică validitatea câmpului de date din calendar, dar numai pentru că nu are o interfață de selectare a calendarului prin clic cu mouse-ul. Următoarele reguli se aplică acestor elemente.

Adresa web ( ) trebuie să conţină protocolul (http://, https://, ftp://).
Adresa de e-mail ( ) trebuie să conțină litere sau cifre înainte de simbolul @, după acesta, apoi un punct și un domeniu de nivel superior.

Browserele au politici ușor diferite pentru verificarea datelor utilizatorilor. De exemplu, Opera inserează automat protocolul http:// în fața textului introdus, în timp ce alte browsere îl așteaptă de la utilizator. Chrome și Opera necesită asta adresa postala a existat un punct, nu este necesar pentru Firefox.

Exemplul 2 arată un formular cu câmpuri obligatorii în care două câmpuri sunt validate de browser.

Exemplul 2: Corectitudinea datelor

HTML5 IE 10+ Cr Op Sa Fx

Corectitudinea datelor

Completați formularul (toate câmpurile sunt obligatorii)

Nume:

E-mail:

Site:

Opera verifică un element de formular numai dacă are un atribut de nume.

Ce se întâmplă în Opera când introduceți date incorecte este prezentat în Fig. 2.

Orez. 2. Avertisment despre date incorecte

Șablon de intrare

Unele date nu pot fi clasificate într-unul dintre tipurile de elemente de formular, așa că trebuie să utilizați un câmp de text pentru ele. În același timp, acestea sunt introduse după un anumit standard. Astfel, o adresă IP conține patru numere separate printr-un punct (192.168.0.1), codul poștal al Rusiei este limitat la șase cifre (124007), un număr de telefon conține un prefix și un anumit număr de cifre, adesea separate printr-un cratima (391 555-341-42), etc. Browserul trebuie să specifice un șablon de intrare astfel încât să verifice datele introduse de utilizator în funcție de acesta. Pentru a face acest lucru, este folosit atributul model, iar valoarea sa este o expresie regulată. Unele valori tipice sunt enumerate în tabel. 1.

Exemplul 3 vă solicită să introduceți o valoare de culoare hexazecimală (#ffcc00) și dacă nu se află în acest interval, browserul afișează un mesaj de eroare.

Exemplul 3. Şablon de intrare

HTML5 IE 10+ Cr Op Sa Fx

Intrare culoare

Introduceți valoarea hexazecimală a culorii (trebuie să înceapă cu #)

În fig. Figura 3 arată un avertisment în browserul Chrome.

Orez. 3. Datele introduse nu se potrivesc cu șablonul

Nevalidare

Validarea nu este întotdeauna necesară pentru un formular; de exemplu, un dezvoltator ar putea dori să folosească solutie universalaîn JavaScript și nu mai are nevoie de verificare în duplicat de către browser. În astfel de cazuri, trebuie să dezactivați validarea încorporată. Pentru a face acest lucru, utilizați atributul novalidate al etichetei. Exemplul 4 arată utilizarea acestui atribut.

Exemplul 4: nevalidare

HTML5 IE 10+ Cr Op Sa Fx

atribut novalidate

Într-un scop similar se folosește atributul formnovalidate, care se adaugă la butonul de trimitere a formularului, în acest caz la etichetă. În acest caz, forma din exemplul 4 va arăta astfel.