佛山网页设计：HTML5输入类型——它们现在在哪里？

对于许多设计人员和开发人员来说，HTML5的一个突出的标题功能是添加了许多可以使用的新类型的表单输入。多年来，我们一直局限于使用单行文本输入（type="text"）并使用JavaScript和用户指令来尝试通过一个简单的字段准确地捕获不同类型的有效数据。

HTML5带来了type属性的新值，使我们能够更加具体地了解我们需要通过该字段捕获的数据类型，并承诺浏览器将提供强制用户进入所需的接口和验证。准确完成该领域。

从URL到电子邮件，从搜索字段到日期，希望不是需要编写繁琐的JavaScript来尝试验证这些字段，我们可以将它留给浏览器为我们做那项艰苦的工作。更重要的是，通过添加它对用户上下文（设备类型，交互类型，时区等）的了解，浏览器可以更好地定制界面以满足用户的需求。可以作为页面作者。

在规范中添加新项目是一回事，但除非我们的受众使用的浏览器支持这些功能，否则它并不意味着太多。如果浏览器没有支持，这些type属性的新值具有回退的巨大优势type="text"，但这也可能以消除浏览器制造商在其产品中实现这些新类型的必要性为代价。

佛山网页设计这是2019年的开始，HTML5已成为当前版本的HTML已有四年多了。我们可以使用哪些新类型，我们应该避免哪些类型？

1. 搜索字段

2. 电话号码字段

3. 网址字段

4. 电邮字段

5. 数字字段

6. 范围字段

7. 色域

8. 日期字段

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自定义键盘.，/以及常用顶级域名的自动完成按钮，例如.com我的语言环境.co.uk。这是浏览器能够提供比Web开发人员更多智能选择的一个很好的例子。

建议

使用type="url"时，你需要收集一个完整的，绝对的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，或者如果未指定步骤，则默认步骤似乎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规范。

佛山网页设计