偶然にも素晴らしいドキュメントを見つけました、Create Amazing Password Forms、フォームを直感的に作成するには、いくつかのテクニックがあることに気づきましたので、以下に記録します。
関連するフィールドを 1 つのフォームにグループ化する#
私は以前、登録とログインを別々に行うことに慣れており、多くのウェブサイトも同様です。そのため、ブラウザのパスワード自動保存を使用する場合、登録後にログインする必要があるため、再度コードを入力する必要があります。ただし、具体的な実装方法はまだわかりません。
autocomplete 属性を使用する#
autocomplete 属性は初めて見ましたが、ドキュメントを調べた結果、非常に便利なものだとわかりました。Password Form Styles that Chromium Understands
例: <input name=bc autocomplete="section-home homeAddress">
<input type="text" autocomplete="username">
<input type="password" autocomplete="current-password">
<input type="submit" value="Sign In!">
autocomplete と autofill の違いについて
私は次のような回答を見つけました
- autocomplete は HTML5 で追加された属性で、ブラウザがフォームの自動入力機能を有効にするかどうか、およびフィールドに関する予想情報の種類を提供するためのガイドを指定するために使用されます。
- autofill はブラウザに組み込まれた自動入力機能で、ユーザーが以前に入力した値に基づいて次に入力する可能性のある値を予測し、ユーザーの入力時に自動的に入力します。autofill は以前に入力された値だけでなく、フィールドの意味や構造も考慮します。たとえば、Google Chrome は入力フィールドを解析してそのタイプと構造を推測します。
暗黙の情報には非表示フィールドを使用する#
これは私にとっても新しいことです。ユーザーが入力する必要のない情報でも、パスワードマネージャーに含まれる必要があることを知りました。
ドキュメントでは次のように説明されています
ユーザーエージェントはユーザーに自動補完値を提供することが許可されていますが、ユーザーが入力する可能性のあるデータの種類についての詳細な情報は提供しません。ユーザーエージェントは、提案する自動補完値を決定するためにヒューリスティックスを使用する必要があります。
現時点では、私の理解は、autocomplete はブラウザのフィールドのタイプを向上させるために使用され、autofill はその機能を使用するかどうかを制御するために使用されるということです。
終わりに#
HTML のドキュメントを初めて見ましたが、あまり読み進めることができませんでした。内容が非常に多く、情報量も多いですが、確かに役立ちます。