Obrazac je element u HTML -u jer nam omogućuje unos podataka i stoga također stupaju u interakciju s webom i njegovom bazom podataka, što zahtijeva kontrole sa stajališta sigurnosti, budući da iz obrasca možemo slati datoteke na poslužitelj, za obradu narudžbe ili plaćanja, odabirom različitih elemenata i kontrola obrasca, koji će se zatim obraditi javascript događajem ili nekim drugim web programskim jezikom.
Mnogo puta programeri moraju koristiti različite knjižnice kako bi mogli izvršavati zadatke u obrascima kako bi kontrolirali događaje, a u nekim slučajevima moramo pribjeći nekim nepoželjnim metodama koda za slanje podataka, kontrolu unesenog, izbjegavanje ubrizgavanja koda ili XSS napada.
Ako želimo provesti sve ove kontrole i događaje, možemo pronaći veliki broj javascript datoteka koje značajno povećavaju težinu weba u kb i usporavaju stranicu. Također je nesigurno jer ako netko onemogući upotrebu Javascripta, sve će kontrole prestati raditi.
Elementi oblici i atributi u HTML5 pružaju veći stupanj kontrole i semantičkog označavanja od prethodne verzije, dodani su atributi i svojstva koja eliminiraju potrebu izvođenja kontrola izvana putem skripti. Značajke obrazaca u HTML5 pružaju bolju kontrolu i ne ovise o tome je li Javascript omogućen ili onemogućen u vašem pregledniku.
Atributi HTML5 obrasca - rezervirano mjesto
Pomoću rezervirano vlasništvo Možemo navesti primjer vrste podataka za registraciju, što nam omogućuje da korisniku pružimo informacije koje će nam poslužiti kao vodič. Ovaj tekst koji označimo unutar kontrole nestat će nakon što korisnik unese znak.
Atribut rezerviranog mjesta može se koristiti samo u okvirima za tekst ili u tekstualnim područjima.
Uzorci s pravilnim izrazima u obrascima
Atribut uzorka omogućuje nam definiranje naših pravila za provjeru podataka koje korisnik unosi pomoću regularnih izraza. Regularni izraz je niz znakova koji definira uzorak podataka, na primjer, uzorak [a-z] označava da korisnik može unijeti samo mala slova ili uzorak [0-9] označava da se mogu unijeti samo brojevi.
HTML5 vam omogućuje korištenje uzoraka, pa ako uneseni znakovi ne odgovaraju automatski definiranom uzorku, generirat će se pogreška.
Mi ćemo definirati neka pravila uzorcima i stilskim listovima promijeniti boju obruba ako se dogodi nevažeći događaj, odnosno ono što je korisnik unio nije u skladu s onim što je definirano u određenom uzorku.
Izrađujemo datoteku Example01.html i upisujemo sljedeći kod:
Uzorci s redovitim izrazima
Korisnik
Ključ:
E-mail:
Datum
Cijena
Ako pošaljemo obrazac, on će potvrditi svako polje u odnosu na definirani uzorak, a ako nije ispunjen, prikazat će se poruka koju definiramo u naslovnoj oznaci, također će koristiti stilove definirane u pravilu i svojstva CSS -a nevažeće klase koju koristi HTML5.
Na primjer, unosimo pogrešnu adresu e -pošte:
Također unosimo netočan datum i vidimo da ne dopušta slanje obrasca. Ako želimo poboljšati ili dodati vizualni efekt, možemo upotrijebiti CSS za dodavanje ikone pozadine u kontrolu u kojoj dolazi do kvara. Na primjer, dodajemo sljedeće css stilove onima koje smo već imali, ulaz mijenjamo na input [type = 'text'] tako da tablice stilova utječu samo na tekstualne okvire, a ne i na gumb.
Koristimo sljedeće ikone:
Uz svaku kontrolu dodajemo potrebno svojstvo, na primjer:
Prilikom izvršavanja primjera možemo vidjeti da će nam, ako pošaljemo obrazac s praznim poljima, prikazati obavezna i valjana polja.
Prednost uzoraka je u tome što ne koristimo JQuery ili bilo koju drugu vrstu provjere valjanosti, a ako je ova opcija deaktivirana u pregledniku, ograničenja i pravila koja definiramo nastavit će djelovati. To ne znači da podnošenjem obrasca izbjegavamo kontrole pri obradi podataka, bilo da ih spremimo u bazu podataka ili pošaljemo poštom ili izvršimo bilo koju operaciju.
Obrazac s više prijava
Nešto što je bilo složeno učiniti je pošaljite isti obrazac na dvije različite stranicePretpostavimo da će jedan obrazac za prijavu otići na različite tipke i otići na različite stranice na kojima se mijenjaju upiti i proces informacija. To se postiže definiranjem svojstvo formacije, gdje označavamo drugu opciju obrade radnje prema zadanim postavkama.
Obrazac s više prijava
Korisnik:
Ključ:
Nema sumnje da interakcija s ovim tipovima svojstava i atributa uvelike olakšava razvoj web stranica, bez potrebe za korištenjem vanjskih knjižnica i složenih javascript kodova.
Kao dizajneri i programeri, obično nalazimo da skripta ima određenu monotoniju za strukturiranje HTML -a i provjeru valjanosti, posebno za pisanje pravila provjere valjanosti i zatim prikazivanje korisniku kada dođe do kvara. HTML 5 uvodi te nove atribute, vrste unosa i druge elemente tako da moramo pisati manje koda i više se usredotočiti na semantiku nego na sintaksu.
Ova pravila funkcioniraju u svim preglednicima, neovisno o operacijskom sustavu i ne moramo koristiti druge knjižnice ili hakove za prilagođavanje različitim sustavima ili uređajima. Vidjeli smo nekoliko atributa obrasca koji pomažu poboljšati korisničko iskustvo i štede vrijeme za razvoj. Postoje neki atributi koji još ne rade u svim preglednicima.
