HTML5增加了改良了的input元素的种类，可以简单地使用这些元素来实现HTML5之前需要使用JavaScript才能实现的许多功能。
HTML5的新Input类型，拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。这些新的输入类型有：email、url、number、range、Date pickers（date、month、week、time、datetime，datetime-local）、search、color等。浏览器对HTML5新增的表单类型的支持情况见表5.1。
表5.1 浏览器对HTML5新增的表单类型的支持情况
提示：Opera对新的输入类型的支持最好，不过目前已经可以在所有主流的浏览器中使用它们了。即使它们不被支持，仍然可以显示为常规的文本域。
1.email输入类型
email类型用于应该包含e-mail地址的输入域。在提交表单时，它会自动验证email域的值。
使用实例如下：
<formaction="/example/html5/demo_form.asp"method="get">
E-mail:<inputtype="email"name="user_email"/>
<inputtype="submit"/>
</form>
网页的显示效果如图5.12所示。
图5.12 input元素email类型使用实例
2.url输入类型
url类型用于应该包含URL地址的输入域。在提交表单时，它会自动验证url域的值。
使用实例如下：
<form method="get">
url:<inputtype="url"name="user_url"/>
<inputtype="submit"/>
</form>
网页的显示效果如图5.13所示。
图5.13 input元素url类型使用实例
3.number输入类型
number类型用于应该包含数值的输入域，它还能够设定对所接受的数字的限定（约束）。
使用实例如下：
<form method="get">
Points:<inputtype="number"name="points"min="1"max="10"/>
<inputtype="submit"/>
</form>
网页的显示效果如图5.14所示。
图5.14 input元素number类型使用实例
可使用表5.12所示的属性来规定对数字类型的限定。
表5.2 对数据值设置约束的可用属性
4.range输入类型
range设置一个输入的范围，输入类型用于应该包含一定范围内数字值的输入域。range类型显示为滑动条，能够设定对所接受的数字的限定。
使用实例如下：
<form method="get">
Points:<inputtype="range"name="points"min="1"max="10"/>
<inputtype="submit"/>
</form>
网页的显示效果如图5.15所示。
图5.15 input元素range类型使用实例
5.DatePickers输入类型（日期选择器）
HTML5拥有多个可供选取日期和时间的新输入类型，主要有以下类型：
（1）date：选取日、月、年；(www.xing528.com)
（2）month：选取月、年；
（3）week：选取周和年；
（4）time：选取时间（小时和分钟）；
（5）datetime：选取时间、日、月、年（UTC时间）；
（6）datetime-local：选取时间、日、月、年（本地时间）。
下面的例子允许用户从日历中选取一个日期：
Date:<inputtype="date"name="user_date"/>
网页的显示效果如图5.16所示。
图5.16 input元素date类型使用实例
输入类型month的实例如下：
<form method="get">
Month:<inputtype="month"name="user_date"/>
<inputtype="submit"/>
</form>
其运行结果如图5.17所示。
图5.17 input元素month类型使用实例
输入类型week的实例如下：
<form method="get">
Week:<inputtype="week"name="user_date"/>
<inputtype="submit"/>
</form>
其运行结果如图5.18所示。
图5.18 input元素week类型使用实例
输入类型“time”的实例如下：
<formmethod="get">
Time:<inputtype="time"name="user_date"/>
<inputtype="submit"/>
</form>
其运行结果如图5.19所示。
图5.19 input元素time类型使用实例
输入类型“datetime”的实例如下：
<form method="get">
Dateandtime:<inputtype="datetime"name="user_date"/>
<inputtype="submit"/>
</form>
其运行结果如图5.20所示。
图5.20 input元素datetime类型使用实例
输入类型“datetime-local”的实例如下：
<form method="get">
Dateandtime:<inputtype="datetime-local"name="user_date"/>
<inputtype="submit"/>
</form>
其运行结果如图5.21所示。
图5.21 input元素datetime类型使用实例
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
