パスワードタイプのinputタグでパスワード提案してくれる実装方法について

こんにちわ。nap5です。

パスワードタイプのinputタグでパスワード提案してくれる実装方法の一つを紹介したいと思います。

以下のリンクは学びが多いです。

https://web.dev/sign-in-form-best-practices/

Sign-in form best practices

Enabling Password AutoFill on an HTML input element | Apple Developer Documentation

How to turn off form autocompletion - Web security | MDN

サインアップフォームで見かけるあれですね。

Firefox

Firefoxで提案してくれているキャプチャ

Chrome

Chromeで提案してくれているキャプチャ

StackOverflowにもある通り、autocomplete="new-password"を設定すると、ブラウザが自動で提案してくれます。

autocomplete=new-password and making them confirm it via entering the password again

また、ブラウザのバージョンによってはうまくでない事例があるので、その時はブラウザのバージョンを確かめてみましょう。

Chrome/Firefox autocomplete=new-password not working

Material UIフレームワークを使ったデモは以下になります。

my-project

前回ログイン方式のログを引っ張ってくると実現できるUIもあります。

Password designs, themes, templates and downloadable graphic elements on Dribbble

簡単ですが、以上です。