使用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. 【POJ3683】Priest John's Busiest Day
			
    题目 John is the only priest in his town. September 1st is the John's busiest day in a year because th ...
    
			
    2. 
						
  2. VS中Ctrl+F5（开始执行不调试）一闪而过问题
			
    昨天学弟学妹在使用VS2015时,遇到了Ctrl+F5运行完毕程序窗口不能停留的问题,感觉比较奇怪.后来了解到他们建立C++解决方案时,直接选中的是空项目,而这样就会导致这样的现象. 想要达到运行完毕 ...
    
			
    3. 
						
  3. NancyFX 第七章 模型绑定和验证
			
    任何优秀的框架,都能传递参数.在之前的路由章节,我们已经看到了如何在URL中传递参数. 能够传递简单的参数当然好,特别是在设计那些从数据库读取记录的API设计中.但是,很多情况下也是需要传递复杂对象. ...
    
			
    4. 
						
  4. STM32F10x的启动汇编分析
			
    ;******************** (C) COPYRIGHT 2009 STMicroelectronics ********************;* File Name         ...
    
			
    5. 
						
  5. Android消息机制解析
			
    我们知道在编程时许多操作(如更新UI)需要在主线程中完成,而且,耗时操作(如网络连接)需要放在子线程中,否则会引起ANR.所以我们常使用Handler来实现线程间的消息传递,这里讨论的也就是Handl ...
    
			
    6. 
						
  6. 使用vlookup嵌套INDIRECT函数实现跨表数据引用
			
    这是一个使用 vlookup 函数嵌套 INDIRECT 函数来实现跨工作表数据引用的教程. 某小学决定要抽查本校三年级三个班的期末考情况,抽查方法为在每个班中抽查5名学生,将这15名学生的期末考情况 ...
    
			
    7. 
						
  7. delphi 数组复制利用CopyMemory 最为完美
			
    在各网站的文章里面,见复制数据的方法中,有move的,有system.copy的,而要实际应用中,这两种方法,并不是很完美,会遇到一些问题,比如copy在记录里面的复制时,编译都过不去,而CopyMe ...
    
			
    8. 
						
  8. NGINX详解
			
    目录 1.    基础概念    1 2.    版本选择    1 3.    服务安装    1 4.    模块说明    1 5.    配置说明    1 5.1    目录结构    1  ...
    
			
    9. 
						
  9. u-boot的SPL源码流程分析
			
    上次梳理了一下SPL的基本概念和代码总体思路,这次就针对代码跑的流程做个梳理.SPL中,入口在u-boot-spl.lds中 ENTRY(_start) SECTIONS { .text : { __ ...
    
			
    10. 
						
  10. spring cloud 专题二（spring cloud 入门搭建 之 微服务搭建和注册）
			
    一.前言 本文为spring cloud 微服务框架专题的第二篇,主要讲解如何快速搭建微服务以及如何注册. 本文理论不多,主要是傻瓜式的环境搭建,适合新手快速入门. 为了更好的懂得原理,大家可以下载& ...
    
			
    11.