Validarea câmpurilor de introducere a adresei de e-mail și URL în formularele HTML

În acest tutorial vei învăța toate aspectele importante ale câmpurilor de introducere pentru adrese de e-mail și URL-uri în formularele HTML. Scopul este de a-ți arăta cum să implementezi eficient validarea acestor introduceri și cum să ajustezi stilul pentru diversele stări de introducere. Acest lucru nu numai că va îmbunătăți experiența utilizatorului, dar va îmbunătăți și calitatea datelor pe care le aduni.

Cele mai importante constatări

• Vei învăța structura de bază și validarea pentru E-mail și URL folosind HTML.
• De asemenea, vei învăța cum să furnizezi un feedback vizual utilizatorilor atunci când introducerile sunt invalide folosind CSS.
• Va fi explicată utilizarea de modele pentru validarea suplimentară a adreselor de e-mail și URL-uri.

Ghid Pas cu Pas

1. Crearea unui câmp de introducere de bază pentru E-mail

Începe prin a crea un element input standard pentru E-mail. Aici trebuie să setezi tipul ca "email", astfel încât browserul să valideze introducerea automat.

Câmpul de introducere va fi tratat acum de HTML astfel încât să se aștepte la o adresă de e-mail și să ofere feedback vizual în cazul unei introduceri greșite. Odată ce un utilizator începe introducerea, fundalul se va schimba în roz pentru a semnala că este ceva incorect.

2. Validarea adresei de E-mail

Validarea adresei de E-mail se face folosind reguli simple. De exemplu, trebuie să existe cel puțin un caracter "@" urmat de cel puțin un alt caracter. Aceasta este o validare NLP de bază. Cu toate acestea, această regulă de validare nu este suficientă pentru a garanta că adresa de e-mail există în realitate.

Un exemplu de adresă de e-mail invalidă ar fi „bla@“. Într-un astfel de caz, trimiterea formularului va fi blocată, iar utilizatorul va vedea o notificare de eroare.

3. Utilizarea de Modele pentru o Validare mai Precisă

Pentru a obține o validare mai precisă, poți folosi atributul "model". Cu o expresie regulată (Regex) poți stabili că adresa de E-mail corespunde anumitor cerințe, cum ar fi o anumită domeniu.

Prin această validare suplimentară te asiguri că sunt acceptate doar adrese de E-mail valide, cum ar fi cele deținute de Gmail sau GMX.

4. Introducerea obligatorie și Stilizarea

Pentru a te asigura că câmpul de e-mail este completat, poți adăuga atributul "required". Dacă utilizatorul încearcă să trimită formularul fără a introduce nimic, va primi imediat un feedback vizual.

Pentru stilizarea introducerilor invalide, poți folosi în CSS selectorul ":invalid". Astfel, fundalul câmpului va deveni roșu pentru a avertiza utilizatorul că introducerea nu este corectă.

5. Crearea unui câmp de introducere pentru URL-uri

Asemănător cu cazul E-mail-ului, este important să creezi un element input corespunzător pentru URL-uri. Setează tipul ca "url", astfel încât browser-ul să valideze și aici introducerea.

6. Validarea URL-ului

Cerintele de bază pentru un URL valabil includ faptul că acesta trebuie să înceapă cu „http://” sau „https://” și să aibă cel puțin un caracter următor. Dacă utilizatorul introduce doar „https”, aceasta nu este suficient.

Același principiu se aplică și pentru alte protocoale precum „ftp”. Dacă introducerea nu corespunde cerințelor, browser-ul oferă feedback și nu permite trimiterea formularului.

7. Validare Avansată cu Modele pentru URL-uri

Pentru a face validarea mai precisă pentru anumite modele cum ar fi „https://www.example.com”, ar trebui să folosești de asemenea atributul "model" pentru a-i ajuta pe utilizatori să introducă URL-uri corecte.

8. Utilizabilitatea pe dispozitive mobile

Un mare avantaj al folosirii tipurilor "email" și "url" în formulare este îmbunătățirea utilizabilității pe dispozitivele mobile. Tastatura este optimizată pentru a ușura utilizatorilor tastarea adreselor de email și a URL-urilor.

Rezumat

În acest tutorial am abordat cele mai importante criterii pentru validarea adreselor de email și a URL-urilor în formularele web. Ai învățat cum să efectuezi validări simple și avansate și cum să personalizezi feedback-ul utilizatorului cu CSS pentru a oferi o experiență mai bună utilizatorilor.