プレースホルダを使用した入力フィールドの操作性

Question

使いやすさに関して簡単な質問があります。テキスト入力中にプレースホルダ（空のテキスト）を有するの好ましい方法である

：ユーザーがフィールドに焦点を当ててまで

A）は、彼らが見えてもらいます。

B）ユーザーが最初の文字を入力するまで表示されます。

ほとんどのウェブサイトでは、オプションAを使用しています（フォーカスイベントを聞いて以前のプレースホルダテキストをクリアし、テキストの色を黒にリセットするだけです）。

しかし、オプションBもいくつかのランダムな場所で使用されています。私はそれを参照してください方法は、長所があります：

あなたが使用してフォームをナビゲートする場合は、ユーザー

B

• にクリア
• を実装するシンプル
  • タブキーでは、ユーザーは通常、次のフィールドを読む前にタブを押します。その場合、空白のテキストは既に消えており、ユーザーは時間がかかりますタイプするものを知っている。空白のテキストを元に戻し、それを読んでタブに移動するには、タブをシフトする必要があります。

  別の質問：オプションBを使用した場合、ユーザーがテキストを削除した後も空のテキストが戻ってくるはずです（まだフォーカスがあります）。

Answer 1

私は確かにtwitterログインページのような入力フィールドを作っています。

あなたのBのようなもので、とても素敵なアニメーションがあります。

Answer 2

ユーザビリティとアクセシビリティの考え方では、常に存在する<label>が必要です。私の意見では、プレースホルダーのテキストは、ヘルパーや書式の指示として使用されたときに最も効果的です。

例えば、ユーザー名と電子メールアドレスを要求するサインインフォームがあります。プレースホルダは、フォーカスを受けてクリアされるサンプルのメールアドレスになります（ただし、「ユーザー名」ラベルは引き続き表示されます）。 （HTML5のplaceholder属性を使用して）

例：私はこれまでのところ、他の例が存在しないこと、驚いています

<label for="username">Username</label> 
<input type="text" id="username" name="username" placeholder="myemail@email.com" />