【Chrome web.dev Live 2020总结】第3天第12集：登录最佳实践

先问问自己，用户真的需要登录才能使用你的系统吗

用户其实并不希望被强制上传自己的个人信息，而且上传后的个人信息，会变成你的系统责任和负担。

The best sing-in form is no sing-in form，这位爷如是说。

好的HTML结构

好的html结构是一个好的登录体验的基础。

用<form>、<section>、<label>、<button>这些基础的标签就可以完成我们的功能。

也许会有人将input放在复杂的<div>中进行数据提交，不要这么做！！永远优先使用<form>表单，这对于不同设配和网络状态下的兼容性很重要。而且，即使js运行失效，表单依然可以正常上传，可以保证功能的正常运行。

 label

使用label有两个主要原因

label 有 for 属性，和input的id相同的时候可以将二者进行绑定，这样点击label的时候会自动聚焦到绑定好的input上，使用很方便；

对于无障碍访问来说也很重要，因为点击label的时候可以自动发声，残障人士也可以顺利的访问我们的页面

placeholder

placeholder可以使用，但是不能替代label的作用，因为用户一旦开始输入，就无法看到placeholder的内容了，很容易就会忘记输入框的内容应该是什么

如何摆放

根据谷歌AI的统计，将label放在输入框的上面会加快浏览者的浏览速度

而且也可以保证输入框长度的一致和完整性

重复输入

有些网站会要求用户重复输入邮箱、电话、密码等信息，确实可以减少部分用户出错的几率，但是会增加所有用户的工作，并且会增加用户放弃注册的概率。

允许用户验证邮箱并提供简单的密码重置方式就好了。

button

理由

button 提供了极其便捷的表单提交方式，并且样式也很容易修改，完全没有任何使用其他标签假冒button的理由哇！

命名

使用用户可以理解的命名，比如sign in 或者 create account，不要用go submit等，会给人造成很大的困扰

防抖

表单提交肯定不能连续提交多次，然而很多用户都会习惯性的连续点击多次按钮，这个时候一定要做好按钮的防抖处理，避免表单的重复提交

合理提示

用户有部分内容没有填写好的时候，不要对按钮不响应而已，要给出合理的错误提示，告知用户还要做什么。

而且，大部分判断无需js处理，html自带了很多输入框的属性，使用就好了：

image.png

 合理的布局

我们都知道，默认的html标签样式很丑，在移动端显示的也很小，一定要将表单调整到用户在pc和手机端都能够正常使用的程度。

attributes

有一些属性是我们需要特别注意使用的：

autofocus

type=‘password’|‘email’|‘tel’

inputmode=‘numeric’

合理的name（比如登录和注册表单的password输入框name就不能相同）

required

aria-describedby

注意键盘不要遮挡按钮

解决防范有很多，比如说修改布局，或者像亚马逊、eBay一样，每页只有一个输入框：

 增加用户行为的分析

埋点信息上报可以有效分析用户的行为，比如何时放弃登录，何时点击登录等等。

总结：

总之，老哥今天的重点在于用户体验至上，我们一定要把页面性能、合理布局、使用便捷程度、无障碍访问、减少用户操作、减少可能引起疑惑的点、重置和用户隐私等入口放置在显眼的位置等细节问题抠好。