更好的形式輸入，以提供更好的移動用戶體驗

提升移動設備應用性能的一個簡單實用方法：始終使用正確的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中文網其他相關文章！