Et skjema er et element i HTML fordi det er det som lar oss legge inn data og derfor også samhandle med nettet og dets database, som krever kontroll fra et sikkerhetsmessig synspunkt, siden vi fra et skjema kan sende filer til en server, for å behandle en ordre eller betaling, velge forskjellige elementer og kontroller av et skjema, som deretter vil bli behandlet av en javascript -hendelse eller av et annet webprogrammeringsspråk.
Mange ganger må utviklere bruke forskjellige biblioteker for å kunne utføre oppgaver i skjemaer for å kontrollere hendelser, og i noen tilfeller må vi ty til noen uønskede kodemetoder for å sende data, kontrollere hva som legges inn, unngå kodeinjeksjoner eller XSS -angrep.
Hvis vi ønsker å utføre alle disse kontrollene og hendelsene, kan vi finne et stort antall javascript -filer som øker vekten på nettet betydelig i kb og bremser siden. Det er også usikkert fordi hvis noen deaktiverer bruken av Javascript, slutter alle kontrollene å fungere.
Elementene i former og attributter i HTML5 gir en større grad av kontroll og semantisk markup enn den forrige versjonen, attributter og egenskaper er lagt til som eliminerer behovet for å utføre kontroller eksternt gjennom skript. Skjemafunksjonene i HTML5 gir bedre kontroll og er ikke avhengig av om Javascript er aktivert eller deaktivert i nettleseren din.
HTML5 skjemaattributter - plassholder
Ved hjelp av plassholder eiendom Vi kan angi et eksempel på hvilken type data som skal registreres, dette lar oss gi informasjon til brukeren for å fungere som en guide. Denne teksten som vi angir i kontrollen, vil forsvinne etter at brukeren har lagt inn et tegn.
Attributtet for plassholder kan bare brukes i tekstbokser eller i tekstområder.
Mønstre med regulære uttrykk i former
Mønsterattributtet lar oss definere våre regler for å validere dataene som brukeren legger inn ved hjelp av vanlige uttrykk. Et vanlig uttrykk er en sekvens av tegn som definerer et datamønster. For eksempel angir mønsteret [a-z] at brukeren bare kan skrive små bokstaver eller at mønsteret [0-9] indikerer at bare tall kan angis.
HTML5 lar deg bruke mønstre, så hvis de angitte tegnene ikke samsvarer med det automatisk definerte mønsteret, vil det generere en feil.
Vi kommer til å definere noen regler med mønstre og stilark for å endre fargen på grensen hvis den ugyldige hendelsen oppstår, det vil si at det som er angitt av brukeren ikke samsvarer med det som er definert i et bestemt mønster.
Vi lager en fil Eksempel01.html og skriver følgende kode:
Mønstre med vanlige uttrykk
Bruker
Nøkkel:
E-post:
Dato
Pris
Hvis vi sender skjemaet, vil det validere hvert felt med hensyn til det definerte mønsteret, og hvis det ikke er oppfylt, viser det meldingen som vi definerer i tittelkoden, det vil også bruke stilene som er definert i regelen og CSS -egenskaper av den ugyldige klassen som HTML5 bruker.
For eksempel skriver vi inn feil e -post:
Vi legger også inn en feil dato og ser at det ikke tillater å sende skjemaet. Hvis vi ønsker å forbedre eller legge til en visuell effekt, kan vi bruke CSS til å legge til et bakgrunnsikon i kontrollen der feilen oppstår. For eksempel legger vi til følgende css -stiler til de vi allerede hadde, vi endrer inngangen til input [type = 'text'] slik at stilarkene bare påvirker tekstboksene og ikke knappen.
Vi bruker følgende ikoner:
Ved siden av hver kontroll legger vi til den nødvendige egenskapen, for eksempel:
Når vi utfører eksemplet, kan vi se at hvis vi sender skjemaet med tomme felt, vil de vise oss de nødvendige og gyldige feltene.
Fordelen med mønstre er at vi ikke bruker JQuery eller noen annen type validering, og hvis dette alternativet er deaktivert i nettleseren, vil begrensningene og reglene vi definerer fortsette å fungere. Dette betyr ikke at vi ved å sende inn skjemaet unngår kontroller når vi behandler dataene, om vi skal lagre i en database eller sende dem via post eller utføre operasjoner.
Skjema med flere innsendinger
Noe som var komplekst å gjøre er sende det samme skjemaet til to forskjellige siderLa oss anta at et enkelt påloggingsskjema som når du klikker på en knapp, vil gå til forskjellige sider der spørringene og informasjonsprosessen endres. Dette gjøres ved å definere formasjonseiendom, der vi angir et annet behandlingsalternativ for handlingen som standard.
Skjema med flere innsendinger
Bruker:
Nøkkel:
Det er ingen tvil om at interaksjon med denne typen eiendommer og attributter i stor grad letter utviklingen av nettsteder, uten å måtte bruke eksterne biblioteker og komplekse JavaScript -koder.
Som designere og utviklere finner vi vanligvis at et skript har en viss monotoni for å strukturere html og validere, spesielt for å skrive valideringsregler og deretter vise brukeren når det er en feil. HTML 5 introduserer disse nye attributtene, inndatatypene og andre elementer slik at vi må skrive mindre kode og fokusere mer på semantikk enn syntaks.
Disse reglene fungerer i alle nettlesere, uavhengig av operativsystemet, og vi trenger ikke å bruke andre biblioteker eller hack for å tilpasse seg forskjellige systemer eller enheter. Vi har sett flere formattributter som hjelper til med å forbedre brukeropplevelsen og spare utviklingstid. Det er noen attributter som ikke fungerer i alle nettlesere ennå.
