使用type：'hidden'隐藏输入字段vs使用带display：none的类

Question

我的网页上有几个隐藏的表单字段，用于将数据传递到服务器端。出于调试目的，我觉得隐藏所有符合条件的输入字段比仅将它们作为隐藏类的一部分比在每个输入字段上设置type = hidden属性更容易。

每当我需要调试时，我都可以轻松修改该类属性以进入调试模式。当然，这两种方法都可以隐藏输入字段，但我不确定为什么这种方法（通过类隐藏）在现实生活中没有被广泛使用。你能否说一下应该首选的方法？

Answer 1

<input type="hidden">不会触发输入验证，自动完成和其他与用户交互相关的事件。它旨在保存原始数据，无需用户直接输入。

但是视觉上隐藏的<input type="text">仍将被视为用户交互组件。并且在某些设备上启用了视觉辅助功能，它将不会隐藏，也无法提供您期望的一致性。这就是为什么不这样做的原因。

EG。 <input type="hidden">不会自动完成它，或者在刷新页面之前保留输入的数据，或者阻止提交表单以进行失败的类型验证甚至无法看到。

Answer 2

CSS方法对可用性和可访问性不利。想想有CSS禁用的人（非常旧的手机，有屏幕阅读器的人），他们不会像你期望的那样呈现你的CSS，并且所有荣耀的输入都会显示给用户。

隐藏输入应该用于隐含用户输入，这意味着输入来自用户，但暗示并且不需要手动输入。

您的问题更多地放在type="hidden"方法上。

Answer 3

我建议使用<input type="hidden" />，因为它是保存用户输入值的标准HTML方式。如果您使用type的其他属性并将其隐藏css，则可能会出现一个问题，即当css无法加载时，input control将会显示。

Answer 4

我认为您的问题是调试表单字段的最佳方法。我建议将它们保存为HTML中的type ='hidden'。这对您，您的用户以及页面的语义解释都是最好的。

相反，请使用Chrome Developer Tools之类的工具进行调试。这样您就可以轻松查看隐藏字段的值。