最初のセクションでは、基本的なフォームを作成する方法を学びました。このセクションでは、ベスト プラクティスについて説明します。このモジュールでは、ユーザー エクスペリエンス（UX）と、ユーザー インターフェース（UI）を適切に実装することで大きな違いが生まれる理由について学習します。
ユーザー フレンドリーなインターフェースを作成する
フォームの入力は時間がかかり、面倒な作業ですが、そうである必要はありません。優れたユーザー エクスペリエンスを構築するには、インターフェースが直感的に操作できることを確認してください。最適なフォーム構造とグラフィック デザイン（レイアウト、間隔、フォントサイズ、色）、論理的な UI（ラベルの文言や適切な入力タイプなど）を提供してください。フォームを改善して使いやすくする方法について説明します。
ラベル
<label> 要素の用途を覚えていますか？ラベルはフォーム コントロールを説明します。表示されていて、わかりやすく書かれたラベルは、ユーザーがフォーム コントロールの目的を理解するのに役立ちます。
すべてのフォーム コントロールにラベルを使用する
フォームに新しいフォーム コントロールを追加しますか？ まず、新しいフィールドのラベルを追加します。こうすることで、追加し忘れることがなくなります。
ラベルを先に付けると、フォームの目標（ここで必要なデータは何か）に集中しやすくなります。この点が明確になったら、ユーザーがデータを入力してフォームを完成させるのを手伝うことに集中できます。
ラベルの文言
メール フィールドの説明を求めます。次のようにします。
<label for="email">Enter your email address</label>
次のように説明することもできます。
<label for="email">Email address</label>
どちらの説明を選択しますか？
この例では、「メールアドレス」という文言が推奨されます。短いラベルはスキャンしやすく、視覚的な混乱を減らし、ユーザーがどのようなデータが必要かをより早く理解するのに役立つためです。
ラベルの位置
CSS を使用すると、フォーム コントロールの上、下、左、右にラベルを配置できます。どこに配置しますか？
調査によると、ラベルをフォーム コントロールの上に配置するのがベスト プラクティスです。これにより、ユーザーはフォームをすばやくスキャンして、どのラベルがどのフォーム コントロールに属しているかを確認できます。
フォームを設計する
フォームを適切に設計することで、フォームの離脱率を大幅に減らすことができます。適切な要素と入力タイプを使用してユーザーがデータを入力できるようにする
選択できるフォーム要素と入力タイプはさまざまです。最適なユーザー エクスペリエンスを提供するには、ユースケースに最適な要素と入力タイプを使用します。ユーザーが複数行のテキストを入力する必要がある場合は、<textarea> 要素を使用します。サイトの利用規約に同意する必要がある場合は、<input type="checkbox"> を使用します。
また、フォーム コントロールの種類を視覚的に区別する必要があります。ボタンはボタンらしく見えるようにします。入力のような入力。ユーザーがフォーム コントロールの目的を認識しやすくなります。たとえば、リンクのように見えるものをクリックした場合は、フォームを送信するのではなく、新しいページを開く必要があります。
ユーザーがフォームを操作できるようにする
凝ったレイアウトは楽しいかもしれませんが、フォームの入力の妨げになる可能性があります。
特に、調査によると、1 列のみを使用するのが最適です。ユーザーは、次のフォーム コントロールがどこにあるかを探すのに時間をかけたくありません。1 列にすることで、たどる方向は 1 つだけになります。
ユーザーがフォームを操作できるようにする
誤ってタップやクリックが行われるのを防ぎ、ユーザーがフォームを操作しやすくするために、ボタンを十分に大きくします。ボタンの推奨されるタップ ターゲット サイズは 48 ピクセル以上です。また、誤った操作を避けるため、margin CSS プロパティを使用して、フォーム コントロール間に十分な間隔を設ける必要があります。
フォーム コントロールのデフォルトのサイズは、実際に使用するには小さすぎます。padding を使用してサイズを大きくし、デフォルトの font-size を変更する必要があります。
pointer CSS メディア機能を使用すると、マウスなどのポインティング デバイスごとに異なるサイズを定義できます。
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
詳しくは、pointer CSS メディア特性をご覧ください。
エラーが発生した場所を表示する
ユーザーがどのフォーム コントロールに注意を払う必要があるかを簡単に把握できるように、エラー メッセージは参照先のフォーム コントロールの横に表示します。フォームの送信時にエラーを表示する場合は、最初の無効なフォーム コントロールに移動するようにしてください。
ユーザーが入力するデータを明確にする
ユーザーが有効なデータを入力する方法を理解していることを確認します。パスワードは 8 文字以上にする必要がありますか？教えてあげて。
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
どのフィールドが必須であるかをユーザーに明確に伝える
<label for="name">Name (required)</label>
<input name="name" id="name" required>
必須フィールドはわかりやすくしましょう。The Anatomy of Accessible Forms では、必須項目を示す代替手段について説明しています。フォームのほとんどのフィールドが必須の場合は、省略可能なフィールドを示す方がよいでしょう。
エラー メッセージをフォーム コントロールに接続して、スクリーン リーダーでアクセスできるようにするにはどうすればよいですか？詳しくは、ユーザー補助モジュールをご覧ください。
理解度を確認する
フォームの設計に関する知識をテストする
フォーム コントロールをどのように説明しますか？
<description> 要素を使用します。<label> 要素を使用します。description 属性を使用します。placeholder 属性を使用します。推奨されるタップ ターゲットのサイズはどれですか？
エラー メッセージはどこに配置すべきですか？
<form> の上部。