3.2 新的Input类型
HTML5新增了多个输入型表单控件，通过使用这些新增的表单输入类型，可以实现更好的输入控制和验证。目前，Opera浏览器支持最好，但在所有主流浏览器中都可以使用，即使不被支持，仍然可以显示为普通的文本框。
3.2.1 email——Email地址框
视频讲解
email类型的input元素是一种专门用于输入Email地址的文本框，在提交表单的时候，会自动验证Email输入框的值。如果不是一个有效的电子邮件地址，则该输入框不允许提交该表单。
【示例】下面是email类型的一个应用示例。
<form action="demo_form.php" method="get">
请输入您的Email地址：<input type="email" name="user_email" /><br />
<input type="submit" />
</form>
以上代码在Chrome浏览器中的运行结果如图3.1所示。如果输入了错误的Email地址格式，单击“提交”按钮时会出现如图3.2所示的提示。
图3.1 email类型的input元素示例
图3.2 检测到不是有效的Email地址
其中demo_form.php表示提交给服务器端的处理文件。对于不支持type="email"的浏览器来说，将会以type="text"来处理，所以并不妨碍旧版浏览器浏览采用HTML5中type="email"输入框的网页。
如果将email类型的input元素用在手机浏览器中，则会更加凸显其优势。例如，如果使用iPhone或iPod中的Safari浏览器浏览包含Email输入框的网页，Safari浏览器会通过改变触摸屏键盘来配合该输入框，在触摸屏键盘中添加“@”和“.”键以方便用户输入，如图3.3所示，而当浏览普通内容时则不会出现这两个键。email类型的input元素这一新增功能虽然用户不易察觉，但屏幕键盘的变化无疑会带来很好的用户体验。
图3.3 iPhone中的Safari浏览器触摸屏键盘随输入域改变而改变
3.2.2 url——URL地址框
视频讲解
url类型的input元素提供用于输入url地址的文本框。当提交表单时，如果所输入的是url地址格式的字符串，则会提交服务器，如果不是，则不允许提交。
【示例】下面是url类型的一个应用示例。
<form action="demo_form.php" method="get">
请输入网址：<input type="url" name="user_url" /><br/>
<input type="submit" />
</form>
以上代码在Chrome浏览器中的运行结果如图3.4所示。如果输入了错误的url地址格式，单击“提交”按钮时会出现如图3.5所示的“请输入网址”提示。
注意：www.baidu.com并不是有效的URL，因为URL必须以http://或https://开头。这里最好使用占位符提示访问者。另外，还可以在该字段下面的解释文本中指出合法的格式。
图3.4 url类型的input元素示例
图3.5 检测到不是有效的url地址
与前面介绍的email类型输入框相同，对于不支持type="url"的浏览器，将会以type="text"来处理，所以并不妨碍旧版浏览器正常采用type="url"输入框中的URL信息。
如果使用iPhone或iPad中的Safari浏览器浏览包含url输入域的网页，Safari浏览器会通过改变触摸屏键盘来配合该输入框，在触摸屏键盘中添加“.”“/”“.com”键以方便用户输入，如图3.6所示，而当浏览普通内容时则不会出现这3个键。
图3.6 iPhone中的Safari浏览器触摸屏键盘随输入域改变而改变
3.2.3 number——数字框
视频讲解
number类型的input元素提供用于输入数值的文本框。用户还可以设定对所接受的数字的限制，包括允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会提示错误信息。
【示例】下面是number类型的一个应用示例。
<form action="demo_form.php" method="get">
请输入数值：<input type="number" name="number1" min="1" max="20" step="4">
<input type="submit" />
</form>
以上代码在Chrome浏览器中的运行结果如图3.7所示。如果输入了不在限定范围之内的数字，单击“提交”按钮时会出现如图3.8所示的提示。
图3.7 number类型的input元素示例
图3.8 检测到输入了不在限定范围之内的数字
图3.8所示为输入了大于规定的最大值时所出现的提示。同样的，如果违反了其他限定，也会出现相关提示。例如，如果输入数值15，则单击“提交”按钮时会出现如图3.9所示的提示。这是因为限定了合法的数字间隔为4，在输入时只能输入4的倍数，如4、8、16等。又如，如果输入数值-12，则会提示“值必须大于或等于1”，如图3.10所示。
图3.9 出现“值无效”的提示
图3.10 提示“值必须大于或等于1”
number类型使用下面的属性来规定对数字类型的限定，说明如表3.1所示。
表3.1 number类型的属性
对于不同的浏览器，number类型的输入框的外观也可能会有所不同。而如果使用iPhone或iPod中的Safari浏览器浏览包含number输入框的网页，则Safari浏览器同样会通过改变触摸屏键盘来配合该输入框，触摸屏键盘会优化显示数字以方便用户输入，如图3.11所示。
图3.11 iPhone中的Safari浏览器触摸屏键盘显示出数字与符号
3.2.4 range——范围框
视频讲解
range类型的input元素提供用于输入包含一定范围内数字值的文本框，在网页中显示为滑动条。用户可以设定对所接受的数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示。
【示例】下面是range类型的一个应用示例。
<form action="demo_form.php" method="get">
请输入数值： <input type="range" name="range1" min="1" max="30" />
<input type="submit" />
</form>
以上代码在Chrome浏览器中的运行结果如图3.12所示。range类型的input元素在不同浏览器中的外观也不同，例如在Opera浏览器中的外观如图3.13所示，会在滑块下方显示出额外的数字间隔短线。
图3.12 range类型的input元素示例
图3.13 range类型的input元素在Opera浏览器中的外观
range类型使用下面的属性来规定对数字类型的限定，说明如表3.2所示。
表3.2 range类型的属性
从表3.2中可以看出，range类型的属性与number类型的属性相同，这两种类型的不同在于外观表现上，支持range类型的浏览器都会将其显示为滑块的形式，而不支持range类型的浏览器则会将其显示为普通的文本框，即以type="text"来处理。
3.2.5 date pickers——日期选择器
视频讲解
日期选择器（Date Pickers）是网页中经常要用到的一种控件，在HTML5之前的版本中，并没有提供任何形式的日期选择器控件，多采用一些JavaScript框架来实现日期选择器控件的功能，如jQuery UI、YUI等，在具体使用时会比较麻烦。
HTML5提供了多个可用于选取日期和时间的输入类型，即6种日期选择器控件，分别用于选择以下日期格式：日期、月、星期、时间、日期＋时间、日期＋时间＋时区，如表3.3所示。
表3.3 日期选择器类型
提示：UTC时间就是0时区的时间，而本地时间就是本地时区的时间。例如，如果北京时间为早上8点，则UTC时间为0点，也就是说，UTC时间比北京时间晚8小时。
1．date类型
date类型的日期选择器用于选取日、月、年，即选择一个具体的日期，例如2018年8月8日，选择后会以2018-08-08的形式显示。
【示例1】下面是date类型的一个应用示例。
<form action="demo_form.php" method="get">
请输入日期： <input type="date" name=" date1" />
<input type="submit" />
</form>
以上代码在Chrome浏览器中的运行结果如图3.14所示，在Opera浏览器中的运行结果如图3.15所示。Chrome浏览器中显示为右侧带有微调按钮的数字输入框，可见该浏览器并不支持日期选择器控件。而Opera浏览器中单击右侧小箭头时会显示出日期控件，用户可以使用控件来选择具体日期。
图3.14 在Chrome浏览器中的运行结果
图3.15 在Opera浏览器中的运行结果
2．month类型
month类型的日期选择器用于选取月、年，即选择一个具体的月份，例如2018年8月，选择后会以2018-08的形式显示。
【示例2】下面是month类型的一个应用示例。
<form action="demo_form.php" method="get">
请输入月份： <input type="month" name=" month1" />
<input type="submit" />
</form>
以上代码在Chrome浏览器中的运行结果如图3.16所示，在Opera浏览器中的运行结果如图3.17所示。Chrome浏览器中显示为右侧带有微调按钮的数字输入框，输入或微调时会只显示到月份，而不会显示日期。Opera浏览器中单击右侧小箭头时会显示出日期控件，用户可以使用控件来选择具体月份，但不能选择具体日期。可以看到，整个月份中的日期都会以深灰色显示，单击该区域可以选择整个月份。
图3.16 在Chrome浏览器中的运行结果
图3.17 在Opera浏览器中的运行结果
3．week类型
week类型的日期选择器用于选取周和年，即选择一个具体的哪一周，例如2017年10月第42周，选择后会以“2017年第42周”的形式显示。
【示例3】下面是week类型的一个应用示例。
<form action="demo_form.php" method="get">
请选择年份和周数： <input type="week" name="week1" />
<input type="submit" />
</form>
以上代码在Chrome浏览器中的运行结果如图3.18所示，在Opera浏览器中的运行结果如图3.19所示。Chrome浏览器中显示为右侧带有微调按钮的数字输入框，输入或微调时会显示年份和周数，而不会显示日期。Opera浏览器中单击右侧小箭头时会显示出日期控件，用户可以使用控件来选择具体的年份和周数，但不能选择具体日期。可以看到，整个月份中的日期都会以深灰色按周数显示，单击该区域可以选择某一周。
图3.18 在Chrome浏览器中的运行结果
图3.19 在Opera浏览器中的运行结果
4．time类型
time类型的日期选择器用于选取时间，具体到小时和分钟，例如，选择后会以22:59的形式显示。
【示例4】下面是time类型的一个应用示例。
<form action="demo_form.php" method="get">
请选择或输入时间： <input type="time" name="time1" />
<input type="submit" />
</form>
以上代码在Chrome浏览器中的运行结果如图3.20所示，在Opera浏览器中的运行结果如图3.21所示。
图3.20 在Chrome浏览器中的运行结果
图3.21 在Opera浏览器中的运行结果
除了可以使用微调按钮之外，还可以直接输入时间值。如果输入了错误的时间格式并单击了“提交”按钮，则在Chrome浏览器中会自动更正为最接近的合法值，而在IE 10浏览器中则以普通的文本框显示，如图3.22所示。
time类型支持使用一些属性来限定时间的大小范围或合法的时间间隔，如表3.4所示。
表3.4 time类型的属性
【示例5】可以使用下列代码来限定时间。
<form action="demo_form.php" method="get">
请选择或输入时间：<input type="time" name="time1" step="5" value="09:00">
<input type="submit" />
</form>
以上代码在Chrome浏览器中的运行结果如图3.23所示，可以看到，在输入框中出现设置的默认值“09:00”，并且当单击微调按钮时，会以5秒钟为单位递增或递减。当然，用户还可以使用min和max属性指定时间的范围。
图3.22 IE10不支持该类型输入框
图3.23 使用属性值限定时间类型
在date类型、month类型、week类型中也支持使用上述属性值。
5．datetime类型
datetime类型的日期选择器用于选取时间、日、月、年，其中时间为UTC时间。
【示例6】下面是datetime类型的一个应用示例。
<form action="demo_form.php" method="get">
请选择或输入时间：<input type="datetime" name="datetime1" />
<input type="submit" />
</form>
以上代码在Safari浏览器中的运行结果如图3.24所示，在iPhone中的运行结果如图3.25所示。
图3.24 在Safari浏览器中的运行结果
图3.25 在iPhone中的运行结果
注意：I E、Firefox和Chrome不再支持<input type="datetime">元素，Chrome和Safari部分版本支持。Opera 12以及更早的版本完全支持。
6．datetime-local类型
datetime-local类型的日期选择器用于选取时间、日、月、年，其中时间为本地时间。
【示例7】下面是datetime-local类型的一个应用示例。
<form action="demo_form.php" method="get">
请选择或输入时间：<input type="datetime-local" name="datetime-local1" />
<input type="submit" />
</form>
以上代码在Chrome浏览器中的运行结果如图3.26所示，在Opera浏览器中的运行结果如图3.27所示。
图3.26 在Chrome浏览器中的运行结果
图3.27 在Opera浏览器中的运行结果
3.2.6 search——搜索框
视频讲解
search类型的input元素提供用于输入搜索关键词的文本框。在外观上看起来，search类型的input元素与普通的text类型的区别：当输入内容时，右侧会出现一个“×”图标，单击即可清除搜索框。
【示例】下面是search类型的一个应用示例。
<form action="demo_form.php" method="get">
请输入搜索关键词：<input type="search" name="search1" />
<input type="submit" value="Go"/>
</form>
以上代码在Chrome浏览器中的运行结果如图3.28所示。如果在搜索框中输入要搜索的关键词，在搜索框右侧就会出现一个“×”按钮。单击该按钮可以清除已经输入的内容。在Windows系统中，新版的IE、Chrome、Opera浏览器支持“×”按钮这一功能，Firefox浏览器则不支持，如图3.29所示。
图3.28 search类型的应用
图3.29 Firefox没有“×”按钮
在Mac OS X或iOS系统中，Safari浏览器会将搜索框渲染成圆角，如图3.30所示，而不是Windows系统中用户常见到的方角。
图3.30 iOS系统中的圆角搜索框
提示：在默认情况下，为Chrome、Safari和Mobile Safari等浏览器中的搜索框设置样式是受到限制的。如果要消除这一约束，重新获得CSS的控制权，可以使用专有的“-webkit-appearance: none；”声明，例如：
注意：appearance属性并不是官方的CSS，因此不同浏览器的行为有可能不一样。
3.2.7 tel——电话号码框
视频讲解
tel类型的input元素提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多的电话号码还包括其他字符，如“+”“-”“（”“）”等，例如86-0536-8888888。
【示例】下面是tel类型的一个应用示例。
<form action="demo_form.php" method="get">
请输入电话号码：<input type="tel" name="tel1" />
<input type="submit" value="提交"/>
</form>
以上代码在Chrome浏览器中的运行结果如图3.31所示。从某种程度上来说，所有的浏览器都支持tel类型的input元素，因为它们都会将其作为一个普通的文本框来显示。HTML5规则并不需要浏览器执行任何特定的电话号码语法或以任何特别的方式来显示电话号码。
iPhone或iPad中的浏览器遇到tel类型的input元素时，会自动变换触摸屏幕键盘以方便用户输入，如图3.32所示。
图3.31 tel类型的应用
图3.32 iPhone中的屏幕键盘变化
3.2.8 color——拾色器
视频讲解
color类型的input元素提供专门用于选择颜色的文本框。当color类型文本框获取焦点后，会自动调用系统的颜色窗口，包括苹果系统也能弹出相应的系统色盘。
【示例】下面是color类型的一个应用示例。
<form action="demo_form.php" method="get">
请选择一种颜色：<input type="color" name="color1" />
<input type="submit" value="提交"/>
</form>
以上代码在Opera浏览器中的运行结果如图3.33所示，单击颜色文本框，会打开Windows系统的“颜色”对话框，如图3.34所示，选择一种颜色之后，单击“确定”按钮返回网页，这时可以看到颜色文本框显示对应颜色效果，如图3.35所示。
提示：IE和Safari浏览器暂不支持，Mac OS和iOS系统也不支持。
图3.33 color类型的应用
图3.34 Windows系统中的“颜色”对话框
图3.35 设置颜色后效果