在显示中提交表单字段：无元素

Question

我有一个很长的表格，我将其分为 6 个步骤。加载表单时，所有步骤都会加载，但只有第一步可见。其余的 CSS 为

display:none

，因此它们是隐藏的。当步骤完成并使用 Javascript 进行验证时，当前步骤将设置为

display:none

，新步骤将设置为

display:block

。最后一步，用户提交表单。但是，正如预期的那样，仅提交页面上

display:block

元素中的字段。带有

display:none

的元素中所有已完成的字段都将被忽略。

有没有办法提交

display:none

元素内的字段？

如果不行，还有其他方法可以达到同样的效果吗？

Answer 1

将它们设置为

visibility:hidden

和

position:absolute

。这些字段不会发送到带有

display:none

的服务器，但会带有

visibility:hidden

。通过将“位置”切换为“绝对”，您应该获得相同的视觉效果。

更新 在任何当前浏览器中这似乎不再是问题（截至 2015 年 11 月）。即使显示设置为“无”，也会提交字段。但是，“禁用”的字段将继续不提交。

Answer 2

HTML4 第 17.13.2 节明确指出，即使使用 display:none 的隐藏控件也可能对提交有效。

https://www.w3.org/TR/html401/interact/forms.html

因此，如果浏览器忽略 display:none 那么它不完全支持 HTML。我建议切换到真正的浏览器。

Answer 3

如果您发现您的输入未通过

display: none;

提交，并且您希望您的元素不占用空间，还有另一个选项，我在任何地方都没有提到。

它似乎有效，但前提是您的元素没有子元素。

display: contents;

检查浏览器支持，因为它是一项新的 CSS 功能。

Answer 4

display:none - 表示元素从用户的视图中隐藏。 html 仍然可以看到它们，并且元素仍然会在当前版本的 Chrome 中提交，尽管被隐藏了。

Answer 5

许多旧版浏览器中存在错误，其中“display:none”以奇怪的方式删除项目...就像 2012 年之前的 Webkit 浏览器，其中“display:none”表示提交按钮，然后按“return” "，不会将表单字段数据提交到服务器。还有一些情况是，在“隐藏”类型的输入字段中添加“display:none”以将其隐藏在旧版 IE 浏览器中时，无法将该输入数据发送到服务器。

共识应该始终是不要使用“display:none”来隐藏表单字段数据或任何通常不显示的字段，但仍需要通过屏幕阅读器查看、提交表单字段数据或被读取通过搜索引擎。当我真正想从页面中暂时删除某些内容但稍后再次启用它时，我仅使用“display：none”。

下面是“display:none”的替代方案，它只是从用户视觉上隐藏该项目，并将其从页面流中完全删除，而不隐藏其内容或数据：

.hide {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
}