É uma das propriedades ou atributos mais usados.
Define se um item deve ou não ser visivel ao usuário.
O motivo para esconder o item são diversos e até algumas implementações técnicas de funcionalidades utilizam esse recurso.
Por exemplo, podemos ter o caso de um texto que anteriormente era válido mas hoje é irrelevante.
Já tive trechos de páginas que pediram para retirar e eu só coloquei hidden...logo depois pediram para voltar o item e meu trabalho foi pequeno graças a intuição técnica.
Outro caso onde se usa muito hidden é no processo de retorno de dados ao servidor. Quando for dado submit no form precisamos de mais informações e estas não são relevantes ao usuário por isso são escondidas.
Outro uso do hidden é na interface com o usuário. Menus podem ser exibidos e escondidos conforme o usuário clica num item.
Usos do Hidden : Input type hidden
<input type="hidden" value="Escondido"/>
Usos do Hidden : Input type text visibility:Hidden
<input type="text" value"Escondido" style="visibility:hidden" />
Nota : Display:none; retira o campo do documento, sequer ocupa espaço.
visibility:hidden não exibe o campo no documento mas o espaço para exibí-lo é reservado
no documento. Acredito que o Display:none no submit do form também não retorne as
informações ao servidor, não é enviado de volta.
Outro detalhe é que a tag com estilo ou hidden ela continua ocupando espaço no documento, visível ou não.
Exemplo de funcionamento 1 - Input type text:
Código do exemplo acima:
<script>
function exibeesconde() {
var x = document.getElementById("txtexibeesconde");
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
</script>
<input id="txtexibeesconde" type="text" value="Escondido" /><button onclick="exibeesconde()">Exibe/Esconde</button>
Exemplo de funcionamento 2 - Menu :