フォームのパスワード表示・非表示を切り替える方法
フォームのパスワード表示・非表示を切り替える方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、パスワード入力欄の内容をボタン1つで表示・非表示に切り替える機能を作成します。ログインフォームや会員登録フォームなどでよく利用されている機能で、入力したパスワードを確認しながら操作できるため、入力ミスを減らしたい場合に便利です。
このサンプルコードを利用すると、通常は伏せ字で表示されるパスワードを、一時的に表示して内容を確認できるようになります。JavaScriptで入力欄の種類を切り替えるシンプルな仕組みのため、初心者でも導入しやすく、既存のフォームへも組み込みやすい構成です。デザインもCSSで自由に調整できるため、サイトの雰囲気に合わせてカスタマイズできます。
パスワード表示・非表示の切り替え機能は、ログインフォーム、会員登録フォーム、パスワード変更フォームなど幅広い場面で利用されています。入力内容を確認しながら操作できるため、ユーザーの利便性向上にもつながります。実際に動作するサンプルコードを参考にしながら、使いやすいフォームを作成したい方にもおすすめです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
チェックを入れるとパスワードを表示します。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- スマホ表示に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>フォームのパスワード表示・非表示切り替え</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- パスワードフォーム全体を囲むエリア -->
<div class="password-visibility-toggle-form_wrap">
<!-- タイトル -->
<div class="password-visibility-toggle-form_title">
ログインフォーム
</div>
<!-- 説明文 -->
<p class="password-visibility-toggle-form_text">
チェックを入れるとパスワードを表示します。
</p>
<!-- 入力欄 -->
<div class="password-visibility-toggle-form_field">
<label class="password-visibility-toggle-form_label" for="password-visibility-toggle-form-password">
パスワード
</label>
<input class="password-visibility-toggle-form_input" type="password" id="password-visibility-toggle-form-password" name="password" placeholder="パスワードを入力">
<!-- チェックを入れるとパスワードを表示する -->
<label class="password-visibility-toggle-form_check">
<input class="password-visibility-toggle-form_checkbox" type="checkbox">
パスワードを表示する
</label>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。
sample/
├── index.html
├── style.css
└── script.js
index.html をブラウザで開くと、チェックボックスによるパスワードの表示・非表示切り替えを確認できます。チェックを入れると入力内容が表示され、チェックを外すと再び伏せ字表示へ戻ります。
コメント