web-dev-qa-db-ja.com

チェックボックスとサポートするテキストフィールドのグループ

チェックボックスとサポートフォームフィールドのグループをレイアウトする最良の方法は何ですか?

たとえば、このフォームでは、ユーザーはレポートの配信方法についていくつかの選択肢を選択できます。一部の選択肢には、電子メールアドレス、ファックス番号、フォルダの場所などの追加情報が必要です。

チェックボックスを互いに近づけて、ユーザーが1つまたは複数のレポート配信オプションを選択しやすくしたいと思います。以下は、チェックボックスとサポートするテキストフィールドのスクリーンショットです。適切なチェックボックスがマークされると、サポートするテキストフィールドがアクティブ/無効になります。

enter image description here

7

すべてのチェックボックスを1つにまとめようとするのではなく、縦にリスト下または横にフィールドを配置します。これにより、スキャンが簡単になり、チェックボックスとフィールドの間の関連付けが強化されます。

enter image description here

デザインではなく、ここで原則を提案しています。

5
JohnGB

チェックボックスを垂直に配置し、フィールドの右側に特定のチェックボックスの追加情報を含むフィールドを配置すると、より論理的に見えます。メールリストの増加を心配する場合は、固定幅のテキストフィールドと、右側に2つのボタン(編集とクリア)を使用できます。 [編集]を押すと、リストを編集するための別のフォームまたはコントロールが開始されます。[クリア]を押すと、リストがクリアされます。 enter image description here

2
Serg

John Bソリューションでは、関連するチェックボックスがアクティブな場合にのみ入力フィールドを表示できました。

例:

ファックスがチェックされている場合のみ、入力「ファックス番号」を表示します。

1