<input type="password"> 👉 パスワード入力欄を作成する

Webページにパスワードの入力欄を設置するときには<input type="text">ではなく<input type="password">を使いましょう。

type="password"を使うメリット

文字列が非表示になる

<form>
  <input type="password" value="pass1234">
  <button type="submit">送信</button>
</form>

<input type="password">に入力された文字列はなどの記号で隠されます。

パスワード管理ツールが検知できる

1Passwordなどのパスワード管理ツールや、ブラウザ・端末のパスワード管理システムが「どこがパスワード入力欄なのか」を検知し、自動補完できるようになります。

Webの開発において、セキュリティ的にも、ユーザー体験的にもパスワード入力欄での<input type="password">の使用は必須と言えます。

type="password"の属性

🙅 パスワードの桁数制限にmaxlengthを使わないように

maxlength属性は、入力できる最大文字数を指定するものです。「パスワードの最大文字数」を制限したいときにもtype="password"では使わないようにしましょう。

HTML 🙅ダメ!
<input type="password" maxlength="12">

なぜならmaxlengthによりパスワードが気づかないうちに切り取られてしまう可能性があるからです。一部のユーザーは、パスワードをコピペで入力します。例えば、15文字のパスワードをコピペしたとき、maxlength="12"となっていれば自動で12文字にされてしまうのです。
文字列は非表示なのでユーザーは切り取られたことに気づかないかもしれません。

混乱を避けるため、パスワード入力欄にmaxlengthを使わないようにしましょう。

文字数や使用可能文字列などのバリデーションは、基本的にJavaScriptで行いましょう。

よく使われる属性

  • name:フィールドの名前を指定。ほとんどのシーンで使われる。
  • required:フィールドを入力必須にする
  • placeholder:プレースホルダーを指定
  • pattern:使用可能な文字列を正規表現で指定
  • size:入力欄の幅を指定(デフォルトは20)
  • autofocus:ページ読み込み時にフォーカスをあてる

例えば、以下のような形で使います。

<input
  type="email"
  name="password"
  placeholder="パスワードを入力"
  pattern="[a-zA-Z0-9._%+-]{8, 15}"
  size="40"
  required
  >

ブラウザ対応状況

<input type="password">はすべての主要ブラウザで使用できます。


テキストフィールドの使い方はこちらのページでまとめています。