更好的形式输入，以提供更好的移动用户体验

提升移动设备应用性能的一个简单实用方法：始终使用正确的type、inputmode和autocomplete属性配置HTML输入字段。虽然这三个属性经常被单独讨论，但当您将它们视为一个整体时，它们在移动用户体验中的意义最为重大。

众所周知，移动设备上的表单填写耗时且繁琐，但通过正确配置输入字段，我们可以确保数据输入过程对用户尽可能流畅。让我们来看一些示例和最佳实践，以创建更好的移动设备用户体验。

使用正确的输入类型

这是最容易做对的事情。诸如email、tel和url之类的输入类型在各种浏览器中都得到了很好的支持。虽然在桌面浏览器上使用tel类型而不是更通用的text类型的好处可能难以察觉，但在移动设备上则一目了然。

选择合适的类型会改变用户在Android和iOS设备上聚焦字段时弹出的键盘。只需付出很少的努力，只需使用正确的类型，我们就可以为电子邮件、电话号码、URL甚至搜索输入显示自定义键盘。

需要注意的是，input type="email"和input type="url"都具有验证功能，当用户提交表单时，现代浏览器会在其值与预期格式不匹配时显示错误提示。如果您想关闭此功能，只需向包含表单添加novalidate属性即可。

日期类型的简要介绍

HTML输入不仅仅包括专门的文本输入——还包括单选按钮、复选框等等。然而，就本文讨论的目的而言，我主要讨论的是更基于文本的输入。

有一种输入类型位于更自由的文本输入和单选按钮等输入小部件之间的临界空间：日期。日期输入类型有多种变体，在移动设备上得到很好的支持，包括date、time、datetime-local和month。当它们被聚焦时，这些会在iOS和Android中弹出自定义小部件。它们不会触发专门的键盘，而是在iOS中显示类似选择的界面，在Android上显示各种不同类型的小部件（其中日期和时间选择器特别流畅）。

我一开始很兴奋能够在移动设备上使用原生默认设置，直到我环顾四周，意识到大多数主要的应用程序和移动网站都使用自定义日期选择器而不是原生的日期输入类型。这可能有几个原因。首先，我发现原生的iOS日期选择器不如日历类型的小部件直观。其次，即使是设计精美的Android实现与自定义组件相比也相当有限——例如，没有简单的方法可以输入日期范围而不是单个日期。

尽管如此，如果使用的自定义日期选择器在移动设备上的性能不佳，那么日期输入类型还是值得尝试的。如果您想在iOS和Android上尝试原生输入小部件，同时确保桌面用户看到自定义小部件而不是默认的下拉菜单，这段CSS代码可以隐藏实现它的桌面浏览器的日历下拉菜单：

::-webkit-calendar-picker-indicator {
  display: none;
}

最后需要注意的是，日期类型不能被我们将要讨论的inputmode属性覆盖。

为什么我应该关心inputmode？

inputmode属性允许您覆盖输入类型指定的移动键盘，并直接声明显示给用户的键盘类型。当我第一次了解这个属性时，我并没有留下深刻印象——为什么不一开始就使用正确的类型呢？但是，虽然inputmode通常是不必要的，但在一些地方它可以非常有用。我发现inputmode最显著的用例是构建更好的数字输入。

虽然一些HTML5输入类型，如url和email，很简单，但input type="number"则有所不同。它有一些可访问性问题，以及一个有点尴尬的UI。例如，桌面浏览器（如Chrome）会显示很小的增量箭头，很容易在滚动时意外触发。

所以这是一个需要记住并在以后使用的模式。对于大多数数字输入，不要使用这个：

<input type="number">

…你实际上想要使用这个：

<input type="text" inputmode="decimal">

为什么不使用inputmode="numeric"而不是inputmode="decimal"？

numeric和decimal属性值在Android上产生相同的键盘。然而，在iOS上，numeric显示一个同时显示数字和标点的键盘，而decimal显示一个专注的数字网格，几乎与tel输入类型完全相同，只是没有多余的电话号码相关选项。这就是为什么它是我对大多数类型数字输入的首选。

Christian Oliff撰写了一篇优秀的文章，专门介绍inputmode属性。

不要忘记autocomplete

比显示正确的移动键盘更重要的是显示有用的自动完成建议。这对于在移动设备上创建更快、更流畅的用户体验大有帮助。

虽然浏览器有显示自动完成字段的启发式方法，但您不能依赖它们，并且仍然应该确保添加正确的autocomplete属性。例如，在iOS Safari中，我发现input type="tel"只有在我显式添加autocomplete="tel"属性时才会显示自动完成选项。

您可能认为您熟悉基本的自动完成选项，例如帮助用户填写信用卡号码或地址表单字段的选项，但我建议您查看它们，以确保您了解所有选项。规范列出了超过50个值！您知道autocomplete="one-time-code"可以使电话验证用户流程非常流畅吗？

关于autocomplete…

我想提一下另一个允许您创建自己的自定义自动完成功能的元素：datalist。虽然它在桌面Chrome和Safari上创建了一种可用的——尽管有点基本——的自动完成体验，但它在iOS上通过在键盘正上方方便的行中显示建议而脱颖而出，系统自动完成功能通常位于该位置。此外，它允许用户在文本和选择式输入之间切换。

另一方面，在Android上，datalist创建了一个更典型的自动完成下拉菜单，键盘上方的区域保留用于系统自己的类型化功能。（在iOS中，为了查看前三名匹配项以外的内容，用户必须通过按下向下箭头图标来触发选择选择器。）

您可以使用此演示来试用datalist：

您可以使用我制作的这个工具来探索所有autocomplete选项以及inputtype和inputmode值，以帮助您快速预览移动设备上的各种输入配置。

总结

当我构建表单时，我经常倾向于专注于完善桌面体验，而将移动网络视为事后考虑。但是，虽然确保表单在移动设备上运行良好确实需要一些额外的工作，但这并不一定很困难。希望本文已经表明，通过几个简单的步骤，您可以使移动设备上的表单对用户更方便。

以上是更好的形式输入，以提供更好的移动用户体验的详细内容。更多信息请关注PHP中文网其他相关文章！