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. Esta librería y otros ejemplos de su uso quedan descritos en el Taller de Cross-Browser DHTML.
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
Haremos uso de las librerías xLibrary, que sirven para hacer DHTML compatible con todos los navegadores. Esta librería y otros ejemplos de su uso quedan descritos en el Taller de Cross-Browser DHTML.
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.
El checkbox que servirá para mostrar u ocultar el formulario expandido se llama "expandir". Si nos fijamos, el checkbox tiene definido el evento onclick, que llama a la función javascript que se encargará de mostrar u ocultar parte del formulario. Esta función la veremos más adelante.
Ahora veremos el código CSS de este formulario.
<style type="text/css">
#capaexpansion{
display:none;
}
</style>
Simplemente hemos definido, para la capaexpansion, el atributo display de CSS con el valor none. Este valor implica que el contenido del
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.
El checkbox que servirá para mostrar u ocultar el formulario expandido se llama "expandir". Si nos fijamos, el checkbox tiene definido el evento onclick, que llama a la función javascript que se encargará de mostrar u ocultar parte del formulario. Esta función la veremos más adelante.
Ahora veremos el código CSS de este formulario.
<style type="text/css">
#capaexpansion{
display:none;
}
</style>
Simplemente hemos definido, para la capaexpansion, el atributo display de CSS con el valor none. Este valor implica que el contenido del
con id "capaexpansion" no se va a mostrar. Utilizaremos este atributo para mostrar u ocultar la capa, en vez de visibility porque con este último, aunque la capa no se ve en la página, si que queda el espacio reservado que ocupan los elementos de formulario.
Con el atributo display: none conseguimos que la capa no se vea en la página y además que no ocupe espacio. Luego, pasando el atributo a display:block conseguiremos que los campos se vean en el formulario. Para cambiar el valor del atributo display, las librerías xLibrary disponen de la función xDisplay(), que recibe un string con el identificador de la capa a cambiar el display y el nuevo valor de display que se desea aplicar.
Por último veremos la función javascript que se va a encargar de mostrar u ocultar la capa con la ampliación del formulario. A esta función se le llama cuando se hace clic en el checkbox.
function expandir_formulario(){
if (document.f1.expandir.checked){
xDisplay('capaexpansion', 'block')
}else{
xDisplay('capaexpansion', 'none')
}
}
Simplemente evalúa document.f1.expandir.checked (que vale true si el checkbox está activado y false si está desactivado).
Si estaba activado simplemente ponemos el valor "block" al atributo display de la "capaexpansion". Si no estaba activado el checkbox, se vuelve a poner el valor "none" al atributo display de la "capaexpansion".
Conclusión
El ejercicio es sumamente sencillo. Es de los más sencillos que se pueden hacer con DHTML, siempre y cuando se conozca el atributo display y las librerías cross-browser xLibrary. No obstante, los resultados son bastante vistosos y útiles.
Insisto, este ejercicio hace uso de la función xDisplay(), de la librería xLibrary, que venimos explicando en el Taller de Cross Browser DHTML. Al principio del código de este ejemplo se debe incluir la librería como un fichero javascript externo. El código a incluir se puede generar con la herramienta X Library Compiler mediante un procedimiento que hemos explicado con detenimiento en otro artículo de DesarrolloWeb.com.
Con el atributo display: none conseguimos que la capa no se vea en la página y además que no ocupe espacio. Luego, pasando el atributo a display:block conseguiremos que los campos se vean en el formulario. Para cambiar el valor del atributo display, las librerías xLibrary disponen de la función xDisplay(), que recibe un string con el identificador de la capa a cambiar el display y el nuevo valor de display que se desea aplicar.
Por último veremos la función javascript que se va a encargar de mostrar u ocultar la capa con la ampliación del formulario. A esta función se le llama cuando se hace clic en el checkbox.
function expandir_formulario(){
if (document.f1.expandir.checked){
xDisplay('capaexpansion', 'block')
}else{
xDisplay('capaexpansion', 'none')
}
}
Simplemente evalúa document.f1.expandir.checked (que vale true si el checkbox está activado y false si está desactivado).
Si estaba activado simplemente ponemos el valor "block" al atributo display de la "capaexpansion". Si no estaba activado el checkbox, se vuelve a poner el valor "none" al atributo display de la "capaexpansion".
Conclusión
El ejercicio es sumamente sencillo. Es de los más sencillos que se pueden hacer con DHTML, siempre y cuando se conozca el atributo display y las librerías cross-browser xLibrary. No obstante, los resultados son bastante vistosos y útiles.
Insisto, este ejercicio hace uso de la función xDisplay(), de la librería xLibrary, que venimos explicando en el Taller de Cross Browser DHTML. Al principio del código de este ejemplo se debe incluir la librería como un fichero javascript externo. El código a incluir se puede generar con la herramienta X Library Compiler mediante un procedimiento que hemos explicado con detenimiento en otro artículo de DesarrolloWeb.com.
Se puede ver el ejemplo en marcha.
Puedes descargar un ZIP con el HTML y la librería de este ejemplo.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...
¿Alguna duda?
Pregunta y ayuda en la comunidad con tus respuestas en la sección de FAQ