使用HTML表单覆盖HTML页面

Question

这是一个关于用表单覆盖html页面的最佳方式（或最佳方法的最小努力）的问题。在这种情况下，最佳意味着在满足功能要求的同时获得最佳用户体验。

假设我有一个简短的页面;用户必须输入一些财务细节。为了帮助用户输入其中一个字段的准确值，还有另一个更长的形式。只有在用户请求帮助时才需要显示较长的表单。

对于没有javascript的用户，单击链接将提交简短表单（在会话中保留已填充的字段），服务器将使用长格式进行响应。他们将提交长格式，服务器将提交的数据与持久数据相结合，并再次提供短格式 - 填充字段。

对于使用javascript的用户，我希望用长格式覆盖短格式页面（在灯箱样式中），允许它们填充长格式，然后返回到短格式，减少到服务器的往返。

我：

• 使用目标为长格式的iframe覆盖短格式页面？
• 请求ajax上的长格式并将其填入div？
• 完全在客户端生成长格式？
• 其他一些我没有想过的wizadry？

对最好的机制的简短解释确实非常好。非常感谢你！

Answer 1

我会考虑选项＃2。

当用户请求帮助时，将帮助表格动态加载到div中，您可以使用滑动抽屉效果的灯箱或其他任何内容。

如果可能的话，我会在客户端进行长格式的所有处理，并使用结果动态更新短格式。

Answer 2

我使用Colorbox这种东西非常好。

您可以内联或通过其他网址指定内容（这就是我所做的）。使用第二种方法可能更好，因为它可以使您的网页更加清洁，并且只在需要时才请求表单内容。这也意味着您可以回传到该表单本身（如果需要，可以通过AJAX）保持整个体验更清晰

查看here - 点击“标记此笑脸”。表单取自远程URL，并使用jQuery在表单内发回。它显然是你想要的简单版本，但看起来非常好。

对于你想要没有javascript的用户体面回退的情况，我会在网页上显示该表单但通过javascript隐藏，然后使用Colorbox在需要时加载使用该内容作为弹出窗口。