← カテゴリ一覧に戻る

パスワード入力

input type=password

type="password" は入力値をマスク（●●●）表示にする専用の input 型です。 適切な autocomplete 属性を設定することでパスワードマネージャーとの連携が改善されます。

デモ: パスワード入力フィールド

autocomplete="current-password"

autocomplete="new-password" / minlength="8"

補足: 表示/非表示トグルは React の useState で type を切り替えることで実装できます（サーバーコンポーネントでは非対応）

コード例

{/* ログインフォーム */}
<label htmlFor="current-password">パスワード</label>
<input
  id="current-password"
  type="password"
  autoComplete="current-password"
  required
/>

{/* パスワード変更フォーム */}
<label htmlFor="new-password">新しいパスワード</label>
<input
  id="new-password"
  type="password"
  autoComplete="new-password"
  minLength={8}
  required
/>

{/* 表示/非表示トグル (Client Component) */}
"use client";
const [show, setShow] = useState(false);
<input type={show ? "text" : "password"} />
<button type="button" onClick={() => setShow(!show)}>
  {show ? "隠す" : "表示"}
</button>

主要属性

inputMode

inputMode でモバイルキーボードの種類を制御できる（"text" / "numeric" など）

passwordrules (Apple 拡張)

<input
  type="password"
  autoComplete="new-password"
  // Apple Safari 向け拡張属性
  // 使用可能文字・長さのルールをブラウザに伝える
  data-passwordrules="minlength: 8; required: lower; required: upper; required: digit;"
/>

passwordrules は Apple Safari の独自拡張。パスワード候補生成のルールをブラウザに伝える

autocomplete 値の比較

autocomplete 値用途パスワードマネージャーの動作
current-passwordログイン時の現在パスワード保存済みパスワードを自動入力
new-password新規登録・変更時の新パスワード新パスワードを生成・保存提案
off自動入力を無効化多くのブラウザで無視される場合がある
（省略）ブラウザに判断を委ねる文脈に応じて動作（非推奨）

セキュリティ Tips

  • パスワードフィールドでのペースト禁止は絶対に行わない — ユーザーがパスワードマネージャーを使えなくなり、セキュリティが低下する
  • autocomplete="current-password" はログインフォームに、autocomplete="new-password" はパスワード変更・登録フォームに使う
  • minLength で最低文字数を設定し、強度の低いパスワードを防ぐ
  • 表示/非表示トグルは UX 向上に有効。React では useState で type 属性を"password" と "text" の間で切り替える
  • HTTPS 環境でのみパスワードフィールドを使用する（HTTP では通信が平文になる）

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<input type="password">` で `autocomplete="current-password"` と `autocomplete="new-password"` を使い分ける理由を教えてください。
- React でパスワードの表示/非表示を切り替えるコンポーネントを、アクセシビリティを考慮して実装する方法を教えてください。
- パスワードフィールドへのペースト禁止が「絶対に行ってはいけない」とされる理由を教えてください。
- `minLength` でパスワードの最低文字数を設定するだけでは不十分な理由と、パスワード強度チェックの実装方法を教えてください。
- `autocomplete="off"` をパスワードフィールドに設定した場合、モダンブラウザはどう動作しますか？

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo