17

I noticed two patterns in my web app used in forms, and I can't remember how they got there.

One passes tokens around with <input ... type="hidden" />, and other parts use <input ... hidden />.

I looked at the MDN page for the attribute and the type=, and they seem exactly the same.

I went to this question, and it seemed to indicate that the hidden attribute would hide the display, but not from other user-output methods (like screen readers). But it doesn't say anything about using type="hidden".

This question talks about display and the type="hidden", but doesn't mention other types of user-output methods.

How are these two handled differently by different output devices? How are they handled differently by forms? Are they treated differently by the DOM or DOM-stuff?

Is there some functional difference between these two? Is there some "best practices" difference? Some "expected way to do this" difference?

Community
  • 1
  • 1
r12
  • 1,712
  • 1
  • 15
  • 25
  • 8
    The `hidden` attribute is presentational, and similar to `display:none`, whereas the ``, while not visible, is meant to convey form data. The `hidden` attribute can be manipulated via CSS and JavaScript and can aid screen readers. – j08691 May 16 '17 at 00:35
  • https://caniuse.com/?search=hidden – Yevgeniy Afanasyev Jun 21 '21 at 06:59

2 Answers2

5

When you have markup such as <input hidden> it's actually a shortcut for <input hidden="hidden"> which is obviously different from <input type="hidden">.

The documentation of hidden attribute describes it as basically same as attribute style="display:none" without explicitly saying so to allow theoretical user agents (UA) that support attribute hidden but do not support CSS. At least in theory attribute hidden could also work when Content-Security-Policy prevents style attribute from working but this detail is not defined anywhere as far as I know.

Elements hidden with attribute hidden="hidden" can still be submitted because the above documentation explicitly says

Hidden elements shouldn't be linked from non-hidden elements, and elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit. Elements and scripts may, however, refer to elements that are hidden in other contexts.

Real world user agents (e.g. Firefox and Chrome) may not send the inputs with effective CSS style display:none but that's not actually the behavior described by the documentation.

The documentation of input type attribute value hidden explicitly says that inputs with this attribute will be submitted for that form element but cannot be modified or viewed by the user. (However, this cannot be used to avoid doing server-side security checks because user can still use e.g. developer tools to inspect or modify the value.)

TL;DR: You should use type="hidden" if you want to submit a hidden form element and hidden="hidden" or CSS styles if you just want to hide the element from the visitor. The difference is more semantic than practical but type="hidden" is better supported by really old user agents.

Mikko Rantalainen
  • 14,132
  • 10
  • 74
  • 112
  • `type="hidden"` does NOT disable the submission of a form element. The very documentation you linked states that it lets you "include data that cannot be seen or modified by users when a form is submitted". – Fugi Jan 04 '22 at 01:35
  • Thanks for the feedback, I don't know what I was thinking when I wrote the erroneous claims – I've been writing web applications for 20 years as my daily job so I should know well enough how `type=hidden` works in real world but somehow I still wrote total nonsense. I fixed the answer now. – Mikko Rantalainen Jan 06 '22 at 12:47
0

Also in some browsers, using the attribute "hidden" limits the input content in the attribute "value", p.e, in the case of chrome for iOS this limit is set to 500ko. Another difference is that the attribute "hidden" is not 100% supported as if today.

Emmanuel Harguindey
  • 31
  • 6