最高の使いやすさのためのフォームラベルの位置

私は彼らのために訪問者を尋ねてきますフォームを作成していますfirstname、middle initialとlastname。これらのテキストフィールドをすべてインラインにしたいのですが、ラベルをどこに配置すればよいですか？左側、上部、またはフィールドの下。

ユーザビリティの観点から最適なアプローチを探しています。

見ていUXmattersすることにより、この研究を。これはかなり詳細で、視線追跡に関するデータが含まれており、一番上のラベルが全体的に最良のソリューションであると結論付けています。

Luke Wroblewskiによる同様の記事があり、これもかなり詳細です。両方の記事を読む価値があります！

最も重要なことは、サイトの他の部分と一貫性を保つことです。一般に、ほとんどのWebサイトでは、テキストフィールドの左側にラベルを付けます。この原因では長い説明になりますので、余裕があり、うまく流れるようにしてください。

左側が正しく見えない場合、またはそれを行う余地がない場合は、上記で行います。それは非常に明確です。

私が避ける唯一の方法は、ラベルをテキストフィールドの下に置くことです。ラベルがフィールドの下にある場合、より混乱します。

通常、あなたの状況では、上部または左側が最適です。ラベルがアクセシビリティのために入力フィールドの前に来るようにしてください。

それでもページをレイアウトしてアクセス可能にする方法はたくさんあります。

フォームラベルは、それができる限り、必要な場所に表示できます。このリソースは一見の価値があります。http：//patterntap.com/tap/collection/forms

最適と考えられる2つのオプションがあります。

• 入力の近くにあるように、右側にフラッシュされたフィールドの左側のラベル。
• フィールド自体の上のラベル

ラベルのfor属性を使用していることを確認するために、使いやすさのために注意するもう1つの重要なことは、ラベルをクリックすると、ラベルを付けるフィールドにフォーカスすることです。

回答：上記のどれでもありません。フィールド自体の内部でプレースホルダーテキストを使用します。プレースホルダー属性は、HTML-5の組み込み部分です。

それ以外の場合は、フィールドの上に左揃えで配置すると言います。

これは少し接線ですが、firstname / lastname / initialを使用しないでください。全員の名前がそのきちんとしたグループに分類されるわけではありません。

StackOverflowについて説明します。

多くのアジアの文化を置く家族の家族が個々よりも重要と考えられているので、最初の名前を。

両親から授与された名前ではない名前を使用している人がかなりいることに注意して、私は次のスキームを使用してある程度成功しました。

氏名（メールの宛先指定用に通常書かれている）; 苗字; 既知（会話で一般的に使用される名前）。

例えば：

氏名：ウィリアムゲーツIII; 姓：ゲイツ; 別名：ビル

氏名：Soong Li; 姓：Soong; 別名：リサ

詳細については、https：//stackoverflow.com/questions/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694を参照してください。