Как бы вы спроектировали форму с множеством динамических полей?

Итак, то, что вы описали, может выглядеть примерно так? Если нет, можете ли вы попробовать "нарисовать" его, пожалуйста?

Task     [.............] +  
         [.............] +  
         [.............] +  
         [.............] +

Foo      [.............] +
         [.............] +
         [.............] +

Это веб-страница или другая технология?

Это может быть совершенно не по адресу, но в зависимости от требований к полям, и если это конфигурация или интерфейс ввода данных.

Если поля do должны быть открыты для ввода данных, вы можете оставить их определенными как список имен полей и значений и использовать редактирование щелчком для динамического размещения полей ввода в каждом элементе по мере необходимости. .

Это решение могло бы уменьшить визуальный шум, а также сэкономить пространство по вертикали. Как видите, ввод формы занимает больше места, чем обычный текст. Вы можете обслуживать пользователей клавиатуры, перехватывая события вкладок и вызывая щелчок следующего поля для редактирования функций.

Это может выглядеть примерно так. (просто нажав на Foo, чтобы отредактировать содержимое)

Name   : Joe Blogs
Phone  : 555-1234
Cheese : Stilton
        -----------
Foo     | SNAFU   |    
        -----------
Bar    : fubar
Fifty  : Whatever

(+) Add new field...

OR

Если это страница конфигурации, т. е. где вы добавляете новые поля для заполнения на другом экране или этапе процесса, вы можете определить список полей последовательно, которые затем отображаются пользователю для ввода данных.

              -------------------------------------------------
Define Fields | name, phone, cheese, foo, bar ..(etc).. fifty |
              -------------------------------------------------

Затем поля отображаются в огромной сетке в соответствии с текущим пользовательским интерфейсом.

Размышляя над тем, что предложил @zachary:

Отобразите форму так, как она была разработана для пользователя, с количеством полей по умолчанию/последним сохраненным. Внизу формы поместите кнопку DropDownButton со значком + и словами Добавить поле (+ Добавить поле).

Если открыть эту кнопку, отобразится список всех доступных полей. Когда пользователь выбирает один из них, форма будет увеличиваться (достаточно для размещения нового поля), новое поле с меткой будет отображаться в нижней части формы, а кнопка добавления поля будет отображаться под новым полем.

Чтобы продолжить тему диаграмм ASCII, я думаю, что мое предложение будет выглядеть так.

Задача [.....................]
[ + Добавить задачу ▼]

Фу [......................]
[ + Добавить Фу ▼]

Маленький значок + где-то рядом с последним полем задачи со ссылкой «Добавить новую задачу». При нажатии новое поле задачи появляется под текущим последним заданием.

Я бы использовал подход перетаскивания, предоставляющий пользователю гибкость в позиционировании. Это возможно даже с помощью веб-приложения. См., например, Dropthings (http://www.dropthings.com/). Это предоставляет весь код, необходимый для реализации перетаскивания в среде ASP.NET.

Какую среду вы используете?

Если это веб-приложение, вы можете использовать Javascript для динамического управления дополнительными полями. В зависимости от того, можете ли вы обрабатывать форму асинхронно, вы можете использовать Ajax, который упростит некоторые аспекты управления формой.

По сути, каждой задаче потребуется индивидуальное имя, а затем вам нужно будет добавить новый элемент ввода формы с уникальным именем для каждого нового поля, которое они решат добавить. Затем вам нужно будет пройти через форму, используя Javascript, перед отправкой формы, или вы должны будете пройти через данные POST после их отправки.

Конечно, это вводит Javascript в качестве требования для вашего веб-приложения, что не всегда жизнеспособно.

Хорошо, теперь, когда вы добавили мою диаграмму к своему вопросу, мой ответ....

Я не говорю, что это лучше, но это альтернатива. Вот другой способ, который заменяет горизонтальную прокрутку кликом. Вместо перехода от «tasks» к «foo» и «bar» с помощью вертикальной прокрутки используйте «tabs», даже если вам нужно расположить их в несколько рядов. Это облегчает навигацию в случайном порядке. Вы даже можете переключаться между этим представлением с вкладками и обратно к текущему представлению «показать все».

[task][foo][another tab][another tab][etc][etc][etc][etc][etc][etc]
[row2][fred][another tab][etc][etc][etc][etc][etc][etc][etc]
[row3][another tab][wilma][etc][etc][etc][etc][etc][etc][etc]

[task1     ]+
[task2     }+
[task3     ]+ 

Не могли бы вы использовать систему, подобную той, что реализована в facebook, которая имеет одно текстовое поле, но позволяет добавлять в него несколько элементов? Существуют готовые решения, такие как это, предназначенное для mootools. v1.2 или этот который для jQuery. И вы даже можете разрешить автозавершение задач, уже имеющихся в системе.