4.1.2大幅度地增加与改良了input元素的种类
在HTML 5中，大幅度地增加与改良了input元素的种类（见表4-1），可以简单地使用这 些元素来实现HTML 5之前需要使用JavaScript才能实现的许多功能。
到目前为止，对于这些input的种类来说，支持得最多、最全面的是Opera 10浏览器。对于不支持新增input元素的浏览器来说，统一将这些input元素视为text类型。另外，HTML 5 中也没有规定这些元素在各浏览器中的外观形式，所以同样的input元素在不同的浏览器中可能会有不同的外观。
下面，让我们针对这些input元素，来做一个比较全面的介绍。
1.url类型
url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中内容 不是url地址格式的文字，则不允许提交。url类型的input元素的使用方法如下所示。
<input name=,,urll" type="url" value="http： //www.microsof-t.com11 <http：//www.microsof-t.com11> >
url类型的input元素在Opera 10浏览器中的外观如图4-3所示。
2.email类型
email类型的input元素是一种专门用来输入email地址的文本框。提交时如果该文本框中 内容不是email地址格式的文字则不允许提交，但是它并不检查该email地址是否存在。提交 时该文本框可以为空，除非加上了required属性。
email类型的文本框具有一个multiple属性一它允许在该文本框中输入一串以逗号分隔 的email地址。当然，并不强制要求用户输入该email地址列表。在实际使用过程中，可以由 开发者通过编程的方式将用户联系人地址列表中的邮件列表弹出，在每个联系人的邮件地址 旁边带有复选框，供用户选择输入。email类型的input元素的使用方法如下所示。
<input name="emaill" type=nemail" value=llingma2005§yahoo.com.cnH>
3.date类型
date类型的input元素是深受开发者喜爱的一种元素，我们也经常看到网页中要求我们输 入的各种各样的日期，例如生日、购买日期、订票日期等。date类型的input元素以日历的形 式方便用户输入。在Opera浏览器中，当该文本框获得焦点时，显示日历，可以在日历中选 择日期进行输入。date类型的input元素的使用方法如下所示。
<input name=',datel" type="date" value*"2010-10-02">
4.time类型
.time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的 有效性进行检查。它的外观取决于浏览器，可能是简单的文本框，只在提交时检查是否在其 中输入了有效的时间，也可能以时钟形式出现，还可以携带时区。time类型的input元素的使用方法如下所示。
cinput name篇"time1" type*Mtime" value*"10:00">
5.datetime类型
datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。datetime类型的input元素的使用方法如下所示。
<input name="datetimel ?丨 type= " datetime">
datetime类型的input元素在Opera 10浏览器中的外观如图4_7所示0
6.datetime-local类型
datetime-local类型的input元素是一种专门用来输入本地日期和时间的文本框，并且在提交 时会对输入的日期和时间进行有效性检查。datetime-local类型的input元素的使用方法如下所示。
<input name="datetime-loacallM type= datetime-local">
7.month类型
month类型的input元素是一种专门用来输入月份的文本框，并且在提交时会对输入的月 份的有效性进行检査。month类型的input元素的使用方法如下所示。
<input name=Mmonth1" type="monthn value="2010-10">
8.week类型
week类型的input元素是一种专门用来输入周号的文本框，并且在提交时会对输入的周 号之有效性进行检查。它可能是一个简单的输入文本框，允许用户输入一个数字》也可能更 复杂、更精确。它的格式类似于"2010-W07",代表2010年第7周。
Opera浏览器中提供了一个辅助输入的日历，可以在该R历中选取日期，选取完毕后文 本框中自动显示周号。week类型的input元紊的使用方法如下所示。
<input name*"week 1" type=Mwee）c" value="2010-W40">
9.number类型
number类型的input元素是一种专门用来输入数字的文本框，并且在提交时会检查其中的 内容是否为数字。它具有min、max与step属性。
在Opera浏览器中，它带有数值控制按钮，以控制其数值，使之不超过最大值与最小值，同时在点击该数值控制按钮时，其中的数值会按给定的步幅（step属性）进行增减，当然也 可以直接在其中输入数字。number类型的input元素的使用方法如下所示。
<input name= "number 1" type= "number" value="25" min=_, 10'_ max=" 100" step-"5">
number类型的input元素在Opera 10浏览器中的外观如图4-11所示。
10.range类型
range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性与max属性，可以设定最小值与最大值（默认为0与100），它还具有step属性，可以指定每次拖 动的步幅。在Opera浏览器中，用滑动条的方式进行值的指定。range类型的input元素的使用 方法如下所示。
<input name="range 1" type="range" value="25" min="0" max=,'100" step=,,5M>
11.search类型
search类型的input元素是一种专门用来输入搜索关键词的文本框。search类型与text类型 仅仅在外观上有区别。在Safari 4浏览器中，它的外观为操作系统默认的圆角矩形文本框， 但这个外观可以用CSS样式表进行改写。在其他浏览器中，它的外观暂与text类型的文本框 外观相同，但可以用CSS样式表进行改写，如下所示。
input[type="search"] {-webkit-appearance: textfield;}
12.tel类型
tel类型的iripm元素被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则， 不强制输入数字（因为许多电话号码通常都带有其他文字），譬如86-0519-86670121.但是 幵发者可以通过pattern属性来指定对于输入的电话号码格式的验证。
13.color类型
color类型的input元素用来选取颜色，它提供了一个颜色选取器。现在，它只在 BlackBerry浏览器中被支持。
14.简单表单示例
在HTML 5中追加了这么多元素后，那么HTML 5最基本的表单是什么样子呢？这里拿 一个网页上常用的简单用户注册页面来做例子。在该例子中，综合使用了HTML 5中新增的 input元素，并对这些元素添加了必要的验证属性。详见代码清单4-5.
代码清单4-5简单表单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单表单示例</title>
<form name=Mforml">
<label for=username>姓名</label>
<input name?username id=username type=text required /><br/>
<label for==age>年龄</label>
<input name=age id=age type=*number min=0 max=100/><br/> clabel for=birthday>iB生曰期</label>
<input name=birthday id=birthday type=date/><br/> clabel for=email>Email</label>
<input name=?email id-email type=email required /><br/>
<label for=url>^人主页</label>
<input name?url id-url type=url /><br/>
<label forrmemc^^人简介</label>
ctextarea name=memo id=memo required ></textarea><br/>
<input type=submit>
</form>
此例中的代码在Opera 10浏览器中查看时显示效果最佳，此表单在网页中呈现最原始的 表单外观，我们在开发时，通常会把各元素分配在table元素里，用以将元素对齐，同时对 table元素使用样式。
相关HTML 5与CSS 3权威指南：大幅度地增加与改良了input元素的种类