Difference between visibility:hidden and display:none
Written on March 9, 2012
Display
Both visibility:hidden
and display:none
will hide the element. visibility:hidden
will still take up the space in the layout, whereas display:none
removes the element completely. It doesn’t take up any space, but the html code for it is still visible in the source file.
<!-- This displays a white space on page-->
<input class="form-control" type="text" style="visibility:hidden">
<!-- This displays absolute nothing on page-->
<input class="form-control" type="text" style="display:none;">
Form submit
Form input with display:none
will not submitted. Instead you should use visibility:hidden
and position:absolute
combined so that the input is hidden and doesn’t take up the empty space.
Fields that are “disabled” will be ignored and not submitted to server, so never set the input as disabled if you need its data.