製品の基本情報を含むテーブルがあります。行をクリックすると、ユーザーが特定の情報を編集できるその製品の詳細が(同じページに)表示されます。製品の行をクリックすると展開される各製品の間に非表示のテーブル行を使用してみました。
その問題は、<form>
要素はテーブル内では許可されていないので、これは私には適切ではないと感じています。この問題を解決するためのより良い方法があるはずですか?
2つのパターンが思い浮かびます:
行の編集をクリックするとポップアップモーダルフォーム:
または
行をクリックしたら、下の編集フォームを配置します。
データグリッドの下に読み込まれる「詳細情報」がユーザーに表示されない可能性があるため、ポップアップモーダルフォームの方が少し良いことをお勧めします。
アイテムのリストの下にリストを表示するのに最適なデザインですか? 。提案の1つは、特にニーズに関連しているようです。
これはネストされたテーブル行を使用し、シナリオで必要なデータのインライン編集を可能にします。
(注:テーブルでの<form>
の使用に関する制限は不明ですが、ASPにはインラインテーブル編集のサポートが組み込まれているため、おそらくそれを実装するための意味論的に妥当な方法がいくつかあるに違いありませんが、UXの観点からは、それは説得力のある要件ではありません。
おそらくテーブル内で仕切りを使用していますか?それが必ずしも「修正」であるかどうかはわかりませんが、それは確かに試す価値のあるオプションです。
テーブル上でモーダルウィンドウを使用する場合の1つの問題は、テーブルの情報が後ろにあり、ユーザーが必要に応じてそれを表示できない可能性があることです。
Designing Web Interfaces を参照してください