我有一个很长的表格，我已经把它分成了 6 个步骤。当表单被加载时，所有的步骤都被加载，但只有第一步是可见的。其余的有 CSS 的，display:none所以它们是隐藏的。当一个步骤完成并使用 Javascript 验证时，当前步骤设置为display:none，新步骤设置为display:block。在最后一步，用户提交表单。但是，正如预期的那样，仅display:block提交页面元素中的字段。元素中所有已完成的字段都将display:none被忽略。
有没有办法提交display:none元素内的字段？
如果没有，有没有其他方法可以达到同样的效果？
将它们设置为visibility:hidden和position:absolute。这些字段不会用 发送到服务器display:none，但会用visibility:hidden。通过将“位置”切换为“绝对”，您应该获得相同的视觉效果。
更新这在任何当前浏览器中似乎不再是问题（截至 2015 年 11 月）。即使将显示设置为“无”，也会提交字段。但是，“禁用”的字段将继续不被提交。
HTML4 的第 17.13.2 节明确指出，即使是使用 display:none 的隐藏控件也可能对提交有效。
https://www.w3.org/TR/html401/interact/forms.html
所以如果浏览器忽略 display:none 那么它就不是完全支持 HTML 的。我建议切换到真正的浏览器。
许多旧浏览器存在错误，其中“display:none”以奇怪的方式删除项目......就像2012年之前的Webkit浏览器，其中“display:none”说一个提交按钮，然后按“return”，不会提交表单字段数据到服务器。在旧的 IE 浏览器中，还存在将“display:none”添加到“hidden”类型的输入字段以隐藏它们的情况，但无法将该输入数据发送到服务器。
共识应该始终是不使用“display:none”来隐藏表单字段数据或任何通常不显示的字段，但仍然需要被屏幕阅读器看到，提交表单字段数据，或被阅读搜索引擎。当我真的想暂时从页面中删除某些内容但稍后再次启用它时，我只使用“display:none” 。
下面是“display:none”的替代方案，它只是在视觉上对用户隐藏项目，并将其从页面流中完全删除，而不隐藏其内容或数据：
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
visibility: hidden !important;
}
如果您发现您的输入没有提交，display: none;并且您希望您的元素不占用空间，那么还有一个我在任何地方都没有看到的选项。
它似乎有效，但前提是您的元素没有子元素。
display: contents;
检查浏览器支持，因为它是一个新的 CSS 功能。