Question

我们有一个允许用户动态添加字段输入的表单。例如，如果您有用于跟踪项目的表单，则需要动态地向该项目添加任务。只是为了澄清我的语言：您动态添加任务字段的输入。问题是，我们有50个这样的领域。我们当前的解决方案为字段旁边的所有50个字段添加了一个加号（+），以允许它们为该字段添加另一个输入框。字段的标签位于字段的左侧，添加的每个输入框都位于当前输入框的下方。

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

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

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

更新

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

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

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

Repeat 50 times...

Answer 1

从@zachary的建议中思考：

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

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

<小时/> 修改

为了跟进ASCII图的主题，这就是我认为我的建议会是什么样的。

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

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

Answer 2

那么，你所描述的可能是这样的？如果没有，你可以尝试“画画”吗？

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

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

这是网页还是其他技术？

Answer 3

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

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

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

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

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

(+) Add new field...

OR

如果这是一个配置页面，即您要在其他屏幕或舞台上添加要填写的新字段，您可以按顺序定义字段列表，然后显示给用户以进行数据输入。 / p>

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

然后根据当前用户界面显示字段。

Answer 4

小+图标位于最后一个任务字段附近，其中包含“添加新任务”的链接。单击时，新任务字段将显示在当前上一个任务下方。

Answer 5

我会使用拖放式方法，让用户灵活定位。即使使用Web应用程序也可以这样做。例如，参见Dropthings（http://www.dropthings.com/）。这提供了在ASP.NET环境中实现drag-n-drop所需的所有代码。

您使用的是什么环境？

Answer 6

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

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

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

Answer 7

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

我不是说这更好，但它是另一种选择。这是一种用点击替换水平滚动的不同方法。通过垂直滚动而不是从“任务”导航到“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     ]+

Answer 8

您是否可以使用类似于脸书所实施的系统，该系统具有单个文本框，但允许添加多个项目？有预编码的解决方案，例如this one，用于mootools v1.2，或this one用于jQuery。您甚至可以允许自动完成系统中已有的任务。

你会如何设计一个包含许多动态字段的表单？

8 个答案: