最初のセクションでは、基本的なフォームの作成方法を学習しました。このセクションでは、おすすめの方法について説明します。 このモジュールでは、ユーザー エクスペリエンス（UX）の概要と、適切に実装されたユーザー インターフェース（UI）が大きな違いをもたらす理由について学習します。
ユーザー フレンドリーなインターフェースの作成
フォームの入力には時間がかかり、手間もかかります。必須ではありません。 優れた UX を保証するには、UI を直感的なものにします。フォームの構造、グラフィック デザイン（レイアウト、間隔、フォントサイズと色）、論理 UI（ラベルの言い回し、適切な入力タイプなど）を最適化します。フォームを改善して使いやすくする方法を見ていきましょう。
ラベル
<label> 要素の目的を覚えていますか？ラベルはフォーム コントロールを記述します。ラベルを適切に表示することで、ユーザーがフォーム コントロールの目的を理解しやすくなります。
すべてのフォーム コントロールにラベルを使用する
フォームに新しいフォーム コントロールを追加しますか？ まず、新しいフィールドのラベルを追加します。そうすれば、コードを追加することを忘れることはありません。
最初にラベルを追加しておくと、フォームの目標（ここでどのようなデータが必要かなど）に集中するのに役立ちます。これらを明確にしたら、ユーザーがデータを入力したり、フォームに入力したりするのをサポートすることに集中できます。
ラベルの文言
メール フィールドを記述するとします。次のように指定します。
<label for="email">Enter your email address</label>
または、次のように説明します。
<label for="email">Email address</label>
どの説明文を選択しますか？
この例では、「メールアドレス」という語句をおすすめします。短いラベルはスキャンしやすく、見た目がすっきりし、ユーザーは必要なデータを素早く理解できるためです。
ラベルの位置
CSS を使用すると、フォーム コントロールの上部、下部、左、右側にラベルを配置できます。それはどこに配置しますか？
調査によれば、ベスト プラクティスは、ラベルをフォーム コントロールの上に配置することです。これにより、ユーザーはフォームをすばやくスキャンして、どのラベルがどのフォーム コントロールに属しているかを確認できます。
フォームのデザイン
フォームを適切に設計すると、フォームの放棄率を大幅に下げることができます。適切な要素と入力タイプを使用して、ユーザーがデータを入力できるようにします。さまざまなフォーム要素と入力タイプを選択できます。最適な UX を実現するには、ユースケースに最適な要素と入力タイプを使用します。
ユーザーが複数行のテキストを入力する必要がある場合は、<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>
項目が必須の場合は、その項目を明確にします。必須フィールドの指定方法の代替については、ユーザー補助フォームの構造をご覧ください。フォームのほとんどのフィールドが必須の場合は、オプションのフィールドを指定したほうがよい場合があります。
エラー メッセージをフォーム コントロールに関連付けて、スクリーン リーダーでアクセスできるようにするにはどうすればよいですか。これについては、次のモジュールで学習します。
理解度チェック
フォームの設計に関する知識をテストする
フォーム コントロールについて説明してください。
<description> 要素を使用する。<label> 要素を使用する。description 属性を使用placeholder 属性を使用推奨されるタップ ターゲットのサイズはどのくらいですか？
エラー メッセージの表示場所
<form> の先頭。