Um formulário com campos que se escondem com DHTML

Como fazer um formulário que tem alguns campos que se mostram umas vezes sim, e outras não, ou seja, algumas opções se podem ocultar dependendo das ações do usuário.

Certamente já vimos algumas vezes um formulário, ou qualquer outro elemento de uma página, que se mostra e se oculta dependendo de uma ação do usuário. Neste artigo veremos como fazer um formulário que tem alguns campos à vista e outros não. O visitante dispõe de um campo checkbox para mostrar o formulário parcial ou o formulário completo. Quando o checkbox está ativado, se mostram todos os campos e quando está desativado se mostram só alguns.

Faremos uso das bibliotecas xLibrary, que servem para fazer DHTML compatível com todos os navegadores. Esta biblioteca e outros exemplos de seu uso estão descritos no Workshop de Cross-Browser DHTML.

O melhor para te ruma idéia exata dos objetivos do manual é vê-lo em uma janela a parte.

A camada com os campos opcionais, à princípio não tem que ser visto e o checkbox deve aparecer desativado. Uma vez que se ative o checkbox, a camada com os campos opcionais deve ser mostrada.

Para realizar este exemplo, criamos 3

diferentes. Um com os campos iniciais do formulário, outro com os opcionais (que se podem mostrar ou ocultar) e um último com os campos que há no final do formulário.

O código HTML seria o seguinte:

<form name=f1>
<div id=camadainicio>
<table cellspacing="2" cellpadding="2" border="0">
<tr>
   <td width=140>Nome:</td>
   <td><input type="text" name="nome" size="25"></td>
</tr>
<tr>
   <td>Sobrenomes:</td>
   <td><input type="text" name="idade" size="3"></td>
</tr>
<tr>
   <td>Expandir formulario:</td>
   <td><input type="checkbox" name="expandir" value="1" onclick="expandir_formulario()"></td>
</tr>
</table>
</div>
<div id=camadaexpansao>
<table cellspacing="2" cellpadding="2" border="0">
<tr>
   <td width=140>Sexo:</td>
   <td><input type="text" name="sexo" size="25"></td>
</tr>
<tr>
   <td>Idade:</td>
   <td><input type="text" name="idade" size="3"></td>
</tr>
</table>
</div>
<div id=camadafinal>
<table cellspacing="2" cellpadding="2" border="0">
<tr>
   <td width=140>Comentarios:</td>
   <td><textarea cols="39" rows="4" name="coment"></textarea></td>
</tr>
</table>
</div>
</form>

Os nomes que damos às camadas são "camadainicio" para os campos iniciais, "camadaexpansao" para os campos opcionais e "camadafinal" para os campos do fim do formulário.

O checkbox que servirá para mostrar ou ocultar o formulário expandido se chama "expandir". Se observamos, o checkbox tem definido o evento onclick, que chama à função javascript que se encarregará de mostrar ou ocultar parte do formulário. Esta função será vista mais adiante.

Agora veremos o código CSS deste formulário.

<style type="text/css">
#capaexpansao{
   display:none;
}
</style>

Simplesmente definimos, para a camadaexpansao, o atributo display de CSS com o valor none. Este valor implica que o conteúdo do

com id "camadaexpansao" não vai se mostrar. Utilizaremos este atributo para mostrar ou ocultar a camada, ao invés de visibility porque com este último, embora a camada não se veja na página, sim que fica o espaço reservado que ocupam os elementos de formulário.

Com o atributo display: none conseguimos que a camada não se veja na página e ademais que não ocupe espaço. Logo, passando o atributo a display:block conseguiremos que os campos se vejam no formulário. Para mudar o valor do atributo display, as bibliotecas xLibrary dispõem da função xDisplay(), que recebe um string com o identificador da camada a mudar o display e o novo valor de display que se deseja aplicar.

Por último veremos a função javascript que vai se encarregar de mostrar ou ocultar a camada com a ampliação do formulário. Esta função é chamada quando clicamos no checkbox.

function expandir_formulario(){
if (document.f1.expandir.checked){
xDisplay('camadaexpansao', 'block')
}else{
xDisplay('camadaexpansao', 'none')
}
}

Simplesmente avalia document.f1.expandir.checked (que vale true se o checkbox está ativado e false se está desativado).

Se estava ativado simplesmente colocamos o valor "block" ao atributo display da "camadaexpansao". Se não estava ativado o checkbox, volta-se a colocar o valor "none" ao atributo display da "camadaexpansao".

Conclusão

O exercício é sumamente simples. É dos mais simples que se pode fazer com DHTML, sempre e quando se conheça o atributo display e as bibliotecas cross-browser xLibrary. Não obstante, os resultados são bastante vistosos e úteis.

Insisto, este exercício faz uso da função xDisplay(), da biblioteca xLibrary, que explicamos no Workshop de Cross Browser DHTML. Ao princípio do código deste exemplo se deve incluir a biblioteca como um arquivo javascript externo. O código a incluir pode ser gerado com a ferramenta X Library Compiler mediante um procedimento que explicamos detalhadamente neste artigo de CriarWeb.com.

Pode-se ver o exemplo em funcionamento.

Autoria e outras referências sobre este artigo

Dentro deste artigo:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 3 Comentários sem rever

Informe de M. A. A. Tradução Juliana Monteiro

Acrescentar um comentário do artigo

Manuais relacionados com este artigo

Dentro de Workshop de Cross-Browser DHTML

Seguinte: Outro exemplo de formulário dinâmico com campos opcionais

Anterior: Nova versão de Pop-up DHTML

< Índice de Workshop de Cross-Browser DHTML

Categorias relacionadas

Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:

+ Entrar em DHTML

Comentário sem rever

Acrescentar um comentário do artigo

Entre os comentários não revistos podem ter alguns interessantes que tenham sido enviado recentemente.

Foram econtrados 3 comentários sem rever

Ver os comentários não revistos