En formular er et element i HTML, fordi det er det, der giver os mulighed for at indtaste data og derfor også interagere med internettet og dets database, hvilket kræver kontrol ud fra et sikkerhedsmæssigt synspunkt, da vi fra en formular kan sende filer til en server for at behandle en ordre eller betaling, vælge forskellige elementer og kontroller i en formular, som derefter vil blive behandlet af en javascript -begivenhed eller af et andet webprogrammeringssprog.
Mange gange skal udviklere bruge forskellige biblioteker for at kunne udføre opgaver i formularer for at kontrollere begivenheder, og i nogle tilfælde må vi ty til nogle uønskede kodemetoder til at sende data, kontrollere, hvad der indtastes, undgå kodeindsprøjtninger eller XSS -angreb.
Hvis vi vil udføre alle disse kontroller og begivenheder, kan vi finde et stort antal javascript -filer, der væsentligt øger webens vægt i kb og bremser siden. Det er også usikkert, fordi hvis nogen deaktiverer brugen af Javascript, stopper alle kontrollerne med at fungere.
Elementerne i former og attributter i HTML5 giver en større grad af kontrol og semantisk markup end den tidligere version, attributter og egenskaber er tilføjet, der eliminerer behovet for at udføre kontroller eksternt gennem scripts. Formularfunktionerne i HTML5 giver bedre kontrol og afhænger ikke af, om Javascript er aktiveret eller deaktiveret i din browser.
HTML5 -formattributter - Pladsholder
Ved hjælp af pladsholder ejendom Vi kan angive et eksempel på den type data, der skal registreres, dette giver os mulighed for at give oplysninger til brugeren til at fungere som en vejledning. Denne tekst, som vi angiver inden for kontrollen, forsvinder, når brugeren indtaster et tegn.
Pladsholderattributten kan kun bruges i tekstfelter eller i tekstområder.
Mønstre med regulære udtryk i former
Mønsterattributten giver os mulighed for at definere vores regler for at validere de data, som brugeren indtaster ved hjælp af regulære udtryk. Et regulært udtryk er en sekvens af tegn, der definerer et datamønster, f.eks. Angiver mønsteret [a-z], at brugeren kun kan indtaste små bogstaver, eller mønsteret [0-9] angiver, at der kun kan indtastes tal.
HTML5 giver dig mulighed for at bruge mønstre, så hvis de indtastede tegn ikke matcher det automatisk definerede mønster, genererer det en fejl.
Vi skal definere nogle regler med mønstre og stilark at ændre farven på grænsen, hvis den ugyldige hændelse opstår, det vil sige, at det, der indtastes af brugeren, ikke overholder det, der er defineret i et bestemt mønster.
Vi opretter en fil Eksempel01.html og skriver følgende kode:
Mønstre med regulære udtryk
Bruger
Nøgle:
E-mail:
Dato
Pris
Hvis vi sender formularen, validerer det hvert felt med hensyn til det definerede mønster, og hvis det ikke er opfyldt, viser det den besked, vi definerer i titelmærket, det vil også bruge de typografier, der er defineret i reglen og CSS -egenskaber af den ugyldige klasse, som HTML5 bruger.
For eksempel indtaster vi en forkert email:
Vi indtaster også en forkert dato og ser, at det ikke tillader at sende formularen. Hvis vi vil forbedre eller tilføje en visuel effekt, kan vi bruge CSS til at tilføje et baggrundsikon i kontrollen, hvor fejlen opstår. For eksempel tilføjer vi følgende css -typografier til dem, vi allerede havde, vi ændrer input til input [type = 'tekst'], så typografiarkene kun påvirker tekstfelterne og ikke knappen.
Vi bruger følgende ikoner:
Ved siden af hver kontrol tilføjer vi den nødvendige egenskab, for eksempel:
Når vi eksekverer eksemplet, kan vi se, at hvis vi sender formularen med tomme felter, viser de os de nødvendige og gyldige felter.
Fordelen ved mønstre er, at vi ikke bruger JQuery eller nogen anden form for validering, og hvis denne indstilling er deaktiveret i browseren, vil de begrænsninger og regler, som vi definerer, fortsætte med at fungere. Dette indebærer ikke, at vi ved at indsende formularen undgår kontrol under behandling af data, om vi vil gemme i en database eller sende dem via mail eller udføre enhver handling.
Skema med flere indsendelser
Noget, der var komplekst at gøre, er sende den samme formular til to forskellige siderLad os antage en enkelt loginformular, som når der klikkes på en knap, vil den gå til forskellige sider, hvor forespørgslerne og informationsprocessen ændres. Dette gøres ved at definere formation ejendom, hvor vi som standard angiver en anden behandlingsmulighed for handlingen.
Skema med flere indsendelser
Bruger:
Nøgle:
Der er ingen tvivl om, at interaktion med disse typer ejendomme og attributter i høj grad letter udviklingen af websteder uden at skulle bruge eksterne biblioteker og komplekse javascript -koder.
Som designere og udviklere finder vi normalt, at et script har en vis monotoni til at strukturere html og validere, især for at skrive valideringsregler og derefter vise brugeren, når der er en fejl. HTML 5 introducerer disse nye attributter, inputtyper og andre elementer, så vi skal skrive mindre kode og fokusere mere på semantik end syntaks.
Disse regler fungerer i alle browsere, uafhængigt af operativsystemet, og vi behøver ikke at bruge andre biblioteker eller hacks til at tilpasse sig forskellige systemer eller enheder. Vi har set flere formattributter, der hjælper med at forbedre brugeroplevelsen og spare udviklingstid. Der er nogle attributter, der ikke fungerer i alle browsere endnu.
