新增表单

之前的教程中已经简单的介绍过了表单，早期的网页中为了实现复杂的交互效果，通常需要使用 div+css 模拟复杂的表单类型实现类似日期、滑块条、颜色选择等效果。HTML5 标准中考虑到这种情况，增加了不少的复杂表单效果。本章主要介绍 HTML5 新增的几种增强的表单类型。

1. email

此类型的表单跟普通 text 类型的表单类型表现方式一致，只是在输入完成之后如果不符合 email 类型浏览器会有提示，且不允许提交，定义方式如下：

<input type=email>

以下实例使用 email 类型的表单实现了一个简单的注册功能：

2. url

url 类型的表单视觉展现跟 text 类型的一致，只是在输入完成之后如果不符合 URL 类型浏览器会有提示，且不允许提交，语法如下：

<input type='url'>

以下示例展示了 url 表单的实际使用场景：

3. number

number 类型的表单也跟 text 表现形式一致，但是浏览器会强制不能输入非数字类型的字符，表单最后侧默认会有上下两个按钮，语法如下：

4. tel

tel 类型要求输入一个电话号码，但实际上它并没有特殊的验证，与 text 类型没什么区别:

5. range

此类型将显示一个可拖动的滑块条，并可通过设定 max/min/step 值限定拖动范围。拖动时会反馈给 value 一个值。

在实际项目中可以根据动态获取滑块的 value 值，来实现一定的效果。以下展示了一个使用 range 表单实现了一个动态缩放图片的功能：

6. color

此类型表单，可让用户通过颜色选择器选择一个颜色值，并反馈到 value 中，可以设置默认值，语法如下：

实际项目中，一般用来作为为画笔或者绘图选择颜色，以下示例展示了一个简单的颜色选择器表单：

7. 时间日期系列

这个类型的表单包含几种类型，用来实现繁琐的日历控件，效果各有不同，语法如下：

<input type=date ><!-- 日期 -->
<input type=time ><!-- 时间 -->
<input type=datetime ><!-- 日期+时间  （已经废弃）-->
<input type=datetime-local ><!-- 日期+时间 -->
<input type=month ><!-- 月份 -->
<input type=week ><!-- 星期 -->

可以运行下面代码，试试效果：

8. search

此类型表示输入的将是一个搜索关键字，通过 results=s 或者 x-webkit-speech 可显示一个搜索小图标。语法如下：

这个表单在实际项目中适用场景较少，所以没有示例可以参考。

9. 小结

回顾本章介绍了几种实时交互效果较强的表单控件及用法，弥补了早期 HTML 中的交互缺失的情况。