url 类型 和 email 类型在提交表单时，都会自动验证输入的值是否有效，但是这个自动验证有点让人无法直视，但是这也是一种进步，最起码是有了，相对来说也很友好了。当然对于用户来说，也不可能无聊的像我一样，大多都是直接复制粘贴的，或者输入正确的，但世界上没有绝对的事，凡事都是相对的，也不排除有人在输入时出现错误，还没有及时发现然后还提交了，对于提交了一个带有中文的邮箱，你要上哪找去，反正目前我是不知道哪个网站支持中文邮箱地址，那画面太美，虽然中国互联网络信息中心发布了中文域名邮箱注册平台，可以注册中文邮箱地址，但是中文的并不适合做网站的东西。所以为了避免无效的信息，需要进一步的对用户输入进行验证。

　　虽然做这些低趣味的测试相当无聊，但是对于一个前端工程师来说，也是很有意义的，尤其是对一些新增加的东西，新的技术，就需要在多个主流浏览器进行测试，以确保兼容性，并且要了解各个浏览器之间的差异，这对于前端来说是相当有价值的，前端直接呈现给用户交互式的体验，直接关系到网站的易用性，以及可操作性，也可以说关系到网站的流量，一个优秀甚至是卓越的网站，除了优美的设计、友好的界面显示之外，还必须有美好的体验，对于用户来说，体验才是王道，当然这也是建立在能为用户提供具有价值的内容的前提下，外表再华丽的东西，没有价值，也是没有意义的，人们最多会被吸引，并不会驻足。前端所涉及到的知识面非常广，所以前端也是个细腻活，每一步的迈出都是大量知识积累的结晶。

　　(5)、input 类型：tel

　　tel 类型定义输入电话号码字段。如下：

电话号码:

　　注意：目前浏览器都不支持该类型。

　　(6)、input 类型：number

　　number 类型用于应该包含数值的输入域，输入数字的字段，支持设定对所接受的数字的限定。

　　下面的例子，定义一个数值输入域，并对输入进行限定：

数量 ( 1 到 10 之间):

　　可以使用下面的属性来规定对数字类型的限定：

　　　　①、value - 规定默认值。

　　　　②、min - 规定允许的最小值。

　　　　③、max- 规定允许的最大值。

　　　　④、step - 规定合法的数字间隔，比如 step="3"，则合法的数是 -3、0、3、6 等。

 　　注意：所有浏览器都支持该类型。但是也存在差异，Chrome 和 Firefox 都提供了滚动机制可以选择合法值，但 Chrome 只有在获得焦点时才显示滚动条，失去焦点则隐藏，而 Firefox 始终都是显示的，IE 不提供滚动机制。可以自行输入，如果输入值不合法，在失去焦点时， Firefox 输入框会改变样式，显示为浅红色，其他则为默认颜色。点击提交，Chrome 提示：值必须小于或等于 10， Firefox 提示：请 选择 一个不大于10的值，IE 提示：你必须输入一个介于 1 到 10 之间的值。

　　(7)、input 类型：range

　　range 类型用于应该包含一定范围内数字值的输入域，用于精确值不重要的输入数字的控件，该类型显示为滑动条。

　　下面的例子，定义一个不需要非常精确的数值，类似于滑块控制：

选择一个值：

 　　该类型也可以使用这几个属性来规定对数字类型的限定：value、min 、max 、step。

　　注意：所有浏览器都支持该类型，但是显示也存在差异，Chrome 和 Firefox 都显示为一个横杠杠，一个可滑动的小块块，Chrome 的小块块长的长条形，Firefox 的小块块下面是个锥形，相比还算友好一点，但都不提示代码中规定的 1-10 数值。IE 显示就比较友好了，也显示为一个横杠杠，但是做了美化效果，比 Chrome 和 Firefox 更高大上，并且在滑动时可显示数值，IE 的滑块是在横杠杠之中，并不超出，并且滑过的区域会显示为淡蓝色。如下：

　　(8)、input 类型：time

　　time 类型允许你选择一个时间，用于输入时间的控件，不带时区。

　　下面的例子，定义可输入时间控制器：

选择时间:

　　注意：IE 和 Firefox 不支持该类型，Chrome 支持。在 Chrome 中默认显示为：--:--，鼠标移入获得焦点时显示滚动条，可以选择 24 小时制时间。如下：

　　(9)、input 类型：month

　　month 类型允许你选择一个月份，month 和 year 控件，不带时区。

　　下面的例子，定义月与年：

生日 (月和年):