type="hidden" 和 hidden 作为属性的区别

Question

我注意到我的网络应用中有两种模式用于表单，但我不记得它们是如何到达那里的。

一个使用<input ... type="hidden" />传递令牌，其他部分使用<input ... hidden />。

我查看了 attribute 和 type= 的 MDN 页面，它们看起来完全一样。

我去了this question，它似乎表明hidden 属性会隐藏显示，但不会隐藏其他用户输出方法（如屏幕阅读器）。但它并没有说明使用type="hidden"。

This question 谈到了显示和type="hidden"，但没有提到其他类型的用户输出方法。

不同的输出设备如何以不同的方式处理这两者？表格如何以不同方式处理它们？ DOM 或 DOM-stuff 对它们的处理方式不同吗？

这两者在功能上有区别吗？有一些“最佳实践”的区别吗？一些“预期的方式来做到这一点”的区别？

Answer 1

当您有<input hidden> 之类的标记时，它实际上是<input hidden="hidden"> 的快捷方式，它明显不同于<input type="hidden">。

documentation of hidden attribute 将其描述为与属性style="display:none" 基本相同，但没有明确说明允许支持属性hidden 但不支持 CSS 的理论用户代理 (UA)。至少在理论上，当Content-Security-Policy 阻止style 属性工作时，属性hidden 也可以工作，但据我所知，这个细节在任何地方都没有定义。

属性hidden="hidden" 隐藏的元素仍然可以提交，因为上述文档明确说明

隐藏元素不应与非隐藏元素链接，并且 作为隐藏元素后代的元素仍然处于活动状态， 这意味着脚本元素仍然可以执行并且形成元素 仍然可以提交。但是，元素和脚本可以指代元素 隐藏在其他上下文中。

现实世界的用户代理（例如 Firefox 和 Chrome）可能不会使用有效的 CSS 样式 display:none 发送输入，但这实际上不是文档中描述的行为。

documentation of input type attribute value hidden 明确表示具有此属性的输入将提交给该表单元素，但用户不能修改或查看。 （但是，这不能用于避免进行服务器端安全检查，因为用户仍然可以使用例如开发人员工具来检查或修改值。）

TL;DR:如果你想提交隐藏的表单元素，你应该使用type="hidden"，如果你只是想对访问者隐藏元素，你应该使用hidden="hidden"或CSS样式。区别在于语义而非实际，但 type="hidden" 得到真正老用户代理的更好支持。

Answer 2

同样在某些浏览器中，使用“隐藏”属性将输入内容限制在“值”属性中，例如，对于 iOS 版 chrome，此限制设置为 500ko。 另一个区别是属性“隐藏”is not 100% supported 就像今天一样。