表单验证UX在HTML和CSS

讲解下占位符placeholder的用法,大家在做前端开发的时候有时候会用到form表单,这是最常用的提交到后台的数据,进行处理,但是为了非法输入一些不良的信息,我们不得不在前端表单里面进行验证,所以我们使用css进行验证。

使用lable标签看起来像一个placeholder占位符

首先我们使用:<label for="correct_input"> 这个元素,这一点是为用户体验的考虑。占位符是有效输入的建议,比如将“Tulsa”放在标有“City”的占位符放在input输入中即使placeholder。

我想说的是,如果表单很短,并且有明显的模式(比如注册或登录),您可以使用占位符可视模式,但是要使用实际的标签。

例如下面的这个表单HTML代码

您可以使用div作为定位上下文,并将标签直接放在表单上。

您不需要做任何复杂的光标操作,因为它已经在语义上连接好了。如果他们单击标签占用的区域,它将激活输入。如果他们点击输入,它将激活输入都正确。

标签隐藏在焦点上:

制作input必须填写 

您可以对表单进行的最简单的验证可能是使用required属性来要求字段。如果这样的话,没有比让浏览器来捕捉错误更快的方法了!

input有效的验证

让用户知道一个字段已经正确输入。浏览器可以通过:valid CSS selector:

显示关于类型验证的提醒

您还可以要求输入的值是某种类型的,比如emailnumber。下面是所有的例子。

完整的demo 如下图

html代码如下

scss代码如下

如果有不懂的地方请留言,SKY8G网站编辑者专注于研究IT源代码研究与开发。希望你下次光临,你的认可和留言是对我们最大的支持,谢谢!

上一篇: 如何在Ubuntu 16.04中安装Linux, Nginx, MySQL, PHP (LEMP stack)

下一篇: DIV标签中包含iframe标签不能触发click事件解决办法

登录 评论
avatar