HTML5 输入类型：它们现在在哪里？
已发表: 2022-03-10 对于许多设计人员和开发人员来说，HTML5 的突出标题功能之一是添加了许多可以使用的新型表单输入。 多年来，我们一直局限于使用单行文本输入 ( type="text" ) 并使用 JavaScript 和用户指令来尝试通过一个简单的字段准确捕获不同类型的有效数据。
HTML5 带来了type属性的新值，使我们能够更具体地了解需要通过该字段捕获的数据类型，并承诺浏览器随后将提供强制用户所需的接口和验证准确地完成该领域。
从 URL 到电子邮件，从搜索字段到日期，我们希望不再需要编写繁琐的 JavaScript 来尝试验证这些字段，而是让浏览器为我们完成这项艰苦的工作。 更重要的是，通过添加它对用户上下文的了解（设备类型、交互类型、时区等），浏览器将能够更好地定制界面以满足我们曾经的用户需求可以作为页面作者。
推荐阅读： UX 和 HTML5：让我们帮助用户填写您的移动表单
在规范中添加新项目是一回事，但除非我们的观众使用的浏览器支持这些功能，否则它并没有太大的意义。 如果浏览器没有支持，这些type属性的新值具有回退到type="text"的巨大优势，但这也可能是以消除浏览器制造商在实现这些新功能时的必要性为代价的类型在他们的产品中。
现在是 2019 年的开始，而 HTML5 已经成为当前版本的 HTML 已有四年多了。 这些新类型中的哪些已经实现，我们可以使用哪些，我们应该避免哪些？
- 搜索字段
- 电话号码字段
- 网址字段
- 电子邮件字段
- 数字字段
- 范围字段
- 颜色字段
- 日期字段
1. 搜索字段
type="search"输入旨在用于搜索字段。 从功能上讲，这些与基本文本字段非常相似，但具有专用类型使浏览器能够应用不同的样式。 如果用户的操作系统为搜索字段设置了样式，这将特别有用，因为这使浏览器能够对网页上的搜索字段进行样式设置以匹配。
规范声明search和text之间的区别纯粹是风格上的，所以如果你打算用 CSS 重新设置字段的样式，最好避免这种情况。 它的使用似乎没有语义优势。
推荐
如果您打算将搜索字段的样式留给浏览器，请使用type="search" 。
2. 电话号码字段
type="tel"输入用于输入电话号码。 这些就像 Whatsapp 使用的唯一用户名。 如果您不确定，请询问您的祖父母。
在国际上，出于技术和本地化原因，电话号码采用许多不同的格式。 因此， tel输入不会尝试验证电话号码的格式。 如果需要，您可以使用相关的验证工具，例如标签上的pattern属性，或setCustomValidity() JavaScript 方法来强制执行格式。
在桌面浏览器上，电话字段的使用似乎影响不大。 然而，在带有虚拟键盘的设备上，它们可能非常有用。 例如，在 iOS 上，将输入集中在电话字段上会弹出一个准备好输入数字的数字键盘。 此外，设备的自动完成机制启动并建议可以通过单击自动填充的电话号码。
推荐
对任何电话号码字段使用type="tel" 。 它在实施时非常有用，并且在没有实施时免费。
3. URL 字段
type="url"字段可用于捕获 URL。 例如，当要求用户输入他们的网站地址作为企业目录时，您可能会使用它。 关于 URL 字段的奇怪之处在于它只需要完整的绝对URL。 例如，无法仅捕获域名或仅捕获路径。 这确实在某些方面限制了它的实用性，因为我想 CMS 和 Web 应用程序开发人员会发现接受和验证相对路径的字段有很多用途。
虽然这将是一个有效的绝对 URL：
https://twitter.com/drewm这两个都不会通过字段的验证：
smashingmagazine.com /2019/01/css-multiple-column-layout-multicol/ 无法指定 URL 的不同部分感觉就像错过了一个机会，但这就是我们所拥有的。 浏览器支持非常棒，虚拟键盘设备为 URL 输入提供了一些自定义。 iOS 使用. , /和用于常见 TLD（例如.com ）和我的语言环境.co.uk的自动完成按钮。 这是浏览器能够提供比我们作为 Web 开发人员更智能的选择的一个很好的例子。
推荐
当您需要收集完整的绝对 URL 时，请使用type="url" 。 浏览器支持很好，但请记住，它对单个 URL 组件没有好处。
4. 电子邮件字段
可能最常用的较新选项之一是用于电子邮件地址的type="email" 。 就像我们在电话号码和 URL 中看到的一样，带有虚拟键盘的设备可以自定义按键（包括@按钮之类的东西）并从他们的联系人数据库中启用自动填充。
桌面浏览器也利用了这一点，macOS 上的 Safari 还根据系统联系人应用程序中的数据启用了电子邮件字段的自动填充功能。
电子邮件地址通常看起来遵循一种非常简单的格式，但实际上这些变化使它们变得相当复杂。 验证电子邮件地址的幼稚尝试可能会导致将一个非常好的地址标记为无效，因此能够依靠浏览器更复杂且经过良好测试的验证方法来检查格式是非常棒的。
有用的是，可以将multiple属性添加到电子邮件字段以收集电子邮件地址列表。 在这种情况下，列表中的每个电子邮件地址都经过单独验证。
<input type="email" multiple> 
推荐
尽可能对电子邮件地址字段使用type="email" 。
5. 数字字段
type="number"字段是为数值设计的，并且具有一些非常有用的属性，例如min 、 max和step 。 数字字段的有效值必须是介于min和max属性指定的任何最小值和最大值之间的浮点数。
如果设置了step长，则有效值可被步长值整除。
<input type="number" min="10" max="30" step="5"> 上述字段的有效输入将是10 、 15 、 20 、 25和30 ，任何其他值都将被拒绝。
浏览器支持很广泛，同样，虚拟键盘通常默认为数字输入模式来键入值。
一些桌面浏览器（包括 Chrome、Firefox 和 Safari，但不包括 Edge）添加了切换按钮，用于按step的值上下微调值，或者如果未指定 step，则每个实现中的默认 step 显示为1 。
推荐
对任何浮点数使用type="number" ，因为它受到广泛支持，有助于防止意外输入。
6. 范围字段
其他一些类型在使用中不太明显， type="range"可以被认为是type="number"的替代方案，用户不关心确切的值。
范围字段采用并且经常使用与数字字段相同的min 、 max和step属性，并且浏览器几乎普遍将其显示为图形滑块。 用户不一定能看到他们设置的确切值。
范围字段可能对诸如“您将其推荐给朋友的可能性有多大？”等表单上的这类问题很有用。 一端是“可能”，另一端是“不太可能”。 用户可以将滑块滑动到他们认为代表他们意见的任何位置，并在后台以数值形式提交，您可以存储和处理。
浏览器支持很好，尽管外观因实现而异。
推荐
type="range"的用途可能有点小众，但支持很好，并且滑块在适当的情况下提供了用户友好的输入法。
7. 颜色字段
type="color"字段用于以十六进制表示法捕获 RGB 颜色，例如#aabbcc 。 HTML 规范将此称为“颜色井控件”，目的是让浏览器提供某种用户友好的颜色选择器。
一些浏览器确实提供了这一点，特别是 Chrome 和 Firefox 都通过一个小色板提供对系统颜色选择器的访问。
IE 和 Safari 都没有在这里提供任何支持，让用户弄清楚他们应该自己输入一个 7 位十六进制数字。
颜色字段可能会在个性化主题和 CMS 使用中找到用途，但除非用户有足够的技术来处理十六进制颜色代码，否则最好不要依赖浏览器为这些提供漂亮的 UI。
推荐
除非您知道您的用户会很乐意回退到输入十六进制颜色代码，否则最好不要依赖支持type="color"的浏览器。
8. 日期字段
HTML5 引入了许多不同的type值来创建日期和时间的输入。 这些包括date 、 time 、 datetime-local 、 month和week 。
乍一看，这些似乎是天赐之物，因为在表单中收集日期对于开发人员和用户来说都是一种困难的体验，而且经常需要它们。
这里的承诺是，新的字段类型使浏览器能够提供标准化的、可访问的和一致的用户界面，以便轻松地从用户那里获取日期和时间。 这一点非常重要，因为世界各地的日期和时间格式因语言和区域设置而异，因此友好的浏览器界面将易于使用的日期选择转换为明确的技术日期格式确实听起来是理想的解决方案.
因此， type="date"字段的有效输入是明确的年月日值，例如2019-01-16 。 像这样的开发人员，因为他们几乎映射到在大多数技术环境中使用的 ISO 8601 日期格式。 不幸的是，很少有普通人使用这种日期格式，当被要求在单个空文本字段中提供日期时，他们不太可能使用它。
而且，当然，如果用户的浏览器不提供用于选择日期的用户界面，则向用户显示一个空文本字段。 在这些情况下，用户很难输入有效的日期值，除非他们碰巧熟悉所需的格式或输入带有明确说明的注释。
然而，许多浏览器确实为选择日期提供了良好的用户界面。 Firefox 有一个非常出色的日期选择器，Chrome 和 Edge 也有相当不错的界面。 但是，旧的 IE 不支持，Safari 也不支持，这可能是个问题。
推荐
虽然很方便，但type="date"及其关联的日期和时间类型的故障模式很差。 这使其成为一个冒险的选择，可能会让用户难以满足验证标准。
结论
自 HTML5 规范成为推荐标准以来的四年中，浏览器领域发生了很大变化。 对新型输入的支持相当强大——尤其是在平板电脑和手机等带有虚拟键盘的移动设备中。 在大多数情况下，这些输入可以安全使用并为用户提供一些额外的实用程序。
有几个值得注意的例外，其中最糟糕的是日期和时间字段，它们不仅缺乏实用性，而且还支持更多不完整的浏览器。 当支持不可用时，这些字段的回退模式很差。 在这些情况下，最好坚持使用基于 JavaScript 的解决方案来逐步增强基本type="text"输入字段。
如果您想阅读更多内容，我会彻底推荐有关这些字段类型的 MDN Web 文档，并且一如既往地推荐 W3C 规范。