より良いモバイルユーザーエクスペリエンスのためのより良いフォーム入力

モバイルアプリケーションのパフォーマンスを改善する簡単で実用的な方法：正しいtype 、 inputmode 、およびautocompleteプロパティで常にHTML入力フィールドを構成します。これらの3つの属性は個別に議論されることがよくありますが、全体として検討する場合、モバイルユーザーエクスペリエンスで最も重要です。

誰もが知っているように、モバイルデバイスのフォームの埋めることは時間がかかり、面倒ですが、入力フィールドを正しく構成することにより、ユーザーにとってデータ入力プロセスができるだけスムーズであることを確認できます。より良いモバイルユーザーエクスペリエンスを作成するために、いくつかの例とベストプラクティスを見てみましょう。

正しい入力タイプを使用します

これは正しいことをするのが最も簡単なことです。 email 、 tel 、 urlなどの入力タイプは、さまざまなブラウザーでよくサポートされています。より一般的なtextタイプではなく、デスクトップブラウザでtelタイプを使用することの利点は検出が難しい場合がありますが、モバイルデバイスを一目見たままです。

適切なタイプを選択すると、ユーザーが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 {
  表示：なし;
}

最後に、議論するinputmodeプロパティによって日付タイプをオーバーライドできないことに注意することが重要です。

なぜInputModeを気にする必要があるのですか？

inputmodeプロパティを使用すると、入力タイプで指定されたモバイルキーボードをオーバーライドし、ユーザーに表示されるキーボードタイプを直接宣言できます。このプロパティについて最初に学んだとき、私は感銘を受けませんでした - 最初から適切なタイプを使用してみませんか？ただし、 inputmode通常不要ですが、一部の場所では非常に便利です。私が見つけたinputmodeの最も重要なユースケースは、より良いデジタル入力を構築することです。

urlやemailなどの一部のHTML5入力タイプは簡単ですが、 input type="number"は異なります。いくつかのアクセシビリティの問題と、やや厄介なUIがあります。たとえば、Chromeなどのデスクトップブラウザーは、スクロール時に予期せずに簡単にトリガーされる小さな増分矢印を表示します。

したがって、これは覚えておく必要があるパターンです。ほとんどのデジタル入力については、これを使用しないでください。

<input type="number">

…あなたは実際にこれを使用したい：

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

inputmode="numeric" inputmode="decimal" numeric"を使用してみませんか？

numericおよびdecimal属性値は、Androidで同じキーボードを生成します。ただし、iOSでは、数値と句読点の両方を表示するnumericが表示されますが、 decimal冗長な電話番号関連オプションがないことを除いて、 tel入力タイプとほぼ同じフォーカス数値グリッドを表示します。そのため、ほとんどのタイプの数値入力にとって私の最初の選択肢です。

Christian Oliffはinputmode属性を特に紹介する優れた記事を書きました。

オートコンプリートを忘れないでください

正しいモバイルキーボードを表示するよりも重要なのは、便利なオートコンプリートの提案を表示することです。これは、モバイルデバイスでより高速でスムーズなユーザーエクスペリエンスを作成するのに大いに役立ちます。

ブラウザにはオートコンプリートフィールドを表示するためのヒューリスティックがありますが、それらに頼ることはできません。また、正しいautocomplete属性を追加するようにする必要があります。たとえば、iOS Safariでは、 autocomplete="tel" Tel"属性を明示的に追加した場合にのみinput type="tel" "オプションがAutoCompleteオプションを表示することがわかりました。

ユーザーがクレジットカード番号を埋めるのに役立つオプションやアドレスフォームフィールドなど、基本的なオートコンプリートオプションに精通していると思うかもしれませんが、すべてのオプションを理解するためにそれらをチェックすることをお勧めします。仕様には50以上の値がリストされています！ autocomplete="one-time-code"ご存知ですか？

オートコンプリートについて…

独自のカスタムオートコンプリート関数を作成できる別の要素であるdatalistについて言及したいと思います。デスクトップクロームとサファリで使用可能な（少し基本的ではありますが）オートコンプリートエクスペリエンスを作成しますが、その場所にあることが多いキーボードの真上に便利な線で提案を表示することでiOSで際立っています。さらに、ユーザーはテキストと選択的入力を切り替えることができます。

一方、Androidでは、 datalist 、より典型的なオートコンプリートドロップダウンメニューを作成し、キーボードの上の領域がシステム独自のタイプ機能を保持しています。 （iOSでは、上位3つの一致以外のコンテンツを表示するには、ユーザーがダウンアローアイコンを押して選択セレクターをトリガーする必要があります。）

このデモを使用して、 datalistを試してみることができます。

私が作成したこのツールを使用して、すべてのautocompleteオプションとinputtypeとinputmode値を検討して、モバイルデバイスでさまざまな入力構成をすばやくプレビューするのに役立ちます。

要約します

フォームを構築するとき、私はしばしばデスクトップエクスペリエンスを完成させることに焦点を合わせ、モバイルネットワークを後付けと考える傾向があります。しかし、フォームがモバイルデバイスでうまく機能することを確認するには、追加の作業が必要ですが、必ずしも難しいわけではありません。うまくいけば、この記事では、いくつかの簡単な手順を使用して、モバイルデバイスのフォームをユーザーにとってより便利にすることができることを示しています。

以上がより良いモバイルユーザーエクスペリエンスのためのより良いフォーム入力の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。