web-dev-qa-db-ja.com

無効な入力フィールドの表示

無効になっている場合、入力フィールドはどのように表示されますか? 1つのアイデアは、入力フィールド内の値として「無効」を表示することです。テキスト入力フィールドが無効になっていることを示すより良いアイデアはありますか?

チェックボックスがオンになるまで入力ボックスを無効にする必要があります(利用規約のチェックボックス)

4
neelmeg

私は実際にはどのようにbootstrapが無効にされた入力フィールドを実行するか)のファンです。

http://getbootstrap.com/css/#forms

さらに明確にするために、マウスを置いたときにマウスの矢印が変化する場所を設定します。

enter image description here

ただし、それを使用することは別の問題です。利用可能になるまで何かを表示しない方が良い解決策になる場合があります。おそらく、達成しようとしていることをより詳しく説明する必要があります。

5
Chris N.

提供する最も重要な手がかりは、入力フィールドの淡色表示labelです(それに加えて、フィールド内のデフォルトのテキストを淡色表示します)。

enter image description here

これは、フィールドの外側に(適切に)配置されたラベルに対してのみ機能します。淡色表示されたラベルまたはプロンプトinフィールドは、単に「これは実際には入力されていない」ことを意味する場合があります。

フィールドの背景を灰色にして、編集可能になったときに白い背景に変更することもできます。

//Pic

これは、ウィンドウの背景が同じ灰色の陰影(上記の例のように)である従来のGUIダイアログボックスに最適です。無効なフィールドを目立たせたいが、チェックボックスなどの有効なコントロールに比べて注目を集めたくない場合。ただし、白い背景の灰色のフィールド(Webアプリでよく使用される)はコントラストが強く、注目を集める傾向があります。

値として「無効」を試すこともできますが、専門用語です-ユーザーはそれが何を意味するのかわからない場合があります(「いいえ、私のメールは問題なく機能します」)。 「最初に利用規約に同意する」のような、より指示的なプロンプトを試すことができます。これは優れた自己文書化ですが、皮肉なことに、ユーザーが最初に見るべき場所(利用規約とチェックボックス)から注意を引き付けます。ラベルの淡色表示がほとんどのユーザーで機能する場合は、フィールドに焦点を当てようとするユーザーに対してのみ、このようなプロンプトを表示できます。

4

入力が無効になっている入力フィールドを表示するということは、そのフィールドが別の目的、通常は情報目的や学習目的に役立っていることを意味します。その時点で、その目的のために最適化する必要があります。そうでない場合は、認識負荷とインターフェースの複雑さが不必要に追加されるため、削除してください。

0
uxzapper