web-dev-qa-db-ja.com

テキスト入力の内側または外側のラベル?

可能性のある複製:
フォームでは、インラインプレースホルダーテキストは各フィールドの外側のラベルより優れていますか?

Gmailのログインボックスなどのテキスト入力の外側にラベルを配置する場合と、Twitterのログインボックスのように(プレースホルダーとして)内部に配置する場合(後者は、古いブラウザーでサポートされていないことを除いて)利点/欠点はありますか?

3
Mark Boulder

入力を開始すると、フィールド内のラベルが消えます。つまり、回答のコンテキストが消えます。あなたが答えている質問を忘れた場合、あなたはフィールドをクリアし、ラベルをもう一度見たいと思っています。また、戻って答えを確認する方法はありません。長い形式の悪夢です。

8
tblessander

セマンティクスとアクセシビリティの点で、labelplaceholderには違いがあることに注意してください

重要なのは、プレースホルダがフォームフィールドのラベルの代わりになることを想定していないことです。

議論の余地があるのは、それを実際に実装する方法です。 HTML 5のplaceholder属性の前は、2つの一般的な方法がありました。

  1. CSSでラベルを非表示にし、フィールド自体にテキストを追加し、JSを使用してフォーカスで削除します

  2. ラベルを物理的にフィールドの上に来るように移動します。

より純粋な感じがするので、通常は2番目のオプションを選択しました。

しかし今日では、HTML 5を使用して、「プレースホルダー」と呼ばれる実際の属性があります。さらに、aria-labelアクセシビリティ:

https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

理論的には、両方の属性がラベルに必要なテキストに設定されているフィールドは、ユーザビリティの観点とアクセシビリティの観点の両方で機能するはずです。

どちらを使用するかについては、通常、適切なlabelタグを使用して、フォームフィールドの横または上に配置することをお勧めします。これは、ほとんどのユーザーにとって最も明確なオプションであり、マークアップの点で最も適切です。また、必要に応じて、さらに明確にするためにプレースホルダー属性を使用することもできます。

フィールド内にラベルを付けるのはいつですか?それは通常、空間と視覚的なデザインの考慮事項に帰着すると思います。

6
DA01

外側のラベル、コピーの例または内側の完了に関するガイダンス(入力時に消えます)。したがって、フィールド内に「生年月日」というラベルを付けますが、期待される形式を示す「dd/mm/yyyy」というラベルを付けます。

5
Peter