HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

プレースホルダーテキストを入力フィールドラベルとして使用しないでください—ただし...

UXデザイナーは、プレースホルダーテキストを入力フィールドラベルとして使用しないように警告することがよくありますが、これには正当な理由があります。

下の入力フィールドに入力して、何が起こるかを確認してください：

入力を開始するとすぐにプレースホルダーテキストが消えます。

なぜこの問題なのですか？なぜなら、平均的なメールとパスワードのログインフォームよりも大きなフォームでは、ユーザーは簡単に 入力フィールドのラベル（ここではプレースホルダーテキストが唯一のラベルとして機能します）が入力された直後に表示されない場合、フォームに正しく入力したかどうかについて混乱します。

多くのデザイナーが入力フィールドの唯一のテキストとしてプレースホルダーを使用することを好む理由は、UIがすっきりと整理されて見えるようにするためです。これは、良いことです。

残念ながら、ユーザーを混乱させるリスクもあります。これは、最後に必要なことです。

幸い、この問題には解決策があります。これにより、ユーザーに必要なすべての情報を提供しながら、クリーンなUIを使用できます。フローティングラベルと呼ばれます。


  1. HTMLDOM入力テキストオブジェクト

    HTML DOM入力テキストオブジェクトは、タイプ「text」の要素に関連付けられています。 createElement（）メソッドとgetElementById（）メソッドをそれぞれ使用して、テキスト型の入力要素を作成してアクセスできます。 プロパティ 以下は、テキストオブジェクトのプロパティです- プロパティ 説明 オートコンプリート テキストフィールドのオートコンプリート属性値を設定または返すには オートフォーカス ページの読み込み時にテキストフィールドが自動的にフォーカスを取得するかどうかを設定または返す。 defaultValue テキストフィールドの

  2. HTMLプレースホルダー属性

    HTMLプレースホルダー属性は、 input / textareaに表示されるテキストを表します ユーザーが何かを入力し始める前の要素。 構文 以下は構文です- <tagname placeholder=”text”></tagname> HTMLプレースホルダー属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       he