android简单的登录界面代码_登录界面的最佳实践

点上面“东哥IT笔记”，关注并星标

每天一篇业界最新技术分享

---

假如你的网页需要用户注册/登录，那么一个好的注册/登录界面就非常重要了，尤其是在用户的网络状况不佳，或者使用移动设备，亦或是心情不太好的时候。一个不佳的界面可能会让用户再也不想访问你的页面。

下面就是一个简单的登录界面，它展示了所有的最佳实践需要关注的地方：

那么一个登录/注册界面有哪些地方需要注意的呢？我们一一道来：

使用有意义的HTML

使用下面这些HTML的tag来创建这个界面：

以及，这些浏览器内建的功能，可以极大的改进可访问性。

使用

你可能会使用

，然后在里面使用javascript来控制input的提交。其实最好还是使用原来的元素。这样你的网站对屏幕阅读器或者别的辅助装备就更加友好，而且对旧的浏览器兼容也会好很多，设置在js失败的情况下也能够使用。

使用

使用来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中移除，这样