input要素の autocomplete属性

autocomplete 属性使ってますか?

  • ブラウザによってまちまち
  • 設定によってもいろいろ

パスワード入力欄のautocomplete

パスワード入力欄のautocomplete属性には
どんな値が入るとよいでしょうか!

<input type="password" autocomplete="????">
  • new-password
  • current-password

new-password

新たなパスワード(例:アカウントを作成するとき/パスワードを変更するとき)

安全なパスワードを候補として表示する1PasswordのUI

current-password

username 欄で識別されるアカウント用の現在のパスワード(例: ログインするとき)

記憶しているパスワードの候補を表示する1PasswordのUI

パスワードマネージャをサポートできる

  • ブラウザのパスワードマネージャー
  • 1Passwordなどのアプリ

autocomplete で住所などの入力補助

ブラウザや設定によっていろいろ。

Chrome(Mac)の場合

Chromeの入力補完用情報(住所)の設定画面

Safari(Mac)の場合

Safariの入力補完用情報(住所)の設定画面

Firefoxの場合

Firefoxのアドレス自動補完についてのサポートページ。現在はUS版のみ住所の入力補完をサポートしていると書かれている

まとめ

autocompleteはまだ情報が少ないし
ブラウザの対応状況もいろいろで使いにくいけど、
new-passwordcurrent-passwordはおすすめ!

参考ウェブページ

参考図書