Difference between type="hidden" and hidden as an attribute

Question

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?

Answer 1

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.

Answer 2

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.