这是补充HTML5基础知识的第五篇内容，其他为：
在之前的笔记中记录了HTML5标签元素的语义以及新定义，本周开始进入Web表单部分的学习，该章节已经读过一遍，很多表单验证的工作都可以通过HTML5完成！现在整理笔记，再次进入Web表单的神奇地域。
因该书出版较早，很多东西已经更改，我会在文中已经更正。
一、表单验证无论是什么站点，只要存在表单元素，基本就少不了表单验证。在HTML4中，表单验证一般交由JavaScript来完成，到了HTML5，提供了多种表单验证方式。一般最常用的便是required属性。有了该属性，如果表单元素为空，则不能进入提交。
二、HTML4输入类型在HTML5时代，HTML4的表单元素依然发挥着最为重要的力量，我们用到的大多数表单还是HTML4时的元素。
联系人信息邮箱：电话：网址：
上面我们使用了三个新的input类型收集用户信息，分别是email、tel和url。分别表示邮件、电话和网址。
浏览器默认不对上述表单进行验证，必须加上required参数。
1、input type="email"告诉浏览器，该输入域的内容为邮件格式。因各个浏览器的验证方式不同，给出的提示也不尽相同，比如上述相同的表单，在chrom v55上以及firefox上的提示分别如下：
email类型表单只会验证邮件格式是否为aa@bb的格式，并不会判断该邮件地址是否存在。
这样方便测试没有对表单设置样式，后面会有专门介绍。
2、input type="tel"tel类型是一个普通的文本输入域，尽管现实中电话多为数字，但tel输入域能够接受任意字符（电话号码有时也包含非数字字符，比如+）。
3、input type="url"在博客评论中常常看到输入网址的表单。在HTML5中，提交网址使用url类型表单更优雅。
与email相同，该输入域只会校验输入的格式，不会确认有无该网址。
多数情况下，URL的形式类似于，但也有baidu.com的形式存在，此外，还有其他多种形式：
由于这些URL的存在，现在表单会将aa:bb形式的输入视为URL，验证通过。大多数浏览器都有自己的URL形式，Firefox有about:config地址。所以，任何带有:的URL都可通过验证。
2、搜索表单搜索
上述中，type="search"并没有特殊作用，其依然是一个普通的文本输入域。仅仅帮浏览器理解，这是搜索输入域。
3、日期、时间选择传统web表单中，大多通过jquery插件来完成日期选择功能，在HTML5中，提供了一系列的日期时间表单，可以满足大多数的场景需求。
HTML5提供了如下type类型：
chrome支持datetime-local，不支持datatime。
综合示例：
See the Pen html5-form by 绿岛之北 (@Gavin-YYC) on CodePen.
4、数字选择器数字选择器数字选择器
number输入类型只接受数字，否则将返回验证错误。
属性：min、max、 step，指定数字范围和步长。
range一般用在表单的“评价部分”，或者是控制视频的音量等。
滑块滑块
和number相同，其也有min、max、step三个属性。
使用output显示值我们上述的滑块很好用，但有一个缺点，就是没有显示我们当前选中的值。我们可以通过output来显示，该功能只需要一点点的JavaScript。
滑块滑块
现在，拖动上面的滚动条就可以显示当前的数值了。
备注：在之前大多是通过onforminput事件来完成，现在新版本的浏览器都支持form的oninput属性，替代了原来的onforminput。
上述可参考：Is onforminput Deprecated in HTML5 Forms? (And Why Should I Care Anyways?)
6、颜色选择器颜色选择器选择颜色
7、占位文字：placeholder前面介绍了一些新的输入类型，实际上，还有一些新属性用来配合新输入类型来提高质量，而这些新属性已经广为使用。
在之前，这种效果只能通过JavaScript来实现。
默认的占位符为灰色与背景色没有足够的对比度，可以使用CSS来解决这个问题：
inputinput
8、基本验证：required我们在上面已经多次使用了required属性，提供该属性，如果表单为空则不会提交表单，并提示相应信息。
除了required属性外，你还可以使用aria-required="true"，这样将提高表单元素的可用性。
总结上述体验了HTML5新的表单元素，在实际项目中，使用到这些地方很少，有时候会用到但也想不起来这些元素。所以，今天就完完全全的体验一次，后续项目中就可以完全使用这些新（其实也不新了。。）元素。
相关文章
精彩导读
热门资讯
关注我们
