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

catnose · 2020/02/02 に最終更新

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

このページの目次

type="password"を使うメリット
- 文字列が非表示になる
- パスワード管理ツールが検知できる
type="password"の属性
- 🙅 パスワードの桁数制限にmaxlengthを使わないように
- よく使われる属性
ブラウザ対応状況

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">はすべての主要ブラウザで使用できます。

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