Le formulaire de connexion est le formulaire que nous retrouvons le plus sur les sites internet. Créer un formulaire de connexion qui donne le choix à l'utilisateur d'afficher ou de cacher son mot de passe est donc un élément qui améliorera considérablement la vie de vos utilisateurs. Voyons dans cet article comment faire !
Envie de voir le code en live ?
Rendez-vous directement sur ce lien : démonstration
Pour commencer écrivons notre code HTML Le code est simple.
<label>
<input type="password" placeholder="Mot de passe">
<div class="password-icon">
<i data-feather="eye"></i>
<i data-feather="eye-off"></i>
</div>
</label>
<!-- ICON SCRIPT -->
<script src="https://unpkg.com/feather-icons"></script>
<script>
feather.replace();
</script>
Dans l’étape précédente, nous utilisons unpkg et sa collection d’icônes.
C’est une solution rapide pour facilement mettre des icônes : eye et eye-off qui sont les icônes qui nous permettent d’afficher un oeil et un oeil barré.
Stylisons maintenant le label
et l'input
.
label {
position: relative;
}
label input {
font-size: 1em;
color: #f9f9f9;
background: transparent;
padding: 1rem 1.2rem;
width: 350px;
border-radius: 5px;
border: 2px solid #7a7a7a;
transition: all 0.2s;
}
Rien de compliqué ici. On donne une position "relative" à notre classe label
afin de positionner nos icônes plus facilement. Nous stylisons ensuite notre champ de formulaire de mot de passe.
On définie par exemple des bordures arrondies avec border-radius
avant de donner des couleurs de fond et au texte.
Stylisons maintenant l'input
au focus / clic.
label input:focus {
border-color: #ff4754;
}
Lorsque notre utilisateur clique sur le champ de formulaire, il aura ainsi une bordure de couleur.
Nous devons maintenant styliser l'icône Afficher et Cacher.
label .password-icon {
display: flex;
align-items: center;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
width: 20px;
color: #f9f9f9;
transition: all 0.2s;
}
De la même manière rien de compliqué ici : on définit une propriété transform qui va décaler de 50% notre icône avec translateY au niveau horizontal. En faisant ça, notre icône restera alignée au centre à droite du champ de formulaire.
Stylisons maintenant l'icône au survol et cachons l'icône de l'oeil barré pour ne laisser que l'icône de l'oeil "normal".
label .password-icon:hover {
cursor: pointer;
color: #ff4754;
}
label .password-icon .feather-eye-off {
display: none;
}
La classe .feather-eye-off
est une classe générée automatiquement par la collection d'icône que nous avons importé.
Passons au JavaScript et sélectionnons les éléments.
const eye = document.querySelector(".feather-eye");
const eyeoff = document.querySelector(".feather-eye-off");
const passwordField = document.querySelector("input[type=password]");
Nous sélectionnons les deux classes créées par unpkg / feather et l’input de type password pour ensuite pouvoir détecter les clics et transformer le type de l’input.
Détectons maintenant le clic sur l'oeil et sur l'oeil barré.
eye.addEventListener("click", () => {
eye.style.display = "none";
eyeoff.style.display = "block";
passwordField.type = "text";
});
eyeoff.addEventListener("click", () => {
eyeoff.style.display = "none";
eye.style.display = "block";
passwordField.type = "password";
});
Lorsque l’utilisateur vient cliquer sur l’oeil, alors on cache l’icône de l’oeil “normale” et on affiche l’icône de l’oeil “barré”.
Nous en profitons pour changer le type de l’input de “password” à “text”.
Enfin, nous faisons l’inverse pour pouvoir revenir à un input “caché”.
Si vous voulez maîtrisez complètement le JavaScript pour faire bien plus qu'afficher / cacher un mot de passe sur un champ de formulaire (input), nous vous invitons grandement à suivre notre formation JavaScript complète immédiatement : apprendre le JavaScript
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.