Un formular este un element în HTML, deoarece este ceea ce ne permite să introducem date și, prin urmare, interacționează cu webul și baza de date a acestuia, care necesită controale din punct de vedere al securității, deoarece dintr-un formular putem trimite fișiere către un server, pentru a procesa o comandă sau plată, selectând diferite elemente și controale ale unui formular, care va fi apoi procesat de un eveniment javascript sau de un alt limbaj de programare web.
De multe ori, dezvoltatorii trebuie să utilizeze diferite biblioteci pentru a putea efectua sarcini în formulare pentru a controla evenimentele și, în unele cazuri, trebuie să recurgem la unele metode de cod nedorite pentru a trimite date, a controla ceea ce este introdus, a evita injecțiile de cod sau atacurile XSS.
Dacă dorim să efectuăm toate aceste controale și evenimente, putem găsi un număr mare de fișiere javascript care cresc considerabil greutatea webului în kb și încetinesc pagina. De asemenea, este nesigur, deoarece dacă cineva dezactivează utilizarea Javascript, toate comenzile vor înceta să funcționeze.
Elementele formulare și atribute în HTML5 oferă un grad mai mare de control și marcare semantică decât versiunea sa anterioară, au fost adăugate atribute și proprietăți care elimină necesitatea de a efectua controale extern prin intermediul scripturilor. Funcțiile formularelor din HTML5 oferă un control mai bun și nu depind de dacă Javascript este activat sau dezactivat în browserul dvs.
Atribute formular HTML5 - Substituent
Prin intermediul proprietate placeholder Putem indica un exemplu de tip de date care trebuie înregistrate, acest lucru ne permite să furnizăm informații utilizatorului pentru a servi drept ghid. Acest text pe care îl indicăm în cadrul controlului va dispărea după ce utilizatorul introduce un caracter.
Atributul substituent poate fi utilizat numai în casete de text sau în zone text.
Modele cu expresii regulate în forme
Atributul pattern ne permite să ne definim regulile pentru a valida datele pe care le introduce utilizatorul folosind expresii regulate. O expresie regulată este o secvență de caractere care definește un model de date, de exemplu, modelul [a-z] indică faptul că utilizatorul poate introduce doar litere mici sau modelul [0-9] indică faptul că pot fi introduse numai cifre.
HTML5 vă permite să utilizați modele, deci dacă caracterele introduse nu se potrivesc cu modelul definit automat, va genera o eroare.
Noi mergem spre definiți câteva reguli cu modele și foi de stil pentru a schimba culoarea chenarului dacă apare evenimentul nevalid, adică ceea ce este introdus de utilizator nu respectă ceea ce este definit într-un anumit model.
Creăm un fișier Example01.html și scriem următorul cod:
Modele cu expresii regulate
Utilizator
Cheie:
E-mail:
Data
Preț
Dacă trimitem formularul, acesta va valida fiecare câmp în raport cu modelul definit și dacă nu este îndeplinit, va afișa mesajul pe care îl definim în eticheta de titlu, va folosi și stilurile definite în regulă și proprietăți CSS din clasa nevalidă pe care o folosește HTML5.
De exemplu, introducem un e-mail incorect:
De asemenea, introducem o dată incorectă și vedem că nu permite trimiterea formularului. Dacă dorim să îmbunătățim sau să adăugăm un efect vizual, putem folosi CSS pentru a adăuga o pictogramă de fundal în controlul în care apare eșecul. De exemplu, adăugăm următoarele stiluri CSS la cele pe care le aveam deja, schimbăm intrarea în input [type = 'text'] astfel încât foile de stil să afecteze doar casetele de text și nu butonul.
Folosim următoarele pictograme:
Lângă fiecare control adăugăm proprietatea necesară, de exemplu:
Când executăm exemplul, putem vedea că, dacă trimitem formularul cu câmpuri goale, acestea ne vor arăta câmpurile obligatorii și valide.
Avantajul tiparelor este că nu folosim JQuery sau orice alt tip de validare și dacă această opțiune este dezactivată în browser, restricțiile și regulile pe care le definim vor continua să funcționeze. Acest lucru nu implică faptul că, prin trimiterea formularului, evităm controalele la procesarea datelor, fie pentru a le salva într-o bază de date, fie pentru a le trimite prin poștă sau pentru a executa orice operațiune.
Formular cu mai multe trimiteri
Ceva care a fost complex de făcut este trimiteți același formular către două pagini diferiteSă presupunem că un singur formular de autentificare care, pe măsură ce se face clic pe un buton, va merge la diferite pagini în care se schimbă interogările și procesul de informații. Acest lucru se face prin definirea proprietatea de formare, unde indicăm o altă opțiune de procesare a acțiunii în mod implicit.
Formular cu mai multe trimiteri
Utilizator:
Cheie:
Nu există nicio îndoială că interacțiunea cu aceste tipuri de proprietăți și atribute facilitează foarte mult dezvoltarea site-urilor web, fără a fi nevoie să utilizați biblioteci externe și coduri javascript complexe.
Ca designeri și dezvoltatori, găsim de obicei un script care are o anumită monotonie pentru a structura html și a valida, în special pentru a scrie reguli de validare și apoi pentru a arăta utilizatorului când există un eșec. HTML 5 introduce aceste noi atribute, tipuri de intrare și alte elemente, astfel încât să scriem mai puțin cod și să ne concentrăm mai mult pe semantică decât pe sintaxă.
Aceste reguli funcționează în toate browserele, independent de sistemul de operare și nu este nevoie să folosim alte biblioteci sau hacks pentru a ne adapta la diferite sisteme sau dispozitive. Am văzut mai multe atribute de formă care ajută la îmbunătățirea experienței utilizatorului și la economisirea timpului de dezvoltare. Există câteva atribute care nu funcționează încă în toate browserele.
