HTMLでパスワードを表示する方法


  1. type属性を"text"から"password"に変更する: 通常、パスワードフィールドはtype属性に"text"が設定されますが、これを"password"に変更することで、入力されたパスワードが隠されるようになります。以下は例です:

    <input type="password" name="password">
  2. パスワードの表示/非表示の切り替えボタンを追加する: パスワードを表示または非表示にするための切り替えボタンを追加することもできます。これにはJavaScriptを使用します。

    <input type="password" id="passwordField" name="password">
    <input type="checkbox" onclick="togglePasswordVisibility()"> パスワードを表示する
    <script>
    function togglePasswordVisibility() {
     var passwordField = document.getElementById("passwordField");
     if (passwordField.type === "password") {
       passwordField.type = "text";
     } else {
       passwordField.type = "password";
     }
    }
    </script>

    上記のコードでは、チェックボックスをクリックするとパスワードの表示/非表示が切り替わります。

これらの方法を使用することで、HTMLでパスワードを表示することができます。ただし、セキュリティ上の理由から、一般的にはパスワードは表示しないようにすることが推奨されます。パスワードを表示する場合は、注意して使用してください。