优化表单输入以提升移动端用户体验

以下是一种简单实用的方法，可以提高应用程序在移动设备上的性能：始终使用正确的type、inputmode和autocomplete属性配置HTML输入字段。 虽然这三个属性通常被单独讨论，但当您将它们视为一个团队时，它们在移动用户体验的背景下才最具意义。

毫无疑问，移动设备上的表单填写起来可能既耗时又繁琐，但通过正确配置输入，我们可以确保数据输入过程对我们的用户尽可能流畅。 让我们来看一些示例和最佳实践，我们可以利用它们在移动设备上创造更好的用户体验。

使用正确的输入类型

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

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

需要注意的一件事是，input type="email"和input type="url"都带有验证功能，并且当用户提交表单时，现代浏览器会在其值与预期格式不匹配的情况下显示错误提示。 如果您希望关闭此功能，您可以 简单地将novalidate属性添加到包含的form中。

快速了解日期类型

HTML 输入不仅仅包含专门的文本输入——您还有单选按钮、复选框等等。 不过，就本次讨论而言，我主要讨论的是基于文本的输入。

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

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

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

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

最后需要注意的是，date类型无法被我们将在接下来讨论的inputmode属性覆盖。

为什么我应该关心 inputmode？

inputmode属性允许您覆盖输入类型指定的移动键盘，并直接声明显示给用户的键盘类型。 当我第一次了解此属性时，我并没有留下深刻印象——为什么不一开始就使用正确的type呢？ 但是，虽然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属性。 例如，在 iOS Safari 中，我发现input type="tel"只有在我 显式添加了autocomplete="tel"属性时才会显示自动完成选项。

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

说到自动完成…

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

另一方面，在 Android 上，datalist创建了一个更典型的自动完成下拉列表，键盘上方的区域保留用于系统自己的输入提示功能。 此样式的一个可能的优势在于下拉列表易于滚动，在字段获得焦点后即可立即访问所有可能的选项。（在 iOS 中，为了查看前三个匹配项以外的内容，用户必须通过按下向下箭头图标来触发选择选择器。）

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

你可以探索所有自动完成功能，以及输入 type 和 inputmode 的值，使用我制作的这个工具，帮助你快速预览移动设备上各种输入配置。

总结

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