HTML5 新的输入类型
在本教程中，您将了解 HTML5 中引入的新输入类型。
HTML5 中的新输入类型
HTML5 引入了几种新的 <input> 类型，如电子邮件、日期、时间、颜色、范围等。 改善用户体验并使表单更具交互性。 但是，如果浏览器无法识别这些新的输入类型，它会将它们视为普通文本框。
在本节中，我们将简要介绍以下每种新输入类型：
还有一个用于输入日期和时间的 datetime 输入类型，但现在已经过时了。
输入类型颜色
color 输入类型允许用户从颜色选择器中选择颜色并以十六进制格式 (#rrggbb) 返回颜色值。 如果不指定值，则默认为#000000，即黑色。
让我们试试下面的例子来了解它的基本工作原理：
<form>
<label for="mycolor">Select Color:</label>
<input type="color" value="#00ff00" id="mycolor">
</form>注意： 所有主流现代网络浏览器都支持颜色输入（即 type="color"），例如 Firefox、Chrome、Opera、Safari (12.1+)、Edge （14+）。 Microsoft Internet Explorer 和旧版 Apple Safari 浏览器不支持。
日期输入类型
date 输入类型允许用户从下拉日历中选择日期。
日期值包括年、月、日，但不包括时间。
<form>
<label for="mydate">Select Date:</label>
<input type="date" value="2019-04-15" id="mydate">
</form>注意： Chrome、Firefox、Opera 和 Edge 浏览器支持日期输入（即 type="date"）。 Internet Explorer 和 Safari 浏览器不支持。
Datetime-local 输入类型
datetime-local 输入类型允许用户选择本地日期和时间，包括年、月、日以及以小时和分钟为单位的时间。
让我们试试下面的例子来了解它的基本工作原理：
<form>
<label for="mydatetime">Choose Date and Time:</label>
<input type="datetime-local" id="mydatetime">
</form>警告： Firefox、Safari 和 Internet Explorer 浏览器不支持 type="datetime-local"输入。 目前受 Chrome、Edge 和 Opera 浏览器支持。
Email 输入类型
email 输入类型允许用户输入电子邮件地址。 它与标准文本输入类型非常相似，但如果它与 required 属性结合使用，浏览器可能会查找模式以确保应输入格式正确的电子邮件地址 .
让我们通过输入任何电子邮件地址来试试这个例子，看看它是如何工作的：
<form>
<label for="myemail">Enter Email Address:</label>
<input type="email" id="myemail" required>
</form>提示：当使用 :valid, :invalid 或 :required pseudo-classes 输入值时，您可以为不同的验证状态设置电子邮件输入字段的样式。
注意： Firefox、Chrome、Safari、Opera、Internet Explorer 10 及更高版本等所有主流浏览器都支持对电子邮件输入的验证（即 type="email"） .
月份输入类型
month 输入类型允许用户从下拉日历中选择月份和年份。
该值是格式为"YYYY-MM"的字符串，其中 YYYY 是四位数的年份，MM 是月份。 让我们尝试一个例子来看看它是如何工作的：
<form>
<label for="mymonth">Select Month:</label>
<input type="month" id="mymonth">
</form>警告： Firefox、Safari 和 Internet Explorer 浏览器不支持 type="month" 输入。 目前在 Chrome、Edge 和 Opera 浏览器中受支持。
数值输入类型
number 输入类型可用于输入数值。 您还可以使用附加属性 min、max 和 step 限制用户仅输入可接受的值。
以下示例将允许您输入 1 到 10 之间的数值。
<form>
<label for="mynumber">Enter a Number:</label>
<input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>注意： Firefox、Chrome、Safari、Opera、Internet Explorer 10 及以上等所有主流网络浏览器都支持数字输入（即 type="number"）。 然而，Internet Explorer 可以识别该数字，但不提供递增和递减旋转按钮。
范围输入类型
range 输入类型可用于输入指定范围内的数值。 它的工作原理与 number 输入非常相似，但它提供了一个更简单的输入数字控件。
让我们试试下面的例子来了解它的基本工作原理：
<form>
<label for="mynumber">Select a Number:</label>
<input type="range" min="1" max="10" step="0.5" id="mynumber">
</form>注意：所有主流网络浏览器都支持范围输入（即 type="range"），例如 Firefox、Chrome、Safari、Opera、Internet Explorer 10 及更高版本。
搜索输入类型
search 输入类型可用于创建搜索输入字段。
搜索字段的行为通常类似于常规文本字段，但在 Chrome 和 Safari 等某些浏览器中，一旦您开始在搜索框中输入内容，就会在字段右侧出现一个小叉，让您可以快速清除搜索字段。 让我们尝试一个例子来看看它是如何工作的：
<form>
<label for="mysearch">Search Website:</label>
<input type="search" id="mysearch">
</form>注意： 搜索输入（即 type="search"）被所有主要的网络浏览器支持，例如 Firefox、Chrome、Safari、Opera、Internet Explorer 10 及更高版本。
电话输入类型
tel 输入类型可用于输入电话号码。
浏览器本身不支持电话输入验证。 但是，您可以使用 placeholder 属性来帮助用户输入正确的电话号码格式，或者使用 pattern 属性指定 regular expression 来验证用户输入。 我们来看一个例子：
<form>
<label for="myphone">Telephone Number:</label>
<input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>注意：目前任何浏览器都不支持对 tel 输入（即 type="tel"）的验证，因为各国电话号码的格式差异很大，但它仍然有用。 移动浏览器显示用于输入电话号码的电话输入字段的数字键盘。
时间输入类型
time 输入类型可用于输入时间（小时和分钟）。
根据本地系统的时间设置，浏览器可以使用 12 或 24 小时格式输入时间。
<form>
<label for="mytime">Select Time:</label>
<input type="time" id="mytime">
</form>警告： Internet Explorer 和 Safari 浏览器不支持 type="time" 输入。 目前 Chrome、Firefox、Edge 和 Opera 浏览器支持。
网址输入类型
url 输入类型可用于输入 URL 或网址。
您可以使用 multiple 属性输入多个 URL。 此外，如果指定了 required 属性，浏览器将自动进行验证，以确保只有与 URL 的标准格式匹配的文本才会输入到输入框中。 让我们看看它是如何工作的：
<form>
<label for="myurl">Enter Website URL:</label>
<input type="url" id="myurl" required>
</form>注意： Firefox、Chrome、Safari、Opera、Internet Explorer 10 及更高版本等所有主流浏览器都支持对 url 输入（即 type="url"）的验证。
星期输入类型
week 输入类型允许用户从下拉日历中选择星期和年份。
让我们尝试以下示例来了解其工作原理：
<form>
<label for="myweek">Select Week:</label>
<input type="week" id="myweek">
</form>警告： Firefox、Safari 和 Internet Explorer 浏览器不支持 type="week" 输入。 目前受 Chrome、Edge 和 Opera 浏览器支持。