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 输入类型可以用于输入数值。你还可以使用其他属性如 minmaxstep 来限制用户来只输入可接受值。

<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 浏览器。