I accidentally came across a good document, Create Amazing Password Forms, and realized that there is some knowledge involved in making forms intuitive, so I recorded it below.
Group related fields in a single form#
I used to separate registration and login, and many websites also do the same. This often leads to a situation where after registering, when using the browser's password autofill, you often have to enter the code again to log in. But I don't know how to implement it specifically.
Use autocomplete attributes#
This is the first time I've seen the autocomplete attribute. After consulting the documentation, I found it quite useful. Password Form Styles that Chromium Understands
e.g. <input name=bc autocomplete="section-home homeAddress">
<input type="text" autocomplete="username">
<input type="password" autocomplete="current-password">
<input type="submit" value="Sign In!">
Regarding the difference between autocomplete and autofill
I found this answer
- autocomplete is a new attribute introduced in HTML5, used to specify whether the browser should enable form autofill functionality and provide guidance on the expected information types in the fields.
- autofill is a built-in browser autofill feature that predicts the values the user is likely to enter based on previously entered values and automatically fills them in as the user types. Autofill considers not only previously entered values but also the meaning and structure of the fields. For example, Google Chrome analyzes input fields to guess their type and structure.
Use hidden fields for implicit information#
This is quite new to me. I just learned that even though some information is not necessary for the user to input, it is still necessary to include it in the form for password managers.
The document explains it like this
the user agent is allowed to provide the user with autocompletion values, but does not provide any further information about what kind of data the user might be expected to enter. User agents would have to use heuristics to decide what autocompletion values to suggest.
Currently, my understanding is that autocomplete is used to enhance the browser's understanding of field types, while autofill is used to control whether to use that functionality.
Conclusion#
This is the first time I've read an HTML document, and I can't really read it through because there is so much content and a lot of information, but it is indeed useful.