Forma yra HTML elementas, nes tai leidžia mums įvesti duomenis ir todėl taip pat sąveikauti su žiniatinkliu ir jo duomenų baze, kuriai saugumo požiūriu reikia kontrolės, nes iš formos galime siųsti failus į serverį, apdoroti užsakymą ar mokėjimą, pasirinkdami skirtingus formos elementus ir valdiklius, kurį vėliau apdoros „JavaScript“ įvykis arba kita žiniatinklio programavimo kalba.
Daug kartų kūrėjai, norėdami kontroliuoti įvykius, turi naudoti skirtingas bibliotekas, kad galėtų atlikti užduotis formomis, o kai kuriais atvejais turime naudoti tam tikrus nepageidaujamus kodo metodus duomenims siųsti, kontroliuoti, kas įvedama, vengti kodų įvedimo ar XSS atakų.
Jei norime atlikti visus šiuos valdiklius ir įvykius, galime rasti daugybę „JavaScript“ failų, kurie žymiai padidina žiniatinklio svorį kb ir sulėtina puslapį. Tai taip pat nesaugu, nes jei kas nors išjungs „Javascript“ naudojimą, visi valdikliai nustos veikti.
Elementai formos ir atributai HTML5 suteikia didesnį kontrolės ir semantinio žymėjimo laipsnį nei ankstesnė versija, buvo pridėti atributai ir savybės, dėl kurių nebereikia atlikti valdymo išoriškai naudojant scenarijus. Formų funkcijos HTML5 suteikia geresnį valdymą ir nepriklauso nuo to, ar jūsų naršyklėje įjungtas ar išjungtas „Javascript“.
HTML5 formos atributai - vietos rezervavimo ženklas
Pasitelkus vietos rezervavimo turtas Galime nurodyti registruojamų duomenų tipo pavyzdį, tai leidžia mums pateikti informaciją vartotojui, kad jis galėtų būti vadovas. Šis tekstas, kurį nurodome valdiklyje, dings vartotojui įvedus simbolį.
Vietos rezervuotojo atributą galima naudoti tik teksto laukeliuose arba teksto srityse.
Modeliai su taisyklingomis išraiškomis formose
Modelio atributas leidžia mums apibrėžti savo taisykles, kad patvirtintume duomenis, kuriuos vartotojas įveda naudodamas įprastas išraiškas. Įprasta išraiška yra simbolių seka, apibrėžianti duomenų modelį, pavyzdžiui, modelis [a – z] rodo, kad vartotojas gali įvesti tik mažąsias raides, o šablonas [0–9] rodo, kad galima įvesti tik skaičius.
HTML5 leidžia naudoti šablonus, taigi, jei įvesti simboliai neatitinka automatiškai apibrėžto modelio, tai sukels klaidą.
Mes ketiname apibrėžkite kai kurias taisykles naudodami modelius ir stiliaus lapus pakeisti kraštinės spalvą, jei įvyksta netinkamas įvykis, tai yra, tai, ką įvedė vartotojas, neatitinka to, kas apibrėžta tam tikru šablonu.
Sukuriame failą Example01.html ir įrašome šį kodą:
Šablonai su reguliariomis išraiškomis
Vartotojas
Raktas:
El. Paštas:
Data
Kaina
Jei atsiųsime formą, ji patvirtins kiekvieną lauką pagal apibrėžtą modelį, o jei jis nebus įvykdytas, bus parodytas pranešimas, kurį mes apibrėžiame pavadinimo žymoje, taip pat bus naudojami taisyklėje apibrėžti stiliai ir CSS ypatybės netinkamos klasės, kurią naudoja HTML5.
Pavyzdžiui, įvedame neteisingą el. Pašto adresą:
Taip pat įvedame neteisingą datą ir matome, kad ji neleidžia siųsti formos. Jei norime patobulinti ar pridėti vaizdinį efektą, galime naudoti CSS, kad valdiklyje, kuriame įvyko gedimas, būtų pridėta fono piktograma. Pavyzdžiui, prie tų, kuriuos jau turėjome, pridedame šiuos css stilius, įvestį pakeičiame įvestį [type = 'text'], kad stiliaus lapai paveiktų tik teksto laukus, o ne mygtuką.
Mes naudojame šias piktogramas:
Prie kiekvieno valdiklio pridedame reikiamą ypatybę, pavyzdžiui:
Vykdydami pavyzdį matome, kad jei formą atsiųsime su tuščiais laukais, jie parodys mums privalomus ir galiojančius laukus.
Šablonų pranašumas yra tas, kad mes nenaudojame „JQuery“ ar bet kokio kito tipo patvirtinimo, ir jei ši parinktis bus išjungta naršyklėje, mūsų nustatyti apribojimai ir taisyklės ir toliau veiks. Tai nereiškia, kad pateikdami formą vengiame kontroliuoti tvarkydami duomenis, nesvarbu, ar išsaugoti duomenų bazėje, ar siųsti juos paštu, ar atlikti bet kokią operaciją.
Forma su keliais pateikimais
Kažkas sudėtingo buvo siųsti tą pačią formą į du skirtingus puslapiusTarkime, viena prisijungimo forma, kurią spustelėjus mygtuką, ji pateks į skirtingus puslapius, kuriuose keičiasi užklausos ir informacijos procesas. Tai daroma apibrėžiant formavimo turtas, kur pagal numatytuosius nustatymus nurodome kitą veiksmo apdorojimo parinktį.
Forma su keliais pateikimais
Vartotojas:
Raktas:
Neabejotina, kad sąveika su tokio tipo ypatybėmis ir atributais labai palengvina svetainių kūrimą, nenaudojant išorinių bibliotekų ir sudėtingų „JavaScript“ kodų.
Mes, kaip dizaineriai ir kūrėjai, dažniausiai pastebime, kad scenarijus turi tam tikrą monotoniją html struktūrai ir patvirtinimui, ypač parašyti patvirtinimo taisykles ir tada parodyti vartotojui, kai yra nesėkmė. HTML 5 pristato šiuos naujus atributus, įvesties tipus ir kitus elementus, kad turėtume rašyti mažiau kodo ir daugiau dėmesio skirti semantikai nei sintaksei.
Šios taisyklės veikia visose naršyklėse, nepriklausomai nuo operacinės sistemos, ir mums nereikia naudoti kitų bibliotekų ar įsilaužimų, kad prisitaikytume prie skirtingų sistemų ar įrenginių. Mes matėme keletą formos atributų, padedančių pagerinti vartotojo patirtį ir sutaupyti kūrimo laiko. Yra keletas atributų, kurie dar neveikia visose naršyklėse.
