パスワード表示トグル

解説

目のアイコンを押すと、入力したパスワードの表示と非表示を切り替えられるトグルです。仕組みは入力欄の type 属性を password と text の間で入れ替えるだけ。隠している間は伏字、押すと中身が見えるようになり、アイコンも「目」と「目に斜線」を切り替えて状態を分かりやすく示します。アイコンはインライン SVG で描かれており外部フォントに依存しません。入力欄とボタンは position で重ね、ボタンには aria-label を付けて支援技術にも役割が伝わるよう配慮しています。

役立つ場面

• ログイン・新規登録フォームの入力ミス防止
• パスワード再設定で入力内容を確認したいとき
• クーポンや認証コードなど、伏字にしたい一時的な入力欄

アイコンの大きさは font-size、位置は right や top で調整できます。フォーカス時の枠色は入力欄の :focus で変えられます。注意点として、表示状態のままだと肩越しに覗かれる懸念があるため、初期状態は必ず非表示にしておくのが安全です。ボタンは type="button" を明示し、フォーム送信を誤って発火させないようにしてあります。アクセシビリティ上、状態が変わったことを伝えたい場合は aria-pressed を併用するとより丁寧です。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録