偶然间看到了篇不错的文档,Create Amazing Password Forms,才发现原来表单要做得符合直觉也是有些学问在里面的,遂记录如下。
Group related fields in a single form
我之前习惯把注册和登录分开来做,使用的不少网站也是这样。
但这会产生这样一种情况:即使开启了浏览器的密码自动保存,往往注册完后的第一次登录,还得再输一遍代码。
我还不知道具体要怎么设计才能使其更合理。
Use autocomplete attributes
autocomplete
这个属性我还是第一次见,查阅文档后,发现是HTML5新增的属性。具体参见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
用于指定浏览器是否应该启用表单自动完成功能,以及提供有关字段中预期信息类型的指导。autofill
是浏览器自带的自动填充功能,它会根据用户之前输入过的值来预测用户下一次可能输入的值,并在用户输入时自动填充。autofill
不仅考虑了之前输入过的值,还考虑了字段的含义和结构。例如,Google Chrome实现了解析输入字段以猜测其类型和结构。
目前我的理解是:autocomplete
用来提示浏览器字段的类型,而autofill
用来控制是否使用该功能。
Use hidden fields for implicit information
这点对于我来说也是挺新鲜的。才知道尽管有些信息没必要让用户输入,但还是有必要在表单中所包含,以便于密码管理器。
文档中是这样讲的:
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.
尾巴
还是第一次看html的文档,不是太能看得下去,因为内容太多了,信息量比较大,但确实有用