html5 input新输入类型 – HTML5教程

上一章HTML教程请查看：html ISO语言代码

在本教程中，你将了解HTML5中引入的input输入类型。

HTML5中的input新输入类型

HTML5引入了几种新的<input>类型，如电子邮件、日期、时间、颜色、范围等，改善用户体验，使表单更具交互性。但是，如果浏览器不能识别这些新的输入类型，它将把它们当作普通的文本框。

在本节中，我们将简要介绍以下每种新的输入类型：

• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

还有一个datetime输入类型用于输入日期和时间，但是现在已经过时了。

input类型：color

颜色输入类型允许用户从颜色选择器中选择一个颜色，并以十六进制格式(#rrggbb)返回颜色值。如果没有指定值，默认值是#000000，它是黑色的。

让我们尝试下面的例子来理解它是如何工作的：

<form>
    <label for="mycolor">选择颜色:</label>
    <input type="color" value="#00ff00" id="mycolor">
</form>

注意：颜色输入(即type=”color”)在所有主要的现代web浏览器中都是受支持的，如Firefox、Chrome、Opera、Safari(12.1+)、Edge(14+)。不支持微软Internet Explorer和旧版本的苹果Safari浏览器。

Input类型：date

日期date输入类型允许用户从下拉日历中选择日期。

date值包括年、月、日，但不包括时间。

<form>
    <label for="mydate">选择日期:</label>
    <input type="date" value="2020-04-15" id="mydate">
</form>

注意：日期输入(即type=”date”)是由Chrome、Firefox、Opera和Edge浏览器支持的。Internet Explorer和Safari浏览器不支持。

input类型Datetime-local

datetime-local输入类型允许用户选择本地日期和时间，包括年、月、日以及以小时和分钟为单位的时间。

让我们尝试下面的例子来理解它是如何工作的：

<form>
    <label for="mydatetime">选择日期和时间:</label>
    <input type="datetime-local" id="mydatetime">
</form>

警告：Firefox、Safari和Internet Explorer浏览器不支持输入类型=“datetime-local”。目前支持Chrome、Edge和Opera浏览器。

Input类型：email

email输入类型允许用户输入电子邮件地址，它与标准的文本输入类型非常相似，但是如果它与required属性结合使用，浏览器可能会查找模式，以确保输入格式正确的电子邮件地址。

让我们尝试一下这个例子，输入任何电子邮件地址，看看它实际上是如何工作的：

<form>
    <label for="myemail">输入邮件地址:</label>
    <input type="email" id="myemail" required>
</form>

提示：当使用:valid、:invalid或:required伪类输入值时，你可以为不同的验证状态设置电子邮件输入字段的样式。

注意：所有主流浏览器如Firefox、Chrome、Safari、Opera、internetexplorer10及以上浏览器均支援电邮输入(即type=”email”)的验证。

Input类型：month

month输入类型允许用户从下拉日历中选择月份和年份。

该值是格式为“YYYY-MM”的字符串，其中YYYY是四位数的年份，MM是月份号。让我们尝试一个例子，看看这基本上是如何工作：

<form>
    <label for="mymonth">选择月份:</label>
    <input type="month" id="mymonth">
</form>

警告：Firefox、Safari和Internet Explorer浏览器不支持输入类型=”month”。目前支持Chrome、Edge和Opera浏览器。

input类型：number

数字输入类型可用于输入数值。你还可以使用附加属性min、max和step来限制用户只输入可接受的值。

下面的示例允许你输入1到10之间的数值。

<form>
    <label for="mynumber">输入一个数:</label>
    <input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>

注意：所有主要浏览器，例如：Firefox、Chrome、Safari、Opera、internetexplorer10及以上，均支援数字输入(即type=”number”)。但Internet Explorer识别数字，但不提供递增和递减自旋按钮。

input类型：range

range输入类型可用于在指定范围内输入数值，它的工作原理与number输入非常相似，但它提供了一个更简单的数字输入控件。

让我们尝试下面的例子来理解它是如何工作的：

<form>
    <label for="mynumber">选择一个数:</label>
    <input type="range" min="1" max="10" step="0.5" id="mynumber">    
</form>

注：range输入(即typle=”range”)是由所有主要的网页浏览器支持的，如Firefox, Chrome, Safari, Opera, internetexplorer10及以上。

Input类型：search

search输入类型可用于创建搜索输入字段。

一个搜索字段通常表现得像一个普通的文本字段，但在一些浏览器中，比如Chrome和Safari，当你开始在搜索框中键入时，一个小的十字会出现在字段的右侧，让你快速清除搜索字段。让我们尝试一个例子，看看它是如何工作的：

<form>
    <label for="mysearch">搜索网站:</label>
    <input type="search" id="mysearch">
</form>

注：所有主要浏览器，例如Firefox、Chrome、Safari、Opera、internetexplorer10及以上，均支持search输入(即type=”search”)。

input类型tel

tel输入类型可用于输入电话号码。

浏览器本身不支持tel输入验证。但是，你可以使用placeholder属性帮助用户输入电话号码的正确格式，或者指定一个正则表达式来使用pattern属性验证用户输入。让我们来看一个例子：

<form>
    <label for="myphone">电话号码:</label>
    <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>

注意：任何浏览器目前都不支持对电话号码输入(即type=”tel”)的验证，因为不同国家的电话号码格式差异很大，但它仍然很有用。移动浏览器显示用于输入电话号码的tel输入字段的数字键盘。

input类型time

时间输入类型可用于输入时间(小时和分钟)。

浏览器可根据本地系统的时间设置，以12小时或24小时的格式输入时间。

<form>
    <label for="mytime">选择时间:</label>
    <input type="time" id="mytime">
</form>

警告：Internet Explorer和Safari浏览器不支持输入类型=”time”，目前支持Chrome、Firefox、Edge和Opera浏览器。

input类型的URL

url输入类型可用于输入url或web地址。

你可以使用多个属性来输入多个URL。另外，如果指定了required属性，浏览器将自动执行验证，以确保输入框中只输入与url标准格式匹配的文本。让我们看看它是如何工作的：

<form>
    <label for="myurl">输入网站URL:</label>
    <input type="url" id="myurl" required>
</form>

注：所有主要浏览器如Firefox、Chrome、Safari、Opera、internetexplorer10及以上都支援网址输入(即type=”url”)的验证。

input类型week

week输入类型允许用户从下拉日历中选择周和年。

让我们尝试下面的例子来理解它是如何工作的：

<form>
    <label for="myweek">选择周:</label>
    <input type="week" id="myweek">
</form>

警告：Firefox、Safari和Internet Explorer浏览器不支持输入类型=”week”，目前支持Chrome、Edge和Opera浏览器。