使用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申明代码
HTML5 Form Validation
第四步：创建表单
创建一个基本的form表单元素，这里我们不提交任何数据只是一个演示，所以form不会进行提交。
第五步：创建表单元素
表单元素一共有如下元素组成：
- ul
- li
- label
- input
- span
ul和li元素用于排版布局，用于分割表单元素和布局。label用于表单的字段提示文字。input用于用户输入数据。span用于使用emoji提示用户字段是否填写正确。
form表单html代码完成代码如下：
第六步：增加样式
完成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代码完成代码如下：
第七步：增加EMOJI提示
在每个form表单结构中，我们已经增加了一个span标签，比如name字段中我们增加了一个标签。现在给他加上样式用于显示校验字段的状态。
li span { display: block; position: absolute; right: 0; top: 10px; font-size: 28px; } /*默认的是一个微笑的表情*/ li span::before { content: '
相关文章
css3媒体查询中device-width和width的区别详解
这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
CSS3媒体查询实现不同宽度的下不同内容的展示功能
这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例，需要的朋友可以参考下
CSS3几种实现子容器水平垂直居中的方法
本文有几种方法可以实现容器与子容器水平垂直居中，主要包括Flexbox布局，position绝对定位+transform，表格布局，具有一定的参考价值，感兴趣的可以了解一下
css3实现文字首尾衔接跑马灯的示例代码
这篇文章主要介绍了css3实现文字首尾衔接跑马灯的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
CSS的浮动及清除浮动的5种方法介绍
这篇文章主要为大家介绍了CSS的浮动及清除浮动的5种方法介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪