您将如何设计具有许多动态字段的表单？答案

【问题标题】：How would you design a form with many dynamic fields?您将如何设计具有许多动态字段的表单？
【发布时间】：2008-09-30 12:49:21
【问题描述】：

我们有一个表单，允许用户为字段动态添加输入。例如，如果您有一个用于跟踪项目的表单，您希望将任务动态添加到该项目。只是为了澄清我的语言：您为任务字段动态添加输入。问题是，我们有 50 个这样的字段。我们当前的解决方案在所有 50 个字段旁边显示一个加号 (+)，以允许他们为该字段添加另一个输入框。字段的标签位于字段的左侧，添加的每个输入框都位于当前输入框的下方。

请相信动态添加输入是正确的解决方案，请相信这是经过深思熟虑的，请相信这是用户想要的，请相信我们已经走上了其他各种道路，这是最好的解决方案。

我的问题是关于演示的：你会怎么做？

请保留 UI 设计的答案。我们已经确定了数据库架构。

更新

Current Solution 是一个基于 Web 的应用程序，它使用 JavaScript 动态添加新的输入，看起来非常类似于 Corey Trager 的绘图：

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

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

Repeat 50 times...

【问题讨论】：

标签： user-interface data-entry

【解决方案1】：

那么，您所描述的可能看起来像这样？如果没有，请您尝试“绘制”它吗？

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

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

这是网页还是其他技术？

【讨论】：

这正是我们今天所做的。感谢您提供了很棒的图表，我应该这样做来解释:-)
您肯定不需要每个字段旁边的 + 吗？您只需要在最后一个字段上使用它吗？

【解决方案2】：

这可能完全不合时宜，但取决于字段的要求，以及这是配置还是数据输入界面。

如果字段确实需要为数据输入打开，您可以将它们定义为字段名称和值的列表，并使用点击编辑在每个字段上动态放置输入框根据需要添加元素。

此解决方案可以减少视觉噪音并节省垂直空间。如您所见，表单输入比纯文本占用更多空间。您可以通过捕获选项卡事件并触发下一个字段的单击编辑功能来满足键盘用户的需求。

它可能看起来像这样。（刚刚点击 Foo 编辑内容）

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

(+) Add new field...

或

如果这是一个配置页面，即您在流程的另一个屏幕或阶段添加要填写的新字段，您可以按顺序定义字段列表，然后显示给用户以供数据输入。

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

然后根据当前 UI，这些字段将显示在一个巨大的网格中。

【讨论】：

不错。我会把它放在我要尝试的事情清单上。

【解决方案3】：

从@zachary 的建议中思考：

使用默认/上次保存的字段数显示为用户设计的表单。在表单的底部放置一个 DropDownButton，它有一个 + 图标和单词 Add Field (+ Add Field)。

下拉此按钮将显示所有可用字段的列表。当用户选择其中之一时，表单将增长（足以容纳新字段），带有标签的新字段将显示在表单底部，并且添加字段按钮将显示在新字段下方。

编辑：

按照 ASCII 图表的主题，这就是我认为我的建议的样子。

任务 [.......................]
[ + 添加任务 ▼]

Foo [........]
[ + 添加 Foo ▼]

【讨论】：

【解决方案4】：

最后一个任务字段附近的小 + 图标带有“添加新任务”链接。单击后，新任务字段会出现在当前最后一个任务下方。

【讨论】：

【解决方案5】：

我会使用拖放方式，让用户可以灵活定位。这甚至可以使用网络应用程序。例如，请参阅 Dropthings (http://www.dropthings.com/)。这提供了在 ASP.NET 环境中实现拖放所需的所有代码。

你使用的是什么环境？

【讨论】：

【解决方案6】：

如果这是一个网络应用程序，那么您可以使用 Javascript 来动态管理附加字段。根据您是否可以异步处理表单，您可以使用 Ajax，这将简化表单管理的某些方面。

基本上，每个任务都需要单独命名，然后您需要为他们选择附加的每个新字段附加一个新的唯一命名的表单输入元素。然后，您必须在提交表单之前使用 Javascript 遍历表单，或者在提交后遍历 POST 数据。

当然，这会引入 Javascript 作为您的网络应用程序的要求，这并不总是可行的。

【讨论】：

【解决方案7】：

好的，既然您已将我的图表添加到您的问题中，我的答案是......

我并不是说这更好，但它是一种替代方案。这是一种用点击代替水平滚动的不同方式。不要通过垂直滚动从“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     ]+

【讨论】：

【解决方案8】：

你能不能使用一个类似于 Facebook 实现的系统，它有一个文本框，但允许向其中添加多个项目？有预编码的解决方案，例如this one，用于mootools v1.2，或this one，用于jQuery。您甚至可以允许自动完成系统中已有的任务。

【讨论】：