使用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. [Baltic2004]数字序列
			
    原题请见<左偏树的特点及其应用>BY 广东省中山市第一中学 黄源河 题意 给出序列\(a[1...n]\),要求构造序列\(b[1...n]\)使得\(\sum_{i=1}^{n}|a_i ...
    
			
    2. 
						
  2. [SCOI2007]蜥蜴
			
    网络流 一个点拆成两个,注意要把某一类边连反过来 这样才能保证有限制 # include <bits/stdc++.h> # define IL inline # define RG re ...
    
			
    3. 
						
  3. UNDO及MVCC、崩溃恢复
			
    UNDO特性:避免脏读.事务回滚.非阻塞读.MVCC.崩溃恢复 事务工作流程(图2) MVCC原理机制 崩溃恢复:redo前滚.undo回滚 长事务.大事务:危害.判断.处理 UNDO优化:实现und ...
    
			
    4. 
						
  4. 宿主机无法访问linux虚机中的网站
			
    问题现象: Nginx服务已启动 80端口被nginx监听 宿主和linux虚机可相互ping通 Linux虚机可用curl访问网站 宿主无法用浏览器访问网站 排查: 1．  查看nginx的acce ...
    
			
    5. 
						
  5. JavaScript的基本操作（一）
			
    JavaScript中有大量的方法可供我们使用,详情可参考:http://jquery.cuishifeng.cn/这也同时导致我们不可能去记住每一个的用法,且开发者每天都在新添更多的方法,所以要想掌 ...
    
			
    6. 
						
  6. c#多线程同步之EventWaitHandle使用
			
    有这么一个场景,我需要借助windows剪贴板把数据插入到word域中. 实现步骤: 1.把剪贴板数据保存到变量. 2.使用剪贴板实现我们的业务. 3.把变量里的数据存回剪贴板. 但是结果却令人诧异, ...
    
			
    7. 
						
  7. JWT 在前后端分离中的应用与实践
			
    关于前后端分离 前后端分离是一个很有趣的议题,它不仅仅是指前后端工程师之间的相互独立的合作分工方式,更是前后端之间开发模式与交互模式的模块化.解耦化.计算机世界的经验告诉我们,对于复杂的事物,模块化总 ...
    
			
    8. 
						
  8. MySQL数据库索引简介
			
    一.索引的含义和特点     索引是一个单独的.存储在磁盘上的数据库结构,他们包含着对数据表里所有记录的引用指针.使用索引用于快速找出某个或多个列中有一特点值的行,所用MySQL列类型都可以被索引,对 ...
    
			
    9. 
						
  9. 鹅厂优文 | 决策树及ID3算法学习
			
    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~. 作者:袁明凯|腾讯IEG测试开发工程师 决策树的基础概念 决策树是一种用树形结构来辅助行为研究.决策分析以及机器学习的方式,是机器学习中的 ...
    
			
    10. 
						
  10. 总结的Javascript插件
			
    1.很好用的弹窗 https://limonte.github.io/sweetalert2/ https://github.com/limonte/sweetalert2 import './unt ...
    
			
    11.