Comment mettre le mot de passe d'entrée dans HTML5

Attribut le mot de passe crée une entrée pour la saisie de données qui, lorsque l'utilisateur les saisit, sera représentée par des points ou des astérisques ("*") à l'écran, ce qui rend difficile ou impossible pour un tiers de lire comment les données sont saisies dans le formulaire.
Cet attribut fonctionne en conjonction avec d'autres attributs qu'il partage également avec l'élément Texte de saisieRappelons-nous et voyons lesquels sont partagés par celui-ci.

• [couleur = # 808080]Longueur maximale: [/ color] Cet élément n'est pas nouveau en HTML5, cependant il est très utile puisqu'il nous permet de limiter le nombre maximum de caractères que l'entrée accepte, un exemple est lorsque nos mots de passe doivent contenir un maximum de caractères, par exemple 6 alphanumériques caractères , nous mettons cet attribut avec la valeur 6 et en essayant d'entrer un septième, il ne serait tout simplement pas écrit.

• [couleur = # 808080]Modèle: [/ color] Nouveau dans HTML5 nous permet d'entrer des modèles d'expressions régulières afin que nous puissions ajouter un nouveau niveau de validation sans utiliser de langages supplémentaires.

• [couleur = # 808080]Espace réservé : [/ color] Nouveau en HTML5, c'est une aide visuelle nous permettant de saisir un texte qui apparaîtra dans le texte de saisie montrant une petite aide pour l'utilisateur, par exemple si une saisie sert à saisir le mot de passe, nous pourrions placer comme un espace réservé "entrez votre mot de passe", bien sûr en ajustant les styles pour que tout soit esthétiquement correct.

• [couleur = # 808080]Lecture seulement: [/color] Cet attribut n'est pas nouveau en HTML5, il nous permet de rendre l'utilisateur incapable de saisir des données ou de modifier le contenu du champ qui possède cet attribut.

• [couleur = # 808080]Obligatoire: [/ color] Nouveau en HTML5, cet attribut nous permet d'indiquer que si la saisie est vide, le formulaire ne doit pas encore être soumis, forçant ainsi le caractère obligatoire de son remplissage, de cette manière nous élevons un autre niveau de validation.

• [couleur = # 808080]Taille: [/ color] Il nous aide à spécifier la largeur de l'élément de saisie, cet attribut n'est pas nouveau, cependant il est très important car il nous aide à donner un meilleur visuel du texte que l'utilisateur doit saisir, en plus de nous aider esthétiquement pour créer des champs de saisie homogènes, puisqu'ils peuvent tous être placés avec une largeur supérieure à celle qui est apportée par défaut.

• [couleur = # 808080]Valeur: [/ color] Ce n'est pas nouveau en HTML5, cet attribut nous permet de placer des valeurs à une entrée, il est différent du placeholder puisque ce qui est en valeur assigné lors de la soumission s'il serait envoyé comme contenu de l'élément, est assez utilisé pour remplir un formulaire avec du contenu qui est amené de la base de données lorsque nous utilisons un langage serveur.

Après avoir vu la théorie, voyons un exemple pratique :

 Exemple
Patate douce:

Mot de passe:
Fruit:
Soumettre Vote 

Comment nous voyons dans ce cas, nous utilisons l'attribut espace réservé pour indiquer quel type de mot de passe nous attendons, nous guidons ainsi l'utilisateur et réduisons les erreurs, une fois que l'élément commence à être écrit, le texte de l'espace réservé est remplacé par des astérisques ou par d'autres éléments qui ne laissent pas savoir qu'il est en train d'être écrit.

AGRANDIR

Une autre précaution importante que nous devons prendre est que bien que nous ne puissions pas lire ce que nous écrivons dans le champ du mot de passe, lorsque nous le recevons sur la page qui traitera ledit formulaire, le contenu arrivera sans aucun type de cryptage, nous savons donc que les données voyage sans protection , par exemple si nous traitons le formulaire précédent nous recevrions ceci :

Si nous voulons une plus grande sécurité, nous devons envisager d'utiliser des serveurs avec des protocoles sécurisés tels que SSL/HTTPS Ils cryptent les informations qu'ils envoient ou utilisent des langages comme Javascript pour crypter les informations avant qu'elles ne soient envoyées.
Avec cela, nous concluons ce didacticiel en parcourant le processus de création de formulaires pour la saisie de données sensibles et nous connaissons les implications et les mesures de sécurité que nous devons prendre pour préserver l'intégrité des données qui voyagent à partir d'un formulaire lorsque nous voulons qu'il ne soit pas lisible avec l'oeil nu. .