HTML5 输入类型

电子邮件地址字段

这种类型的字段通过为 type 属性设置 email 值来设置。

<label for="email">Enter your email address:</label><br />

<input type="email" id="email" name="email" />

当使用此 type 时，该值必须是有效的电子邮件地址。任何其他内容都会导致浏览器在提交表单时显示错误。您可以在下面的截图中看到实际效果。

您可以将 multiple 属性与 email 输入类型结合使用，以允许在同一输入框中输入多个用逗号分隔的电子邮件地址。

<input type="email" id="email" name="email" multiple />

在某些设备上——尤其是带有动态键盘的触摸设备（如智能手机）——可能会出现更适合输入电子邮件地址的虚拟键盘，包括 @ 键。

这是使用这些新输入类型的另一个好理由，可以改善这些设备用户的用户体验。

客户端验证

如上所示，email — 以及其他更新的 input 类型 — 提供了内置的客户端错误验证，在数据发送到服务器之前由浏览器执行。它确实是一个有用的辅助工具，可以指导用户准确填写表单，并且可以节省时间：立即知道您的数据不正确，而不是等待与服务器的往返，这很有用。

但它不应被视为一项详尽的安全措施！您的应用程序应始终在服务器端和客户端对任何表单提交的数据执行安全检查，因为客户端验证太容易关闭，因此恶意用户仍然可以轻松地将错误数据发送到您的服务器。阅读网站安全以了解可能发生的情况；实现服务器端验证有点超出本模块的范围，但您应该牢记这一点。

请注意，根据默认提供的约束，a@b 是一个有效的电子邮件地址。这是因为 email 输入类型默认允许内网电子邮件地址。要实现不同的验证行为，您可以使用 pattern 属性。您还可以自定义错误消息。我们将在后面的客户端表单验证文章中讨论如何使用这些功能。

搜索字段

搜索字段旨在用于在页面和应用程序上创建搜索框。这种类型的字段通过为 type 属性设置 search 值来设置。

<label for="search">Enter a search term:</label><br />

<input type="search" id="search" name="search" />

text 字段和 search 字段之间的主要区别在于浏览器如何对其外观进行样式设置。在某些浏览器中，search 字段以圆角呈现。在某些浏览器中，会显示一个“Ⓧ”清除图标，单击该图标会清除字段中的任何值。此清除图标仅在字段有值时出现，并且，除了 Safari 之外，它只在字段获得焦点时显示。此外，在具有动态键盘的设备上，键盘的回车键可能会显示“搜索”，或显示放大镜图标。

另一个值得注意的功能是，search 字段的值可以自动保存和重新使用，以便在同一网站的多个页面之间提供自动完成功能；这在大多数现代浏览器中往往会自动发生。

电话号码字段

可以使用 tel 作为 type 属性的值来创建用于填写电话号码的特殊字段。

<label for="tel">Enter a telephone number:</label><br />

<input type="tel" id="tel" name="tel" />

当通过带有动态键盘的触摸设备访问时，大多数设备在遇到 type="tel" 时会显示数字键盘，这意味着当需要数字键盘时，这种类型很有用，而不必只用于电话号码。

-

由于世界各地电话号码格式的多样性，这种类型的字段不会对用户输入的值强制执行任何约束（这意味着它可能包含字母等）。

如前所述，pattern 属性可用于强制执行约束，您将在客户端表单验证中了解它。

URL 字段

可以使用 url 作为 type 属性的值来创建用于输入 URL 的特殊字段。

<label for="url">Enter a URL:</label><br />

<input type="url" id="url" name="url" />

它为字段添加了特殊的验证约束。如果未输入协议（例如 http:），或者 URL 格式不正确，浏览器将报告错误。在具有动态键盘的设备上，默认键盘通常会默认显示冒号、句点和斜杠的部分或全部作为按键。

数字字段

可以使用 <input> type 为 number 的元素来创建用于输入数字的控件。此控件看起来像一个文本字段，但只允许浮点数，并且通常以旋转按钮的形式提供按钮，以增加和减少控件的值。在具有动态键盘的设备上，通常会显示数字键盘。

<label for="number">Enter a number:</label><br />

<input type="number" id="number" name="number" />

使用 number 输入类型，您可以通过设置 min 和 max 属性来限制允许的最小值和最大值。

您还可以使用 step 属性来设置按旋转按钮时引起的增量增加和减少。默认情况下，数字输入类型只验证数字是否为整数，因为 step 属性默认为 1。要允许浮点数，请指定 step="any" 或特定值，例如 step="0.01" 以限制浮点。如果省略，由于 step 值默认为 1，因此只有整数有效。

让我们看一些例子

此示例创建了一个数字控件，其有效值被限制在 1 到 10 之间的奇数。增加和减少按钮将值更改 2，从 min 值开始。

<label for="number">Enter an odd number between 1 and 10:</label><br />

<input type="number" name="age" id="age" min="1" max="10" step="2" />

此示例创建了一个数字控件，其值被限制在 0 到 1 之间的任何值（包括两者），并且其增加和减少按钮将值更改 0.01。

<label for="number">Enter a number between 0 and 1, inclusive:</label><br />

<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />

当有效值范围有限时（例如一个人的年龄或身高），number 输入类型才有效。如果范围太大，以至于增量增加没有意义（例如美国邮政编码，范围从 00001 到 99999），那么 tel 类型可能是一个更好的选择；它提供了数字键盘，同时放弃了数字的旋转器 UI 功能。

滑块控件

另一种选择数字的方法是使用滑块。您经常在购物网站等网站上看到这些，您想设置一个最大房产价格进行过滤。让我们看一个实时示例来说明这一点。

从使用角度来看，滑块不如文本字段精确。因此，它们用于选择一个不一定需要精确值的数字。

滑块是使用 <input> 元素创建的，其 type 属性设置为 range。滑块的滑块拇指可以通过鼠标、触摸或键盘上的箭头移动。

正确配置滑块很重要。为此，强烈建议您设置 min、max 和 step 属性，它们分别设置最小值、最大值和增量值。

让我们看看上面示例背后的代码，这样您就可以看到它是如何完成的。首先，基本的 HTML

<label for="price">Choose a maximum house price: </label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="1000"
  value="250000" />
<output class="price-output" for="price"></output>

此示例创建了一个滑块，其值可在 50000 到 500000 之间，每次增加/减少 1000。我们使用 value 属性为其提供了一个默认值 250000。

滑块的一个问题是它们不提供任何关于当前值的视觉反馈。这就是为什么我们包含了 <output> 元素来包含当前值。您可以在任何元素中显示输入值或计算结果，但 <output> 是特殊的——就像 <label> 一样——它可以采用 for 属性，允许您将其与输出值来源的元素相关联。

要实际显示当前值并在其更改时更新它，您必须使用 JavaScript，这可以通过几条语句完成。

const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
  output.textContent = price.value;
});

body {
  text-align: center;
}
label,
output {
  display: block;
}

在这里，我们将 range 输入和 output 的引用存储在两个变量中。然后我们立即将 output 的 textContent 设置为输入的当前 value。最后，设置一个事件监听器，以确保每当滑动条移动时，output 的 textContent 都会更新为新值。

日期和时间选择器

通常，为了在收集日期和时间值时提供良好的用户体验，提供日历选择 UI 非常重要。这些功能使用户能够选择日期，而无需切换到原生日历应用程序或可能以难以解析的不同格式输入日期。上个千禧年的最后一分钟可以用以下不同方式表达：1999/12/31、23:59 或 12/31/99T11:59PM。

HTML 日期控件可用于处理这种特定类型的数据，提供日历组件并统一数据。

日期和时间控件是使用 <input> 元素和 type 属性的适当值创建的，具体取决于您希望收集日期、时间还是两者。这是一个实时示例。

<label for="party">Choose a date and time for your party:</label>
<input type="datetime-local" id="party" name="bday" />
<span class="validity"></span>

input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

让我们简要地看一下不同的可用类型。请注意，这些类型的使用非常复杂，尤其是考虑到浏览器支持（见下文）；要了解完整详细信息，请点击下面的链接到每种类型的参考页面，包括详细示例。

日期

<input type="date"> 创建一个用于显示和选择日期（年、月、日，无时间）的组件。

<label for="date">Enter the date:</label><br />

<input type="date" name="date" id="date" />

datetime-local

<input type="datetime-local"> 创建一个用于显示和选择日期和时间（不包含特定时区信息）的组件。

<label for="month">Enter the date and time:</label><br />

<input type="datetime-local" name="datetime" id="datetime" />

月份

<input type="month"> 创建一个用于显示和选择月份（带年份）的组件。

<label for="month">Enter the month:</label><br />

<input type="month" name="month" id="month" />

时间

<input type="time"> 创建一个用于显示和选择时间值的组件。虽然时间可能以 12 小时制显示，但返回的值是 24 小时制。

<label for="time">Enter a time:</label><br />

<input type="time" name="time" id="time" />

周

<input type="week"> 创建一个用于显示和选择周数及其年份的组件。

星期从星期一开始，到星期日结束。此外，每年第一周的第 1 周包含该年的第一个星期四——这可能不包括该年的第一天，也可能包括上一年的最后几天。

<label for="week">Enter the week:</label><br />

<input type="week" name="week" id="week" />

约束日期/时间值

所有日期和时间控件都可以使用 min 和 max 属性进行约束，通过 step 属性（其值因输入类型而异）可以进行进一步约束。

<label for="myDate">When are you available this summer?</label><br />
<input
  type="date"
  name="myDate"
  min="2025-06-01"
  max="2025-08-31"
  step="7"
  id="myDate" />

颜色选择器控件

颜色总是有点难以处理。有许多表达方式：RGB 值（十进制或十六进制）、HSL 值、关键字等等。

可以使用 <input> 元素创建 color 控件，并将其 type 属性设置为 color 值。

<label for="color">Pick a color:</label><br />

<input type="color" name="color" id="color" />

单击颜色控件通常会显示操作系统的默认颜色选择功能供您选择。返回的值始终是小写 6 位十六进制颜色。

总结

到此，我们对 HTML5 表单输入类型的介绍就结束了。还有一些其他控件类型由于其非常特殊的行为而无法轻易归类，但仍然是必须了解的。我们将在下一篇文章中介绍这些内容。

• 上一页
• 概述：Web 表单
• 下一页