Difference between input[type=hidden] and visibility="hidden"

Question

What's the difference between input[type=hidden] and visibility : hidden; ?

One is an input element, the other is a style. – j08691 Sep 07 '13 at 15:33 — j08691, Sep 07 '13 at 15:33
I think he really meant to ask about `` versus ``. – Barmar Sep 07 '13 at 15:35 — Barmar, Sep 07 '13 at 15:35

Rahul Tripathi · Accepted Answer · 2013-09-07T15:40:03.623

The first one is input element and the second is used for style in CSS2.

visibility: hidden; The visibility property specifies whether or not an element is visible.

input[type=hidden] :- HIDDEN is a TYPE attribute value to the INPUT element for FORMs. It indicates a form field that does not appear visibly in the document and that the user does not interact with. It can be used to transmit state information about the client or server.

score 3 · Answer 2 · answered Sep 07 '13 at 15:35

3

I’m assuming you mean what is the difference between <input type="hidden" /> and with CSS

.hidden {
    display: none;
}

If that’s the case then the first one is a DOM type but still in the structure, the second is a style method to remove the item from the DOM structure.

answered Sep 07 '13 at 15:35

Phillip Berger

2,317
1
11
30

5

`display: none` doesn't remove the item from the DOM, it just keeps it from being rendered. – Barmar Sep 07 '13 at 15:36
3

`display:none` is not `visibility: hidden`, see: [What is the difference between visibility:hidden and display:none?](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) – Luke Oct 27 '16 at 14:56

score 2 · Answer 3 · answered Sep 07 '13 at 15:34

2

input[type=hidden] is definitely a selector, which matches every input element which has type attribute value set to hidden.

I have no idea what visibility="hidden" is. It could be CSS property, but incorrect one. It should be visibility: hidden; to be valid.

answered Sep 07 '13 at 15:34

MarcinJuraszek

124,003
15
196
263

@Omega That's interesting. Any link to source about that usage? – MarcinJuraszek Sep 07 '13 at 15:36
1

Hmm, it's exactly what I've wrote about: it has to be `visibility: hidden` to be valid CSS. His text uses `"`s and `=`, and is not correct CSS. – MarcinJuraszek Sep 07 '13 at 15:40

score 2 · Answer 4 · answered Sep 07 '13 at 15:35

2

input[type=hidden]

This is a DOM selector (jQuery, CSS, etc.) for any input elements where the type attribute is "hidden". It doesn't have anything to do with actually displaying or hiding those elements, aside from the fact that browsers don't render <input type="hidden" /> elements.

visibility="hidden"

This is setting the CSS visibility property to the value "hidden" which would tell the browser to not render whatever element(s) to which you're applying that attribute. This is entirely about display of HTML elements and doesn't have anything to do with selectors or form elements as the other example does.

answered Sep 07 '13 at 15:35

David

208,112
36
198
279

ahem... "CSS visibility attribute", really? – Christophe Sep 07 '13 at 15:38
@Christophe: "Property" then? It's clearly being set using JavaScript in some way, possibly incorrectly. But it's a CSS property nonetheless. – David Sep 07 '13 at 15:40

Difference between input[type=hidden] and visibility="hidden"

4 Answers4

Linked