Cauta rapid aici ↑

Cum sa creezi un camp anti spam cu HTML 5 si CSS 3

Realizarea unui camp anti spam se poate realiza in multe feluri iar in randurile urmatoare va voi arata cum se face folosindu-ne doar de limbajele HTML 5 si CSS 3. Acest camp anti spam il vom putea pune in formularul nostru inainte de butonul de trimitere.

Pentru HTML vom avea nevoie de tag-ul input pe care vom folosi cateva atribute. Atributele pattern si required vor vace validarea campului anti spam si nu va permite trimiterea formularului nostru catre un script de pe server pana ce utilizatorul NU va introduce ce vrem noi in acel camp, fie ca este vorba de o cifra sau un cuvant. Nu trebuie sa uitam de intrebarea pe care i-o adresam celui care completeaza formularul nostru.

Pentru CSS 3 vom avea nevoie de pseudo-clasele :valid si :invalid ce le vom pune pe campul nostru de input. Rolul acestor pseudo-clase este de a-i arata utilizatorului un anumit stil pe campul de input in momentul in care acel camp este validat sau nu. Putem sa nu folosim aceste pseudo-clase, validarea se va putea efectua, dar pentru o experienta mai placuta este bine sa le utilizam, de fapt este bine sa utilizam aceste pseudo-clase pentru toate campurile noastre din formular. Pentru exemplificare eu nu le voi folosi.

Dupa cum se poate vedea am folosit si atributul maxlength caruia i-am dat ca valoare cate caractere sa contina campul de input, oprind utilizatorul sa introduca mai mult de o singura cifra sau litera. Atributul pattern va avea ca valoare ceea ce vrem sa introduca utilizatorul nostru in campul de input, fie ca este vorba de una sau mai multe cifre sau unul sau mai multe cuvinte, ramane la aprecierea noastra. Pentru ca totul sa fie bine realizat va trebui sa micsoram latimea campului anti spam la latimea textului sau al cifrelor pe care le va contine si vom putea face asta folosindu-ne in continuare de limbajul CSS iar acest lucru sunt convins ca stiti cum sa faceti, eu am preferat sa il las la setarile pe care le am deja in acest site.