偶然にも素晴らしいドキュメントを見つけました、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 のドキュメントを見るのは初めてですが、内容が多く、情報量が多いため、あまり読み進めることができませんが、確かに役立つものです。