Hoe invoerwachtwoord in HTML5 te plaatsen

Attribuut wachtwoord creëert een invoer voor gegevensinvoer die wanneer de gebruiker deze invoert, wordt weergegeven als punten of sterretjes ("*") op het scherm, waardoor het voor een derde partij moeilijk of onmogelijk is om te lezen hoe de gegevens in het formulier worden ingevoerd.
Dit attribuut werkt samen met andere attributen die het ook deelt met het element invoer tekstLaten we onthouden en kijken welke door deze worden gedeeld.

• [kleur = # 808080]Maximale lengte: [/ color] Dit element is niet nieuw in HTML5, maar het is erg handig omdat het ons in staat stelt het maximale aantal tekens dat de invoer accepteert te beperken, een voorbeeld is wanneer onze wachtwoorden een maximum van tekens moeten bevatten, bijvoorbeeld 6 alfanumeriek karakters , plaatsen we dit attribuut met waarde 6 en wanneer we proberen een zevende in te voeren, zou het gewoon niet worden geschreven.

• [kleur = # 808080]Patroon: [/ color] Nieuw in HTML5 stelt ons in staat patronen voor reguliere expressies in te voeren, zodat we een nieuw validatieniveau kunnen toevoegen zonder extra talen te gebruiken.

• [kleur = # 808080]Tijdelijke aanduiding: [/ color] Nieuw in HTML5, het is een visueel hulpmiddel waarmee we een tekst kunnen invoeren die in de invoertekst zal verschijnen met een kleine hulp voor de gebruiker, bijvoorbeeld als een invoer is voor het invoeren van het wachtwoord, we zouden als een tijdelijke aanduiding "voer uw wachtwoord in", natuurlijk door de stijlen aan te passen om alles er esthetisch correct uit te laten zien.

• [kleur = # 808080]Alleen lezen: [/ color] Dit attribuut is niet nieuw in HTML5, het stelt ons in staat om de gebruiker niet in staat te stellen gegevens in te voeren of de inhoud van het veld met dit attribuut te bewerken.

• [kleur = # 808080]Vereist: [/ color] Nieuw in HTML5, dit attribuut stelt ons in staat om aan te geven dat als de invoer leeg is, het formulier nog niet moet worden ingediend, waardoor het verplichte karakter van het invullen wordt geforceerd, op deze manier verhogen we een ander niveau van validatie.

• [kleur = # 808080]Maat: [/ color] Het helpt ons om de breedte van het invoerelement te specificeren, dit attribuut is niet nieuw, maar het is erg belangrijk omdat het ons helpt om een ​​beter beeld te geven van de tekst die de gebruiker moet invoeren, naast ons te helpen om esthetische homogene invoervelden te creëren, aangezien ze allemaal kunnen worden geplaatst met een grotere breedte dan standaard wordt aangeboden.

• [kleur = # 808080]Waarde: [/ color] Het is niet nieuw in HTML5, dit attribuut stelt ons in staat om waarden aan een invoer te plaatsen, het is anders dan de tijdelijke aanduiding, aangezien wat in waarde wordt toegewezen bij het indienen als het zou worden verzonden als inhoud van het element, is nogal gebruikt om een ​​formulier in te vullen met inhoud die uit de database wordt gehaald als we een servertaal gebruiken.

Laten we, nadat we de theorie hebben gezien, een praktisch voorbeeld ervan bekijken:

 Voorbeeld
Jam:

Wachtwoord:
Fruit:
Stem verzenden 

Hoe we in dit geval zien, gebruiken we het attribuut tijdelijke aanduiding om aan te geven welk type wachtwoord we verwachten, op deze manier begeleiden we de gebruiker en verminderen we fouten, zodra het element begint te schrijven, wordt de tekst van de tijdelijke aanduiding vervangen door sterretjes of door andere elementen die niet laten weten dat het wordt geschreven.

VERGROTEN

Een andere belangrijke voorzorgsmaatregel die we moeten nemen, is dat hoewel we niet kunnen lezen wat we in het wachtwoordveld schrijven, wanneer we het ontvangen op de pagina die genoemd formulier zal verwerken, de inhoud zal aankomen zonder enige vorm van codering, dus we weten dat de gegevens reist zonder bescherming, als we bijvoorbeeld het vorige formulier verwerken, krijgen we dit:

Als we meer beveiliging willen, moeten we overwegen servers te gebruiken met veilige protocollen zoals: SSL / HTTPS Ze versleutelen de informatie die ze verzenden of gebruiken talen zoals Javascript om de informatie te coderen voordat deze wordt verzonden.
Hiermee sluiten we deze tutorial af door het proces van het maken van formulieren voor het invoeren van gevoelige gegevens te doorlopen en we kennen de implicaties en beveiligingsmaatregelen die we moeten nemen om de integriteit te behouden van de gegevens die van een formulier komen wanneer we willen dat het niet leesbaar is met het blote oog..