这是补充HTML5基础知识的系列内容，其他为：

 

　　在之前的笔记中记录了HTML5标签元素的语义以及新定义，本周开始进入Web表单部分的学习，该章节已经读过一遍，很多表单验证的工作都可以通过HTML5完成！现在整理笔记，再次进入Web表单的神奇地域。

 

　　因该书出版较早，很多东西已经更改，我会在文中进行更正。

 

　　一、表单验证

 

　　无论是什么站点，只要存在表单元素，基本就少不了表单验证。在HTML4中，表单验证一般交由JavaScript来完成，到了HTML5，提供了多种表单验证方式。一般最常用的便是required属性。有了该属性，如果表单元素为空，则不能进入提交。

 

　　二、HTML4输入类型

 

　　在HTML5时代，HTML4的表单元素依然发挥着最为重要的力量，我们用到的大多数表单还是HTML4时的元素。

 

　　三、HTML5新输入类型

 

　　1、建立联系人表单

 

　　联系人信息

 

　　邮箱：

 

　　电话：

 

　　网址：

 

　　上面我们使用了三个新的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相同，该输入域只会校验输入的格式，不会确认有无该网址。