我们将如何设计具有许多动态字段的表单?

时间:2020-03-06 14:55:14  来源:igfitidea点击:

我们有一个允许用户动态添加字段输入的表单。例如,如果我们有一个用于跟踪项目的表单,则想动态地向该项目添加任务。只是为了阐明我的语言:我们可以动态添加任务字段的输入。问题是,我们有50个字段。我们当前的解决方案在所有50个字段旁边显示一个加号(+),以允许他们为该字段添加另一个输入框。该字段的标签位于该字段的左侧,添加的每个输入框都位于当前输入框的下方。

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

我的问题是关于演示文稿:我们将如何做?

请保留用户界面设计的答案。我们已经弄清楚了数据库模式。

更新

当前解决方案是一个基于Web的应用程序,使用JavaScript动态添加新输入,外观与Corey Trager的绘图非常相似:

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

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

Repeat 50 times...

解决方案

最后一个任务字段附近某处的小+图标,上面带有一个链接,上面写着"添加新任务"。单击后,新任务字段将显示在当前上一个任务下方。

我将使用拖放方法,使用户可以灵活地定位。即使使用Web应用程序,这也是可能的。参见,例如,Dropthings(http://www.dropthings.com/)。这提供了在ASP.NET环境中实现拖放的所有代码。

我们正在使用什么环境?

从@zachary的建议中考虑:

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

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

编辑:

遵循ASCII图的主题,这就是我的建议。

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

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

那么,我们所描述的内容可能看起来像这样?如果没有,我们可以尝试"绘画"吗?

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

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

这是网页还是其他技术?

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

基本上,每个任务都需要一个单独命名的名称,然后我们需要为其选择要添加的每个新字段添加一个新的唯一命名的表单输入元素。然后,我们将不得不在提交表单之前使用Javascript遍历表单,或者在提交POST数据后遍历POST数据。

当然,这将Javascript引入了Web应用程序的要求,但并不总是可行的。

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

如果确实需要打开这些字段以进行数据输入,则可以将其定义为字段名和值的列表,然后使用单击编辑以根据需要在每个元素上动态放置输入框。

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

它可能看起来像这样。 (刚刚单击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将字段显示在巨大的网格中。

好的,既然我们已将我的图表添加到问题中,那么我的答案是...。

我并不是说这更好,但这是另一种选择。这是用单击代替水平滚动的另一种方法。不用通过垂直滚动从"任务"导航到" foo"再导航到" bar",而是使用"选项卡",即使我们必须将它们堆叠成几行高。它确实使按随机顺序导航变得更加容易。我们甚至可以从此选项卡式视图来回切换到当前的"显示全部"视图。

[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     ]+

我们是否可以使用类似于脸书实现的系统,该系统只有一个文本框,但允许向其中添加多个项目?有预编码的解决方案,例如适用于mootools v1.2的此解决方案,或者适用于jQuery的此解决方案。我们甚至可以允许自动完成系统中已经存在的任务。