I accidentally came across a good document, Create Amazing Password Forms, and realized that there is some knowledge behind making forms intuitive, so I recorded it below.
Group related fields in a single form#
Previously, I used to separate registration and login, and many websites also do the same. This often leads to a situation where, when using the browser's password autofill feature, after registering, you have to enter the code again to log in. But I still 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!">
And the difference between autocomplete and autofill
I found this answer
- autocomplete is a new attribute added in HTML5, used to specify whether the browser should enable form autofill functionality and provide guidance on the expected information type in the field.
- autofill is a built-in browser autofill feature that predicts the values the user might enter based on their previous inputs 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 types and structures.
Use hidden fields for implicit information#
This point 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 this feature is used.
Conclusion#
This is the first time I've read an HTML document, and I can't really read it through because there is too much content and a lot of information, but it is indeed useful.