HTMLでパスワードを表示する方法 - シンプルで簡単なコード例

パスワードの表示/非表示を切り替えるチェックボックスを使用する方法:

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

上記のコードでは、パスワードフィールドと表示/非表示を切り替えるチェックボックスを作成しています。チェックボックスをクリックすると、JavaScriptの関数togglePassword()が実行され、パスワードフィールドのtype属性がpasswordからtextに変更されたり、textからpasswordに変更されたりします。

パスワードの表示/非表示を切り替えるボタンを使用する方法:

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

上記のコードでは、パスワードフィールドと表示/非表示を切り替えるボタンを作成しています。ボタンをクリックすると、JavaScriptの関数togglePassword()が実行され、パスワードフィールドのtype属性がpasswordからtextに変更されたり、textからpasswordに変更されたりします。

これらの方法を使用すると、ユーザーがパスワードの入力内容を確認できるようになりますが、セキュリティの観点からは注意が必要です。パスワードの表示は一時的なものであり、実際の運用ではデフォルトで非表示とすることが推奨されます。