Pour afficher ou masquer le mot de passe d'un input HTML, vous pouvez créer un élément cliquable pour modifier la valeur de l'attribut type :
- La valeur
password masque le mot de passe.
- La valeur
text affiche le mot de passe.
Dans l'exemple qui suit, on crée une case à cocher, et on utilise l'évènement onclick JavaScript pour déclencher la fonction qui va afficher, ou masquer, le mot de passe de la balise <input> HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment afficher le mot de passe d'un input HTML ?</title>
</head>
<body>
<input type="password" value="1formatik" id="motdepasse">
<input type="checkbox" onclick="Afficher()"> Afficher le mot de passe
<script>
function Afficher()
{
var input = document.getElementById("motdepasse");
if (input.type === "password")
{
input.type = "text";
}
else
{
input.type = "password";
}
}
</script>
</body>
</html>
