开始使用HTML5和CSS3验证表单
使用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验证表单的更多相关文章
- HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- html5权威指南：表单元素
一.表单标签: 表单标签:http://blog.csdn.net/mylovestart/article/details/8589002 html5新增表单元素: 1.datalist:http:/ ...
- H5利用pattern属性和oninvalid属性验证表单
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- HTML5(字符标准，表单)
字符标准 <meta charset="utf-8"> 表单 1.HTML 表单用于搜集不同类型的用户输入. 实例——创建文本字段 <form action=&q ...
- Html5学习进阶四 表单元素和表单属性
HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...
- tp框架之自动验证表单
tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...
- jquery.validate 使用--验证表单隐藏域
jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- js验证表单大全
js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
随机推荐
- 【BZOJ1095】捉迷藏（动态点分治）
[BZOJ1095]捉迷藏(动态点分治) 题面 BZOJ 题解 动态点分治板子题 假设,不考虑动态点分治 我们来想怎么打暴力: \(O(n)DP\)求树的最长链 一定都会.不想解释了 所以,利用上面的 ...
- Zabbix JMX之tomcat监控
工作原理: 1.JAVA-GATEWAY Zabbix本身不支持直接监控Java,在zabbix 1.8以前,只能使用Zapcat来做代理监控,而且要修改源代码,非常麻烦.所有后来为了解决这个监控问 ...
- 8Manage：物流CRM，深度挖掘快递企业下一站蓝海！
[导读]网购的普及加快了快递物流服务在中国的发展,而物流行业也开始展露出自身巨大的发展潜力和进步空间.其中,作为物流行业根本核心的物流客户关系管理开始引起了管理者的注意,如何升级用户物流服务体验,把握 ...
- 解决linux安装软件：/lib/ld-linux.so.2: bad ELF interpreter问题
问题:64位系统中安装了32位程序解决办法 是因为64位系统中安装了32位程序 解决方法: yum install glibc.i686
- Win10+QT5.7.1搭建opencv开发环境
一.准备工作: 1下载Qt5.7.1软件qt-opensource-windows-x86-mingw530-5.7.1.exe(http://download.qt.io/official_rele ...
- Python之list列表方法详解
# 列表test = [11, 22, 33, 44, 55, 22]# append方法,在test列表末尾增加一个元素# append(self, p_object) 参数:p_object:待添 ...
- 属性动画 ValueAnimator 运行原理全解析
最近下班时间都用来健身还有看书了,博客被晾了一段时间了,原谅我~~~~ 提问环节 好,废话不多说,之前我们已经分析过 View 动画 Animation 运行原理解析,那么这次就来学习下属性动画的运行 ...
- 如何恢复（初始化）android studio所有设置
android studio是个大家伙,安装的时候经常出现一些问题,使用的时候也经常出现一些问题,如果,我是说如果,当你遇见一些问题不能解决的时候,可以试试重置android studio来解决问题, ...
- SDP（13）： Scala.Future - far from completion，绝不能用来做甩手掌柜
在前面几篇关于数据库引擎的讨论里很多的运算函数都返回了scala.Future类型的结果,因为我以为这样就可以很方便的实现了non-blocking效果.无论任何复杂的数据处理操作,只要把它们包在一个 ...
- Spring Security 源码解析（一）AbstractAuthenticationProcessingFilter
# 前言 最近在做 Spring OAuth2 登录,并在登录之后保存 Cookies.具体而言就是 Spring OAuth2 和 Spring Security 集成.Google一下竟然没有发现 ...