如何构建多阶段 Web 表单？答案

【问题标题】：How do I build a multi-stage web form?如何构建多阶段 Web 表单？
【发布时间】：2012-05-19 15:44:21
【问题描述】：

我正在尝试构建一个具有多个阶段的网络表单。我正在将它从 Stack Overflow / Stack Exchange 标记网络表单中提取出来。问题是，我不确定如何触发“下一阶段”操作。

为了说明，如果想在 Stack Overflow 上标记问题，请单击 flag，然后弹出窗口提示您做出选择。如果您选择第二个选项（“它不属于这里，或者它是重复的”），表单会自动将您带到第二个屏幕。

第一屏：

点击后会自动重定向到：

问题是我不知道底层触发器是什么。单击该单选按钮如何将最终用户发送到下一个屏幕？

我尝试检查来源，但我感觉我只看到了一半：

我发现没有多少 HTML 教程有任何与此类似的练习示例。我怀疑这是 JavaScript，但我找不到会触发这些操作的链接 .js 文件。

那么：网络表单如何在点击时自动重定向？作为后续，如果它使用 JavaScript，我可以使用仅 HTML/CSS 的解决方法吗？

【问题讨论】：

【解决方案1】：

在比框架更低的层次上考虑这一点可能会有所帮助。有两种方法可以制作多阶段表单。

第一种（通常也是较旧的）方法是将状态存储在服务器上。表单的每个阶段实际上是一个单独的表单，客户端通过问卷的进度保存在服务器上（例如，作为会话数据的一部分）。

正如您所怀疑的，第二种方式（更现代的方式）是使用 JavaScript。在这种情况下，实际上几乎没有什么黑魔法，而且点击时根本没有自动重定向。您所做的只是有一个很长的表单，您可以根据用户的选择显示/隐藏一些元素（当然，您可以有多个 <form> 元素来显示/隐藏）。

【讨论】：

【解决方案2】：

好吧，我会使用某种 jQuery 向导插件并根据我的需要进行调整。我是最近才做的，没那么难。你应该试试 SmartWizard 3.0，它非常活跃，上一个版本大约是 2 个月前，编码人员很快回答了我的问题。

您可以触发向导前进到下一步，将事件链接到单击单选按钮的操作。

祝你好运:)

【讨论】：