web-dev-qa-db-ja.com

データベースから取得したフィールドを持つ動的フォームを設計するにはどうすればよいですか?

私のチームは、アプリケーションフォームをサポートするための設計を必要とするこの特定の注文依頼プロジェクトに取り組んでいます。フィールドはデータベースに基づいて生成されます。以下は、アプリケーションフォームの静的なモックアップです。

enter image description here

ただし、実際の製品では、各セクションが前のセクションからユーザーによって提供された値に依存することを意味する動的なフォームにしたいと考えています。たとえば、別の県に住んでいる場合は、連絡先情報ではなく、位置情報の後に別の情報を求められる場合があります。

ここでの問題は、データベースに変更が加えられたり、フォームがユーザーに提示される方法の設計を台無しにしたりする可能性があることです。連絡先の名前が長くなる可能性があるため、ユーザーは入力するテキストフィールドが長くなるため、DSL番号フィールドはどこに配置されますか?

私たちはいくつかのアプローチを検討してきましたが、その1つは、フィールドをグループに定義し、各グループがその部分的なビューしか持たないことです。アプリケーションへの入力が完了すると、ユーザーが入力した値に基づいて、次のセクションがフォームに追加されます。

それがこの問題に対する正しいアプローチかどうか疑問に思っています。この動的フィールドを設計するために採用できる一般的なアプローチは何ですか。この問題は理解するのが難しい場合があることを理解しており、説明に最善を尽くしています。ただし、ご不明な点がございましたら、お気軽にお問い合わせください。

シナリオ

ユーザーは注文リクエストを出したいと思っており、最初に必要なことは、必要なサービスを選択することです。このセクションには、次のセクションが表示されます。

enter image description here

ドロップダウンからサービスを選択した後、ユーザーは場所情報セクションに入力して入力する必要があります。このロケーション情報は、ユーザーが選択したサービスに基づいてデータベースから生成されます。ユーザーが別のサービスを選択した場合、場所情報の代わりに別のセクションが表示されます。ユーザーは場所情報を入力し、フォームに入力します。

2
TheBokiya

データベースの最も長いエントリに応じてサイズを変更するのではなく、フィールドの最大長を設定することをお勧めします。たとえば、[連絡先の名前]フィールドは最大200文字に設定できます。これは、設定したフォームの配置を安定させるのに役立ちます。ただし、それが不可能な場合は、「行ごとに1つのフィールド」レイアウトを使用できます。 enter image description here

オプション1-入力に基づいてテキストボックスの高さを動的に増やし、幅を一定に保ちます。

オプション2-テキストボックスよりも大きい場合、テキストを非表示にします(この方法は、「入力が予測サイズよりも大きい」ことがまれな場合に推奨されます)。

フィールドの長さが変化しても、ここでのレイアウトは妨げられません。

1
Dishita Shah