点上面“东哥IT笔记”,关注并星标
每天一篇业界最新技术分享
假如你的网页需要用户注册/登录,那么一个好的注册/登录界面就非常重要了,尤其是在用户的网络状况不佳,或者使用移动设备,亦或是心情不太好的时候。一个不佳的界面可能会让用户再也不想访问你的页面。
下面就是一个简单的登录界面,它展示了所有的最佳实践需要关注的地方:
那么一个登录/注册界面有哪些地方需要注意的呢?我们一一道来:
使用有意义的HTML
使用下面这些HTML的tag来创建这个界面:
以及,这些浏览器内建的功能,可以极大的改进可访问性。使用
你可能会使用
使用
使用来label一个输入:
<label for="email">Emaillabel><input id="email"…>
这样做有两个原因:
当点击lable的时候,它会自动聚焦到他的输入。把label和输入关联是使用它的‘for’属性,可以设置成管理输入的name或者id。
屏幕阅读器会阅读这个文本
不要在input label中使用占位符,人们很容易忘了他们输入的是什么,究竟是email的地址,电话号码还是一个用户id。最好把你的label放在输入的上面,这样在移动设备以及桌面的体验就一致了。而且label和输入都可以得到所有的宽度,你不需要调整label和输入的宽度,如下图所示:
使用
对按钮来说,使用元素。因为它提供了很多特性和内置的表格提交功能,而且可以有很多不同的风格。我们没有理由选择别的
另外对提交按钮来说,确认它究竟是做什么,比如是创建account和登录,而不是提交或者开始等。
确保正确表格的提交
要协助密码管理理解一个提交的表格,有两种方法可以做这个:
跳转到一个不同的页面。
使用History.pushState()或者History.ReplaceState()来模拟跳转,当然同时移除密码表格
在使用XMLHttpRequest或者fetch请求之后,确保登录是成功的,就需要把这个登录界面从DOM中移除,这