Un formulario con campos que se esconden con DHTML

Cómo hacer un formulario que tiene algunos campos que se muestran unas veces si y otras no, es decir, algunas opciones se pueden ocultar dependiendo de las acciones del usuario.

Seguro que hemos visto algunas veces un formulario, o cualquier otro elemento de una página, que se muestra y se oculta dependiendo de una acción del usuario. En este artículo veremos como hacer un formulario que tiene algunos campos a la vista y otros no. El visitante dispone de un campo checkbox para mostrar el formulario parcial o el formulario completo. Cuando el checkbox está activado, se muestran todos los campos y cuando está desactivado se muestran sólo algunos.

Haremos uso de las librerías xLibrary, que sirven para hacer DHTML compatible con todos los navegadores.

Lo mejor para hacerse una idea exacta de los objetivos del manual es verlo en una ventana aparte.

La capa con los campos opcionales en principio no tiene que verse y el checkbox debe aparecer desactivado. Una vez se active el checkbox, la capa con los campos opcionales debe mostrarse.

Para realizar este ejemplo, hemos creado 3

distintos. Uno con los campos iniciales del formulario, otro con los opcionales (que se pueden mostrar u ocultar) y un último con los campos que hay al final del formulario.

El código HTML sería el siguiente:

<form name=f1>
<div id=capainicio>
<table cellspacing="2" cellpadding="2" border="0">
<tr>
   <td width=140>Nombre:</td>
   <td><input type="text" name="nombre" size="25"></td>
</tr>
<tr>
   <td>Apellidos:</td>
   <td><input type="text" name="edad" 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=capaexpansion>
<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>Edad:</td>
   <td><input type="text" name="edad" size="3"></td>
</tr>
</table>
</div>
<div id=capafinal>
<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>

Los nombres que hemos dado a las capas son "capainicio" para los campos iniciales, "capaexpansion" para los campos opcionales y "capafinal" para los campos del fin del formulario.

Usuarios que han visto este tema también han visto...

- Efecto cortina con DHTML
- Efectos en el background en DHTML
- Pase de diapositivas con DHTML
- Escritura en una Capa en DHTML

- Versión imprimible de este documento
- Enviar por e-mail este documento