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

Question

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

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

Answer 1

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

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

例如.a <input type="hidden">不会自动完成它自己,或者在刷新页面之前保留输入的数据,或者防止表单被提交以进行失败的类型验证甚至都看不到.

Answer 2

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

隐藏的输入应该用于隐含的用户输入,即意味着来自用户的输入,但是暗示并且不需要手动输入.

你的问题更多地放在type="hidden"方法上.