HTML5 新输入类型
HTML5 为表单引入了几种新的输入类型。
HTML5 中的新输入类型
HTML5 引入了几种新类型，如电子邮件，日期，时间，颜色，范围等，以改善用户体验并使表单更具交互性。但是，如果浏览器无法识别这些新输入类型，它会将它们视为普通文本框。 <input>
在本节中，我们将简要介绍以下每种新输入类型：
输入类型颜 - color
color 输入类型允许用户选择从下拉颜色选择器的彩色，并返回该颜色的十六进制值。这是一个例子：
<form>
<label>
Select Color: <input type="color" name="mycolor">
</label>
</form>
警告： Internet Explorer 和 Apple Safari 不支持 type="color" 输入。目前支持的有 Firefox，Chrome 和 Opera 浏览器。
输入类型 - date
date 输入类型允许用户选择从下拉日历的日期。
<form>
<label>
Select Date: <input type="date" name="mydate">
</label>
</form>
**警告：**Internet Explorer 和 Firefox 不支持 type="date" 输入。目前支持的有 Chrome，Safari 和 Opera 浏览器。
输入类型 - datetime
datetime 输入类型允许用户与时区沿选择日期和时间。
<form>
<label>
Date & Time: <input type="datetime" name="mydatetime">
</label>
</form>
**警告：**Internet Explorer，Firefox，Chrome 和 Opera 浏览器不支持 type="datetime" 输入。目前仅由 Apple Safari 支持。
输入类型 - datetime-local
datetime-local 输入类型，用户可以选择本地的日期和时间。本地日期和时间不提供时区信息。
<form>
<label>
Local Date & Time: <input type="datetime-local" name="mylocaldatetime">
</label>
</form>
**警告：**Internet Explorer 和 Firefox 不支持 type="datetime-local" 输入。目前支持的有 Chrome，Safari 和 Opera 浏览器。
输入类型 - email
email 输入类型允许用户输入电子邮件地址。它与标准文本输入类型非常相似，但如果它与 required 属性结合使用，浏览器可能会查找模式以确保输入有效的电子邮件地址。
<form>
<label>
Email Address: <input type="email" name="myemail" required>
</label>
</form>
所有主流浏览器（如 Mozilla Firefox，Google Chrome，Apple Safari，Internet Explorer 10+和 Opera）都支持对 type="email" 输入进行验证。
注意： 你可以在不同的验证状态下采用不同样式的电子邮件字段，当使用输入的值使用 :valid ， :invalid 或者 :required 伪类。
输入类型 - month
month 输入类型允许用户从下拉日历中选择一个月份和年份。
<form>
<label>
Select Month: <input type="month" name="mymonth">
</label>
</form>
**警告：**Internet Explorer 和 Firefox 不支持 type="month" 输入。目前支持的有 Chrome，Safari 和 Opera 浏览器。
输入类型 - number
number 输入类型可以用于输入数值。你还可以使用其他属性如 min ， max 和 step 来限制用户来只输入可接受值。
<form>
<label>
Select Number: <input type="number" value="1" min="1" max="10" step="0.5" name="mynumber">
</label>
</form>
所有主流浏览器都支持 type="number" 输入，如 Mozilla Firefox，Google Chrome，Apple Safari，Internet Explorer 10+和 Opera。然而，Internet Explorer 只识别该数字但不提供递增和递减按钮。
输入类型 - range
range 输入类型可以被用于在指定范围内输入数值。它与 number 输入非常相似，但它为输入数字提供了更简单的控制。
<form>
<label>
Select Number: <input type="range" value="1" min="1" max="10" step="0.5" name="mynumber">
</label>
</form>
所有主流浏览器都支持 type="range" 输入，如 Mozilla Firefox，Google Chrome，Apple Safari，Internet Explorer 10+和 Opera。
输入类型 - search
search 输入类型可以用于创建搜索字段。
搜索字段的行为通常类似于常规文本字段，但在某些浏览器（如 Google Chrome 和 Apple Safari）中，只要你开始在搜索框中输入，字段右侧会出现一个小叉号，可让你快速清除搜索字段。
<form>
<label>
Search Website: <input type="search" name="mysearch">
</label>
</form>
**警告：**Firefox，IE 9 及更早版本不支持 type="search" 输入。目前支持的有 Chrome，Safari，IE 10+和 Opera 浏览器。
输入类型 - tel
tel 输入类型可以用于输入电话号码。
<form>
<label>
Telephone Number: <input type="tel" name="mytelephone" required>
</label>
</form>
**警告：**任何浏览器当前都不支持 type="tel" 输入验证，但它仍然有用。iPhone 和一些 Android 设备使用输入 type="tel" 来通过数字键盘更改虚拟键盘。
输入类型 - time
time 输入类型可以被用于输入一个时间。
<form>
<label>
Select Time: <input type="time" name="mytime">
</label>
</form>
**警告：**Internet Explorer 和 Firefox 不支持 type="time" 输入。目前支持的有 Chrome，Safari 和 Opera 浏览器。
输入类型 - url
url 输入类型可用于输入网址 - URL。你可以使用 multiple 属性输入多个 URL。例如 type="email" ，浏览器可以对 URL 字段执行简单验证，并在表单提交时显示错误消息。
<form>
<label>
Website URL: <input type="url" name="mywebsite" required>
</label>
</form>
**注意：**所有主流浏览器（如 Firefox，Chrome，Safari，Opera，Internet Explorer 10+）都支持对 type="url" 进行验证。
输入类型 - week
week 输入类型允许用户从下拉日历中选择一个星期的一年。
<form>
<label>
Select Week: <input type="week" name="myweek">
</label>
</form>
**警告：**Internet Explorer 和 Firefox 不支持 type="week" 输入。目前支持的有 Chrome，Safari 和 Opera 浏览器。