在display:none元素中提交表单字段

Submit form fields inside display:none element

本文关键字：提交 表单 字段 元素 display none      更新时间：2023-09-26

我有一个很长的表单，我把它分成了6个步骤。加载表单时，将加载所有步骤，但只有第一步是可见的。其余的CSS是display:none，所以它们是隐藏的。当一个步骤用Javascript完成并验证时，当前步骤被设置为display:none，新步骤被设置为display:block。在最后一步中，用户提交表单。但是，正如预期的那样，只提交页面上display:block元素中的字段。所有具有display:none的元素中已完成的字段将被忽略。

是否有办法提交display:none元素内的字段?

如果没有，是否有其他方法可以达到相同的效果?

将它们设置为visibility:hidden和position:absolute。这些字段不会用display:none发送到服务器，但会用visibility:hidden发送。通过将"position"切换为"absolute"，你应该得到相同的视觉效果。

Update这在任何当前浏览器中(截至2015年11月)似乎不再是一个问题。即使display设置为"none"，也会提交字段。然而，被"禁用"的字段将继续不被提交。

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

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

所以如果浏览器忽略display:none，那么它不是完全支持html的。我建议切换到一个真正的浏览器

如果你发现你的输入没有与display: none;一起提交，并且你希望你的元素不占用空间还有另一个选项，我没有看到任何地方提到。

这似乎工作，但只有当你的元素没有子元素。
display: contents;

检查浏览器的支持，因为它是一个新的CSS特性

display:none -不表示表单元素不提交(只是不显示)…

很多老版本的浏览器都存在"display:none"以奇怪的方式删除一个项目…例如Webkit浏览器，其中"display:none"在一个提交按钮上，然后按下"返回"，不会将表单字段数据提交给服务器。也有"display:none"添加到"hidden"类型的输入字段将它们隐藏在旧的IE浏览器中，无法将输入数据发送到服务器。

共识应该始终是不要使用"display:none"隐藏表单字段数据或任何通常不显示但仍需要被屏幕阅读器看到的字段，提交表单字段数据或被搜索引擎读取。我只使用"display:none"当我真的想从页面上暂时删除但稍后又启用它时。

下面是"display:none"这只是在视觉上对用户隐藏了项目，并将其完全从页面流中删除，而不隐藏其内容或数据:

.hide {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
}
相关文章：