✅ Sådan indsættes indtastningsadgangskode i HTML5

Indholdsfortegnelse

Attribut adgangskode opretter et input til dataindtastning, at når brugeren indtaster dem, vil de blive repræsenteret som prikker eller stjerner ("*") på skærmen, hvilket gør det svært eller umuligt for en tredjepart at læse, hvordan dataene indtastes i formularen.
Denne attribut fungerer sammen med andre attributter, som den også deler med elementet inputtekstLad os huske og se, hvilke der deles af denne.

[farve = # 808080]Maxlængde: [/ color] Dette element er ikke nyt i HTML5, men det er meget nyttigt, da det giver os mulighed for at begrænse det maksimale antal tegn, input kan acceptere, et eksempel er, når vores adgangskoder maksimalt må indeholde tegn, f.eks. 6 alfanumeriske tegn, sætter vi denne attribut med værdi 6, og når vi prøver at indtaste en syvende, ville den simpelthen ikke blive skrevet.

[farve = # 808080]Mønster: [/ color] Nyt i HTML5 giver os mulighed for at indtaste regulære udtryksmønstre, så vi kan tilføje et nyt valideringsniveau uden at bruge yderligere sprog.

[farve = # 808080]Pladsholder: [/ color] Ny i HTML5, det er et visuelt hjælpemiddel, der giver os mulighed for at indtaste en tekst, der vises i inputteksten, der viser en lille hjælp til brugeren, for eksempel hvis et input er til indtastning af adgangskoden, kunne vi placere som en pladsholder "indtast din adgangskode", naturligvis justere stilarterne for at få alt til at se æstetisk korrekt ud.

[farve = # 808080]Læs kun: [/ color] Denne attribut er ikke ny i HTML5, den giver os mulighed for at gøre brugeren ude af stand til at indtaste data eller redigere indholdet i feltet, der har denne attribut.

[farve = # 808080]Påkrævet: [/ color] Ny i HTML5, denne attribut giver os mulighed for at angive, at hvis input er tomt, skal formularen ikke indsendes endnu, og dermed tvinges den obligatoriske karakter af dens udfyldning, på denne måde hæver vi et andet valideringsniveau.

[farve = # 808080]Størrelse: [/ color] Det hjælper os med at angive bredden på inputelementet, denne attribut er ikke ny, men det er meget vigtigt, da det hjælper os med at give et bedre billede af den tekst, som brugeren skal indtaste, ud over at hjælpe os æstetisk for at skabe homogene inputfelter, da de alle kan placeres med en bredde større end den, der er bragt som standard.

[farve = # 808080]Værdi: [/ color] Det er ikke nyt i HTML5, denne attribut giver os mulighed for at placere værdier på et input, det er forskelligt fra pladsholderen, da den værdi, der er tildelt ved indsendelse, hvis den ville blive sendt som indhold i elementet, er ganske brugt til at udfylde en formular med indhold, der hentes fra databasen, når vi bruger et serversprog.

Efter at have set teorien, lad os se et praktisk eksempel på det:

Eksempel

Yam:

Adgangskode:

Frugt:

Send stemme

Hvordan vi ser i dette tilfælde, bruger vi attributten pladsholder for at angive hvilken type adgangskode vi forventer, på denne måde guider vi brugeren og reducerer fejl, når elementet begynder at blive skrevet, erstattes pladsholderens tekst med stjerner eller med andre elementer, der ikke lader det være kendt, at det bliver skrevet.

FORSTØRRE

En anden vigtig forholdsregel, som vi skal tage, er, at selvom vi ikke kan læse, hvad vi skriver i kodeordfeltet, når vi modtager det på siden, der behandler formularen, kommer indholdet uden nogen form for kryptering, så vi ved, at dataene rejser uden beskyttelse, for eksempel hvis vi behandler den tidligere formular, modtager vi dette:

Hvis vi ønsker større sikkerhed, skal vi overveje at bruge servere med sikre protokoller som f.eks SSL / HTTPS De krypterer de oplysninger, de sender, eller bruger sprog som Javascript til at kryptere oplysningerne, før de sendes.
Med dette afslutter vi denne vejledning gennem processen med at oprette formularer til indtastning af følsomme data, og vi kender de konsekvenser og sikkerhedsforanstaltninger, vi skal tage for at bevare integriteten af de data, der bevæger sig fra en formular, når vi vil have, at de ikke kan læses med det blotte øje ..