使用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. [SPOJ]DISUBSTR：Distinct Substrings&[SPOJ]SUBST1：New Distinct Substrings
			
    题面 Vjudge Vjudge Sol 求一个串不同子串的个数 每个子串一定是某个后缀的前缀,也就是求所有后缀不同前缀的个数 每来一个后缀\(suf(i)\)就会有,\(len-sa[i]+1\)的 ...
    
			
    2. 
						
  2. [USACO12FEB]Nearby Cows
			
    题意 给出一棵n个点的无根树,每个点有权值,问每个点向外不重复经过k条边的点权和 题解 设f[i][j]表示所有离i节点距离为j的点权和,v为它周围相邻的点,t为v的个数,则 j > 2 f[i ...
    
			
    3. 
						
  3. Nginx负载均衡——基础功能
			
    熟悉Nginx的小伙伴都知道,Nginx是一个非常好的负载均衡器.除了用的非常普遍的Http负载均衡,Nginx还可以实现Email,FastCGI的负载均衡,甚至可以支持基于Tcp/UDP协议的各种 ...
    
			
    4. 
						
  4. 软件测试必备-前端知识点之css基础及ps的用法
			
    CSS 一. css定义 css样式表.层叠样式表,级联样式表 二. css基础语法 1. 写style标签,放在head标签里面的最后位置 2. 自己写的css代码,放在style标签里面 三. c ...
    
			
    5. 
						
  5. Android视频直播：流媒体服务器搭建
			
    一.前言 实时视频直播是这两年非常火的技术形态,已经渗透到教育.在线互娱等各种业务场景中.但要搭建一套实时视频直播系统,并非易事,下面针对直播系统的的搭建做一下说明: 1.1 通常的直播系统的技术模型 ...
    
			
    6. 
						
  6. NancyFX 第五章 Nancy 路由
			
    在Nancy中,最为神奇的莫过于路由了,定义路由模块是构成Nancy应用的骨架.在Nancy中定义路由,和在 ASP.NET MVC那些类似的框架中有着非常大的区别. 以 ASP.NET MVC 为例 ...
    
			
    7. 
						
  7. OpenStack Paste.ini详解(一)
			
    问题背景 最近在研究openstack 服务的源代码,由于项目代码较多对其又不熟悉,刚开始就不知道从哪里开始入手分析.经过分析发现,在正式分析源码之前需要对python的wsgi.paste.rout ...
    
			
    8. 
						
  8. Cucumber 相关资源
			
    Cucumber support: https://cucumber.io/support yan1234abcd的专栏:http://blog.csdn.net/yan1234abcd/articl ...
    
			
    9. 
						
  9. [C#]基于命名管道的一对多进程间通讯
			
    在工作中碰到了一个进程间通讯的问题,大概是这样的: 项目本身是.net Core做的,但是有部分功能Core中不方便实现,有的是依赖Framework,有的是因为权限和安全问题. 那基于这个问题,问了 ...
    
			
    10. 
						
  10. 第八届蓝桥杯B组java第四题
			
    标题:取数位 求1个整数的第k位数字有很多种方法.以下的方法就是一种.对于题目中的测试数据,应该打印5.请仔细分析源码,并补充划线部分所缺少的代码.注意:只提交缺失的代码,不要填写任何已有内容或说明性 ...
    
			
    11.