您将如何设计具有许多动态字段的表单？
我们有一个表单，允许用户动态添加字段的输入。 例如，如果您有一个用于跟踪项目的表单，您希望动态地将任务添加到该项目。 只是为了澄清我的语言：您动态添加任务字段的输入。 问题是，我们有 50 个这样的字段。 我们当前的解决方案在所有 50 个字段旁边显示一个加号 (+)，以允许他们为该字段添加另一个输入框。 该字段的标签位于该字段的左侧，并且添加的每个输入框都位于当前输入框的下方。
请相信动态添加输入是正确的解决方案，请相信它是经过深思熟虑的，请相信这是用户想要的，请相信我们已经走了各种其他道路，这是最好的解决方案。
我的问题是关于演示的：你会怎么做？
UI设计的答案请保留。 我们已经弄清楚了数据库模式。
更新
当前解决方案是一个基于 Web 的应用程序，它使用 JavaScript 动态添加新输入，看起来与 Corey Trager 的绘图非常相似：
Task [.............] +
[.............] +
[.............] +
[.............] +
Foo [.............] +
[.............] +
[.............] +
Repeat 50 times...
We have a form that allows a user to dynamically add inputs for fields. For example if you have a form for tracking projects, you want to dynamically add tasks to that project. Just to clarify my language: you dynamically add inputs for the task field. The problem is, we have 50 of those fields. Our current solution presents all 50 fields with a plus (+) next to the field to allow them to add another input box for that field. The labels for the field are to the left of the field and each input box that is added goes below the current input box.
Please trust that dynamically adding inputs is the right solution, please trust that it has been thought out, please trust that this is what the users wants, please trust that we have gone down various other roads and this is the best solution.
My question is about presentation: How would you do it?
Please keep the answers to UI design. We already have the database schema figured out.
Update
Current Solution is a web based application that uses JavaScript to dynamically add new inputs and looks very similar to Corey Trager's drawing:
Task [.............] +
[.............] +
[.............] +
[.............] +
Foo [.............] +
[.............] +
[.............] +
Repeat 50 times...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
那么，您所描述的内容可能看起来像这样？ 如果没有的话，你可以尝试“画”它吗？
这是网页还是其他技术？
So, what you described can look something like this? If not, can you try "drawing" it please?
Is this a web page or other technology?
这可能完全不符合要求，但取决于字段的要求，以及这是配置还是数据输入接口。
如果字段 do 需要打开以进行数据输入，您可以将它们定义为字段名称和值的列表，并使用点击编辑功能根据需要在每个元素上动态放置输入框。
该解决方案可以减少视觉噪音并节省垂直空间。 正如您所看到的，表单输入比纯文本占用更多空间。 您可以通过捕获选项卡事件并触发下一个字段的单击编辑功能来满足键盘用户的需求。
它可能看起来像这样。 （刚刚单击 Foo 编辑内容）
或者
如果这是一个配置页面，即您添加要在流程中的另一个屏幕或阶段上填写的新字段的位置，您可以按顺序定义一个字段列表，然后显示给用户进行数据输入。
然后，这些字段将按照当前 UI 显示在一个巨大的网格中。
This may be completely off the mark, but depending on the requirements for the fields, and if this is the configuration or the data entry interface.
If the fields do need to be open for data entry, you could leave have them defined as a list of fieldnames and values, and use click-to-edit to dynamically place input boxes on each element as needed.
This solution could reduce visual noise as well as save vertical space. As you can see the form input takes up more space than plain text. You can cater for keyboard users by capturing tab events and triggering the next field's click to edit functionality.
It could look something like this. ( having just clicked on Foo to edit the content)
OR
If this is a configuration page, ie where you add new fields to be filled in on another screen or stage in the process, you could define a list of fields sequentially, which are then displayed to the user for data entry.
Then the fields are displayed in a huge grid as per the current UI.
思考 @zachary 建议的内容：
按照为用户设计的方式显示表单，并使用默认/上次保存的字段数。 在表单底部放置一个带有 + 图标和文字“添加字段”(+ 添加字段) 的 DropDownButton。
下拉此按钮将显示所有可用字段的列表。 当用户选择其中之一时，表单将增大（足以容纳新字段），带有标签的新字段将显示在表单底部，并且添加字段按钮将显示在新字段下方。
Edit:
为了遵循 ASCII 图的主题，我认为我的建议应该是这样的。
任务[................................]
[ + 添加任务 ▼]
Foo [................................]
[ + 添加 Foo ▼]
Thinking on from what @zachary suggested:
Display the form as it was designed to the user with the default/ last saved number of fields. At the bottom of the form place a DropDownButton that has a + icon and the words Add Field (+ Add Field).
Dropping down this button will show the list of all fields that are available. When the user selects one of these the form will grow (enough to house the new field) the new field with label will be displayed at the bottom of the form and the add field button will show below the new field.
Edit:
To follow on the theme of ASCII diagrams this was is what I think my suggesting would look like.
Task [......................]
[ + Add Task ▼]
Foo [......................]
[ + Add Foo ▼]
最后一个任务字段附近的小 + 图标，带有一个显示“添加新任务”的链接。 单击时，新任务字段将出现在当前最后一个任务下方。
Little + icon somewhere near the last task field with a link that says "Add new task". When clicked, new task field appears below current last task.
我会使用拖放方法，允许用户灵活定位。 即使使用网络应用程序也是可能的。 例如，请参见 Dropthings (http://www.dropthings.com/)。 这提供了在 ASP.NET 环境中实现拖放操作所需的所有代码。
您使用什么环境？
I would use a drag-and-drop approach, allowing the user flexibility in positioning. This is possible even using a web-application. See, for example, Dropthings (http://www.dropthings.com/). This provides all the code you'd need to implement drag-n-drop in an ASP.NET environment.
What environment are you using?
如果这是一个 Web 应用程序，那么您可以使用 Javascript 动态管理附加字段。 根据是否可以异步处理表单，您可以使用 Ajax，这会简化表单管理的某些方面。
基本上，每个任务都需要单独命名，然后您需要为他们选择附加的每个新字段附加一个新的唯一命名的表单输入元素。 然后，您必须在提交表单之前使用 Javascript 循环遍历表单，或者在提交后循环遍历 POST 数据。
当然，这会引入 Javascript 作为您的 Web 应用程序的要求，但这并不总是可行的。
If this is a web app then you could use Javascript to dynamically manage the additional fields. Depending on whether you can process the form asynchronously, you could use Ajax which would simplify some aspects of the form management.
Basically, each task would need an individually named and then you would need to append a new uniquely named form input element for each new field that they choose to append. Then you would have to loop through the form using Javascript before submitting the form or you would loop through the POST data after its submitted.
Of course, this introduces Javascript as a requirement for your web app which isn't always viable.
好吧，现在您已将我的图表添加到您的问题中，我的答案是......
我并不是说这更好，但它是一种替代方案。 这是用单击代替水平滚动的不同方法。 不要通过垂直滚动从“tasks”导航到“foo”再到“bar”，而是使用“tabs”，即使您必须将它们堆叠几行高。 它确实使按随机顺序导航变得更容易。 您甚至可以从此选项卡式视图来回切换到当前的“显示全部”视图。
Ok, now that you've added my diagram to your question, my answer is....
I'm not saying this is better, but it's an alternative. Here's a different way that replaces horizontal scrolling with clicking. Instead of navigating from "tasks" to "foo" to "bar" by vertical scrolling, use "tabs", even if you have to stack them several rows high. It does make it easier to navigate in a random order. You could even switch back and forth from this tabbed view to your current "show all" view.
你能不能使用类似于脸书实现的系统，它有一个文本框，但允许向其中添加多个项目？ 有一些预编码的解决方案，例如 这个，用于 mootools v1.2，或这个这是针对 jQuery 的。 您甚至可以允许自动完成系统中已有的任务。
Could you not use a system similar to that implemented by face book, that has a single textbox, but allows multiple items to be added to it? There are pre-coded solutions, such as this one, which is for mootools v1.2, or this one which is for jQuery. And you could even allow auto-complete of the tasks already in the system.