ブラウザとデベロッパーは、ユーザーがデータをすばやく入力し、データを再入力しなくて済むようにすることができます。

自動入力機能は、ブラウザがフォームのフィールドに、ユーザーの保存済み情報(名前、住所、お支払い情報など)を自動的に入力できるようにする機能です。自動入力の仕組みと、ブラウザで適切な自動入力オプションを提供する方法を理解することで、ユーザーの時間を大幅に節約し、手間を省き、ミスを回避できます。自動入力を有効にして適切に機能させることで、ユーザーがフローを途中で放棄するのを防ぎ、フォーム送信率を高めることができます。

特に、コマースと購入手続きのフローでは、自動入力が購入者のエクスペリエンスと販売者の成果の両方に大きなメリットをもたらすことがデベロッパーによって確認されています。

ゲスト購入(ユーザーに空のフォームが表示される購入)の 3 分の 1 で自動入力が使用されています。自動入力を使用したセッションでは、購入完了率が最大 41% 向上しています。- Shopify

詳細

自動入力の仕組みと、autocomplete などの要素属性を使用してブラウザで適切な自動入力オプションを提供できるようにする方法について学びます。
自動入力を有効にすると、ユーザーが住所と支払いフォームをできるだけ迅速かつ簡単に入力できるため、コンバージョンを最大化できます。
自動入力の実装に使用できるすべての自動入力タイプのリストを確認する。

ユーザーがショッピング カートから支払いまでを迅速かつ簡単に完了できるようにしたいですか?

ブラウザの組み込み機能を使用して、コンバージョンを最大化する購入手続きフォームを開発する方法を学びます。

デバッグとトラブルシューティング

フォーム自動入力の仕組みを理解し、問題を特定するのに役立つ DevTools 機能をマスターします。
DevTools の [自動入力] パネルを使用して、Chrome に保存されている住所情報を検査してデバッグする方法について説明します。
フォームの使用状況を監査し、無効な属性や要素の使用、属性の欠落、自動入力エラー、その他の問題のあるフォームコードなどの一般的な問題を確認します。

測定

ブラウザの自動入力がフォームに与える影響を測定し、ユーザーがフォームをどのように操作しているかに関する貴重な分析情報を得て、改善すべき点を特定する方法を学びます。
HTML フォームをマスターして、ウェブ デベロッパーとしてのスキルを磨きましょう。フォームの学習コースでは、HTML フォームをわかりやすい部分に分解し、フォーム要素、フォームのスタイル設定、ユーザーによるデータの再入力のサポート、フォームのアクセスとセキュリティの確保、フォームのテストなどについて説明します。
自動入力のベスト プラクティスについて詳しくは、Google Chrome のエンジニアとプロダクト エキスパートが主催するウェブセミナーにご登録ください。