【HTML】input type=”password” でパスワード入力欄を作る方法｜表示・非表示の切り替えも解説

ログインフォームや会員登録画面で、入力した文字が「●●●●」と黒丸で隠れる入力欄。あれは HTML の <input type="password"> で作ります。この記事では、パスワード入力欄の基本的な作り方から、入力ルールを指定する属性、ブラウザによる自動入力の制御、そして「表示・非表示を切り替えるボタン」の実装までを、実際に触れるデモを交えて解説します。

type=”password” で入力文字を隠す

<input> の type 属性に password を指定すると、入力した文字が伏せ字（多くは黒丸）で表示される入力欄になります。肩越しに画面をのぞかれても、パスワードが読み取られないようにするための仕組みです。基本の書き方は次の通りです。

<label for="password">パスワード</label>
<input type="password" id="password" name="password">

入力欄には必ず <label> を for 属性で結びつけておきましょう。ラベルをクリックすると入力欄にフォーカスが移り、スクリーンリーダーでも何の欄かが正しく読み上げられます。name 属性は、フォーム送信時にサーバーへ送られる値の名前になります。あくまで画面上で隠れているだけで、送信される値は入力したパスワードそのものである点は覚えておいてください。

入力ルールを属性で指定する

パスワード欄には、文字数や形式のルールを属性で加えられます。よく使うものをまとめました。

たとえば「8文字以上・英数字を含む」というルールを付けるなら、次のように書きます。

<input
  type="password"
  id="password"
  name="password"
  required
  minlength="8"
  pattern="(?=.*[A-Za-z])(?=.*\d).{8,}"
  placeholder="8文字以上の英数字"
>

ルールを満たさないまま送信しようとすると、ブラウザが自動でエラーメッセージを出して送信を止めてくれます。ただし、これはあくまで入力ミスを防ぐための補助です。本当のチェックはサーバー側でも必ず行うようにしてください。HTML の属性はブラウザの開発ツールなどで簡単に書き換えられるため、これだけに頼るのは危険です。

自動入力を制御する autocomplete

パスワード欄では autocomplete 属性で、ブラウザの自動入力やパスワード管理機能の動きを指定できます。ログイン用と新規登録用で適切な値が異なります。

新規登録の欄に autocomplete="new-password" を付けておくと、ブラウザが強力なパスワードの候補を提案してくれるようになり、使い回しを防ぐ手助けになります。

パスワードの表示・非表示を切り替える

入力ミスを防ぐため、「目のアイコン」などで一時的にパスワードを表示できるフォームが増えています。これは JavaScript で type 属性を password と text の間で切り替えることで実現できます。下のデモの「表示」ボタンを押すと、伏せ字が実際の文字に切り替わります。もう一度押すと元に戻ります。

<form class="login">
  <label for="pw">パスワード</label>
  <div class="pw-field">
    <input type="password" id="pw" value="secret123">
    <button type="button" id="toggle">表示</button>
  </div>
</form>

.login {
  font-family: sans-serif;
  padding: 20px;
}

.pw-field {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

#pw {
  flex: 1;
  padding: 8px;
  font-size: 16px;
}

#toggle {
  padding: 8px 14px;
  cursor: pointer;
}

const input = document.getElementById('pw');
const button = document.getElementById('toggle');

button.addEventListener('click', () => {
  // type を password ⇄ text で切り替えて表示・非表示を変える
  if (input.type === 'password') {
    input.type = 'text';
    button.textContent = '隠す';
  } else {
    input.type = 'password';
    button.textContent = '表示';
  }
});

ポイントは、切り替え用のボタンに type="button" を付けることです。フォーム内のボタンは初期状態だと submit 扱いになり、クリックするとフォームが送信されてしまいます。表示切り替えのように送信を伴わないボタンには、必ず type="button" を指定しておきましょう。

意図通りに動かないとき

label と結びついていない

ラベルをクリックしても入力欄にフォーカスが移らないときは、<label> の for と <input> の id が一致しているか確認してください。この2つの値が同じでないと、両者は結びつきません。id はページ内で重複しないようにする必要もあります。

表示切り替えでボタンが送信になってしまう

表示切り替えボタンを押すと画面が再読み込みされる場合は、ボタンが submit として動いています。前述の通り、フォーム内のボタンには type="button" を明示してください。これで送信を防ぎ、JavaScript の処理だけを実行できます。

まとめ

<input type="password"> は、入力した文字を伏せ字で表示するパスワード用の入力欄です。required や minlength・pattern で入力ルールを、autocomplete でブラウザの自動入力を制御できます。表示・非表示の切り替えは、JavaScript で type を password と text の間で入れ替えることで実現でき、切り替えボタンには type="button" を忘れずに付けます。画面上で隠れているだけで送信される値は生のパスワードなので、通信の暗号化（HTTPS）やサーバー側での検証と合わせて、安全なフォームを作りましょう。

参考ページ

• <input type=”password”> – HTML | MDN
• HTML の autocomplete 属性 – HTML | MDN