使用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. 【BZOJ1257】余数之和（数论分块，暴力）
			
    [BZOJ1257]余数之和(数论分块,暴力) 题解 Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + - + k mod n的 ...
    
			
    2. 
						
  2. 关系型数据库工作原理-SQL解析(翻译自Coding-Geek文章)
			
    本文翻译自Coding-Geek文章:< How does a relational database work>.原文链接:http://coding-geek.com/how-data ...
    
			
    3. 
						
  3. CentOS 6.4 配置 Hadoop 2.6.5
			
    (以下所有文件:点此链接 里面还有安装的视频教学,我这里是亲测了一次,如有报错请看红色部分.实践高于理论啊兄弟们!!) 一.安装CentOS 6.4 在VMWare虚拟机上,我设置的用户是hadoop ...
    
			
    4. 
						
  4. NancyFX 第八章 内容协商
			
    在Web框架的范畴内,一切都是基于REST的-- 从返回包含CSS.JavaScript的网页的路由路径,到那些返回JSON数据的URL. 无论你怎么看它,两者都是必须的.我们使用一组URL来呈现UR ...
    
			
    5. 
						
  5. HandsonTable日期控件的汉化
			
    由于项目的需要,想把HandsonTable自带的日期中英文替换成中文.其实这个不难,只要在库文件中替换下就可以了,替换的效果对比如下:         如果有需要的同学,可以在此处下载 By QJL
    
			
    6. 
						
  6. 特定场景下Ajax技术的使用
			
    ajax介绍 jax技术包含了几种技术:javascript.xml.css.xstl.dom.xhtml和XMLHttpRequest七种技术,所以ajax就像是粘合剂把七种技术整合到一起,从而发挥 ...
    
			
    7. 
						
  7. MSSQL存储过程--CAST和CONVERT使用区别
			
    数据类型显示转换:CAST和CONVERT(CAST 函数基于 SQL-92 标准并且优先于 CONVERT) ①: CAST是时间类型和字符串之间的转换,使用:CAST(expression AS  ...
    
			
    8. 
						
  8. 如何配置VS使得可以通过域名或IP访问
			
    一.前言: 在平时使用Visio Studio进行网站开发,经常会遇到一个问题.既要可以使用VS的Debug一步步跟进项目的走向,又必须是外界可以访问的.这个问题会在微信开发中非常常见,就拿微信开发中 ...
    
			
    9. 
						
  9. oracle 10g数据库下的 XDB组件的重新安装
			
    emmmm,这是一个不做死就不会的过程!!! 今天在导出数据库时,遇到了报错信息,其实开发说这个报错没关系了,但作死如楼主,一定要把这个错给解决了,然后就有了下面的作死过程. 错误关键字是:packa ...
    
			
    10. 
						
  10. 通向架构师的道路之 Tomcat 性能调优
			
    一.总结前一天的学习 从"第三天"的性能测试一节中,我们得知了决定性能测试的几个重要指标,它们是: 吞吐量 Responsetime Cpuload MemoryUsage 我们也 ...
    
			
    11.