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.