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

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

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

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

適切なタイプを選択すると、ユーザーがAndroidおよびiOSデバイスにフィールドを焦點を合わせたときにポップアップするキーボードが変更されます。わずかな労力で、電子メール、電話番號、URL、さらには適切なタイプで検索入力のカスタムキーボードを表示できます。

input type="email"とinput type="url"両方の検証関數(shù)があることに注意してください。ユーザーがフォームを送信すると、最新のブラウザは、その値が予想される形式と一致しない場合にエラーメッセージを表示します。この機能をオフにする場合は、 novalidateプロパティを付屬のフォームに追加するだけです。

日付タイプの簡単な紹介

HTML入力には、特別なテキスト入力だけでなく、ラジオボタン、チェックボックスなども含まれています。ただし、この記事の目的のために、私は主により多くのテキストベースの入力について説明します。

より多くの無料のテキスト入力とラジオボタンのような入力ウィジェットの間の重要なスペースにある入力タイプがあります：日付。日付入力タイプには多くのバリエーションがあり、 date 、 time 、 datetime-local 、 monthなど、モバイルデバイスでよくサポートされています。それらが焦點を合わせているとき、これらはiOSとAndroidでカスタムウィジェットをポップアップします。専用のキーボードをトリガーする代わりに、iOSに選択のようなインターフェイスを表示し、Androidでさまざまな種類のウィジェットを表示します（日付と時刻セレクターは特に滑らかです）。

最初は、周りを見回して、ほとんどの主要なアプリやモバイルサイトがネイティブの日付入力タイプではなくカスタム日付ピッカーを使用していることに気付くまで、モバイルデバイスでネイティブデフォルト設(shè)定を使用できるようになりました。これにはいくつかの理由があるかもしれません。まず、ネイティブのiOS日付ピッカーは、カレンダータイプウィジェットほど直感的ではないことがわかりました。第二に、美しく設(shè)計されたAndroidの実裝でさえ、カスタムコンポーネントに比べて非常に限られています。たとえば、単一の日付ではなく日付範(fàn)囲を入力する簡単な方法はありません。

それにもかかわらず、使用しているカスタム日付ピッカーがモバイルデバイスでうまく機能していない場合、日付入力タイプは試してみる価値があります。 iOSとAndroidでネイティブ入力ウィジェットを試してみたい場合は、デスクトップユーザーがデフォルトのドロップダウンメニューの代わりにカスタムウィジェットを表示するようにする場合、このCSSコードは、それを?qū)g裝するデスクトップブラウザのカレンダードロップダウンメニューを非表示にできます。

 :: -webkit-calendar-picker-indicator {
  表示：なし;
}

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

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

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

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では、數(shù)値と句読點の両方を表示するnumericが表示されますが、 decimal冗長な電話番號関連オプションがないことを除いて、 tel入力タイプとほぼ同じフォーカス數(shù)値グリッドを表示します。そのため、ほとんどのタイプの數(shù)値入力にとって私の最初の選択肢です。

Christian Oliffはinputmode屬性を特に紹介する優(yōu)れた記事を書きました。

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

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

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

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

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

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

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

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

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

要約します

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

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