使用HTML5和CSS3验证表单

客户端验证是网页客户端程序最常用的功能之一，我们之前使用了各种各样的js库来进行表单的验证。HTML5其实早已为我们提供了表单验证的功能。至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧。

下面我们将来一步一步创造一个HTML5和CSS3的表单验证，只使用HTML和CSS。

完成后的如下：

第一步：整理验证字段和类型

首先我们需要如下几个字段：

  • 姓名(full name)
  • 电话号码(phone number)
  • 邮箱地址(email address)
  • 网址(website)

在用户输入一些信息后，我们需要校验用户的信息是否正确，避免错误数据和欺骗性的数据传递到服务器。

在HTML5的新规范中，input输入框提供了多种输入类型比如：tel、email、number、range、color等，这些类型在桌面客户端中一般体现不是很明显，如果在移动端键盘上面体现的会更明显。比如number在移动端键盘会自动切换为纯数字，email键盘会自动切换带有@的键盘。

第二步：确定表单样式

我们还需要确定表单最终的样式风格，一般这个工作来至于设计师。这里我在dribbble上面找了一个表单的样式作为这次的demo风格。

第三步：模板代码

使用标准的HTML5申明代码

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>HTML5 Form Validation</title>

</head>

<body>

</body>

</html>

第四步：创建表单

创建一个基本的form表单元素，这里我们不提交任何数据只是一个演示，所以form不会进行提交。

<form action="" onsubmit="return false">

</form>

第五步：创建表单元素

表单元素一共有如下元素组成：

  • ul
  • li
  • label
  • input
  • span

ul和li元素用于排版布局，用于分割表单元素和布局。label用于表单的字段提示文字。input用于用户输入数据。span用于使用emoji提示用户字段是否填写正确。

<ul>

	<li>

	  <label for="name">FULL NAME</label>

	  <input type="text" id="name" name="

	name" placeholder="请输入姓名"/>

	  <span class="icon-name"></span>

	</li>

</ul>

form表单html代码完成代码如下：

See the Pen html5 validation pure form by jiangzhu (@tudou) on CodePen.

第六步：增加样式

完成form元素的编写，紧着着完善一下它的样式，让它看起来更美一些。

body {

  display: flex;

}

form {

  padding: 0 10%;

  width: 100%;

  margin: auto;

}

ul {

  list-style-type: none;

  padding: 0;

  margin: 0;

}

li {

  position: relative;

  margin-bottom: 20px;

}

label {

  color: #333;

  display: block;

  font-size: 12px;

}

input {

  width: 100%;

  outline: none;

  border: none;

  padding: 0.5em 0;

  font-size: 14px;

  color: black;

  position: relative;

  border-bottom: 1px solid #d4d4d4;

}

input:-moz-placeholder {

  color: #d4d4d4;

}

input::-webkit-input-placeholder {

  color: #d4d4d4;

}

li span {

  display: block;

  position: absolute;

  right: 0;

  top: 10px;

  font-size: 28px;

}

button {

  cursor: pointer;

  border: 1px solid #999;

  border-radius: 4px;

  padding: 10px 20px;

  margin-top: 10px;

  background: #fff;

}

css代码完成代码如下：

See the Pen html5 validation pure form base style by jiangzhu (@tudou) on CodePen.

第七步：增加EMOJI提示

在每个form表单结构中，我们已经增加了一个span标签，比如name字段中我们增加了一个<span class="icon-name"></span>标签。现在给他加上样式用于显示校验字段的状态。

li span {

  display: block;

  position: absolute;

  right: 0;

  top: 10px;

  font-size: 28px;

}

/*默认的是一个微笑的表情*/

li span::before {

  content: '												


											
开始使用HTML5和CSS3验证表单的更多相关文章
	

    
								
  1. HTML5 学习总结（二）——HTML5新增属性与表单元素
		
    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
    
		
    2. 
						
  2. html5权威指南：表单元素
		
    一.表单标签: 表单标签:http://blog.csdn.net/mylovestart/article/details/8589002 html5新增表单元素: 1.datalist:http:/ ...
    
		
    3. 
						
  3. H5利用pattern属性和oninvalid属性验证表单
		
    HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
    
		
    4. 
						
  4. HTML5(字符标准，表单)
		
    字符标准 <meta charset="utf-8"> 表单 1.HTML 表单用于搜集不同类型的用户输入. 实例——创建文本字段 <form action=&q ...
    
		
    5. 
						
  5. Html5学习进阶四 表单元素和表单属性
		
    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...
    
		
    6. 
						
  6. tp框架之自动验证表单
		
    tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...
    
		
    7. 
						
  7. jquery.validate 使用--验证表单隐藏域
		
    jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...
    
		
    8. 
						
  8. ajax验证表单元素规范正确与否   ajax展示加载数据库数据    ajax三级联动
		
    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
    
		
    9. 
						
  9. js验证表单大全
		
    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [APIO2015]八邻旁之桥
			
    题面在这里 sol 这是一个\(Splay\)的题解 首先,如果一个人的家和办公室在同一侧,我们可以直接预处理; 如果不在同一侧,也可以加上1(当然要过桥啦) 当k==1时 我们设桥的位置为\(pos ...
    
			
    2. 
						
  2. 【xsy2115】Delight for a Cat
			
    Time Limit: 1000 ms Memory Limit: 512 MB Description ​ 从前,有一只懒猫叫CJB.每个小时,这只猫要么在睡觉,要么在吃东西,但不能一边睡觉一边吃东 ...
    
			
    3. 
						
  3. linux下debug工具
			
    在linux下开发难免会遇到bug,但是由于没有图形IDE,导致debug也变得困难,其实只要掌握一些常用的debug工具,一些错误就能很快解决,本文就介绍一些常用的工具用以调试: log 输出log ...
    
			
    4. 
						
  4. Nancy启用跨站攻击防护（CSRF）
			
    什么是CSRF(跨站攻击) 可能很多人已经对CSRF有所了解,就简单的介绍下: CSRF全程是 Cross-Site Request Forgery .大概意思就是在登录用户不知情的情况下,由一个网站 ...
    
			
    5. 
						
  5. C# Redis实战(四)
			
    四.写入数据 在C# Redis实战(三)中我们已经配置好了web.config程序,并且能通过C#代码来读取和管理以上配置信息. 接下来,就可以进行Redis的数据写入了.Redis中可以用Stor ...
    
			
    6. 
						
  6. Vue2.0 demo：百度百聘第三方web客户端
			
    github地址:https://github.com/axel10/baipin_vue 项目地址:https://vcollection.org/baipin/ 官方的百度百聘客户端存在翻页时过滤 ...
    
			
    7. 
						
  7. Liveness 探测 - 每天5分钟玩转 Docker 容器技术（143）
			
    Liveness 探测让用户可以自定义判断容器是否健康的条件.如果探测失败,Kubernetes 就会重启容器. 还是举例说明,创建如下 Pod: 启动进程首先创建文件 /tmp/healthy,30 ...
    
			
    8. 
						
  8. 【Unity3D与23种设计模式】建造者模式（Builder）
			
    GoF中定义: "将一个复杂的构建流程与它的对象表现分离出来,让相同的构建流程可以产生不同的对象行为表现." 建造者模式可以分为两个步骤来实施: 1.将复杂的构建流程独立出来,并将 ...
    
			
    9. 
						
  9. 解决ssm项目表单数据提交到数据库乱码问题
			
    问题:在ssm整合的项目里,从前台页面获取表单数据存到数据库中乱码 先说解决办法然后分析:问题出在form表单的提交方式上,我的web.xml配置过滤器都已经指定了编码集,为什么没有生效?原因是,对于 ...
    
			
    10. 
						
  10. Sql Server 索引以及页和区
			
    索引(Index),相信大家都知道就是给表中的数据添加了一个目录,使我们可以快速检索到我们想要的数据,但这个目录是什么?SqlServer又是如何管理的?要搞明白这些,我们就要先了解sqlserver ...
    
			
    11.