|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14
formulario dinámico (VII)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Formulario dinámico.-
Bueno amigos, es hora de empezar a dar vida a nuestro formulario. Para ello, vamos a hecer que cuando el usuario pinche uno de los radio botones se muestre el formulario correspondiente en pantalla, permitiendo así que lo rellene, y para conseguir esto recurrimos al HTML Dinámico.
Para mostrar una capa que inicialmente está oculta debemos acceder a la propiedad visibility de la misma. La pega es que cada navegador hace esto de una forma diferente, por lo que lo primero que debemos hacer es identificar el navegador que está usando nuestro visitante. Podemos recurrir al objeto navigator de JavaScript para conseguir esto, pero es una forma más directa el preguntar al navegador si soporta un objeto determinado que sólo lo soporte uno de los posibles.
Así, Internet Explorer soporta el objeto all, hijo de document, que contiene todos los objetos del documento. Nestcape 4x posée un objeto equivalente, layers, que sólo es soportado por él. Y Nestcape 6x posée el objeto getElementById, que aunque también lo soporta Explorer 5.5, si hacemos la distinción de este antes, al final no tendremos problemas.
El código de identificación nos queda:
<script language="JavaScript" type="text/javascript">
var nc = (document.layers) ? true:false
var ie = (document.all) ? true:false
var n6 = (document.getElementById) ? true:false
</script>
donde hemos usado la sentencia condicional de JavaScript variable = (condicion) ? true:false, que nos asigna un valor booleano a la variable dependiendo si la condición se cumple o no.
Una vez que sabemos el navegador, debemos escribir una función JavaScript que cambie la propiedad visibility de la capa deseada, y esta función debe contemplar los 3 navegadores, ya que la orden debe ser específica para cada uno.
Explorer cambia una propiedad de una capa mediante la instrucción:
document.all['id_capa'].style.propiedad = valor;
Nestcape 4x precisa la orden.
document.layers['id_capa'].propiedad = valor;
y Nestcape 6x necesita la escritura:
document.getElementById('id_capa').style.propiedad = valor;
donde debes observar que el identificador de la capa va entre comillas siempre, y en el caso de Nestcape 6x debe ir entre paréntesis, no entre corchetes, como es el caso de Explorer y Nestcape 4x.
Nuestra función muestracapa nos queda:
function muestracapa(id)
{
if(ie)
document.all[id].style.visibility="visible";
else if(nc)
document.principal.document.fondo.document.layers[id].visibility="show";
else if(n6)
document.getElementById(id).style.visibility="visible";
}
Nota cómo en el caso de Explorer y Nestcape 6x damos directamente la ruta de la capa, pero en el caso de Nestcape 4x debemos darle al ruta completa de capas hasta llegar a la que queremos mostrar, ya que para este navegador existe una jerarquía padre-hijo de capas que siempre hay que respetar.
Si introducimos este código anterior en nuestra página veremos que no funciona en Nestcape 4x. ¿Porqué?. Bueno, debido al soporte que este navegador da a las acpas, que es sólo parcial. Lo que ocurre es que obtenemos un error de JavaScript, debido a que tenemos en el código de la página un párrafo antes de la definicisn de la capas que queremos mostrar, lo que hace que este navegador se líe. Nestcape 4x es muy sensible al orden en que aparecen las etiquetas de las capas en el código HTML de la página. Si con una disposición obtenéis error, probad cambiando el orden de las capas en el código, ya que siempre hay uno que hace funcionar las cosas.
Si en nuestra página cambiamos este órden, poniendo el párrafo inicial en el que se encunetran los radios del menú al final del documento, el problema queda solucionado. En Explorer y en Nestcape 6x no imorta este orden, ya que ellos trabajan perfectamente con las capas.
Seguimos. Nos queda ahora activar la función muestracapa que hemos creado, y para ello vamos a usar el evento onClick de los radio botones del menú. Para ello debemos escribir, por ejemplo:
<input type="radio" class="radio" name="opcion" value="musica" onClick="muestracapa('musica')">
con lo que al pulsar el radio de la música llamamos a la función y le pasamos como argumento el id de la capa "musica" entre comillas (siempre entre comillas), con lo que aparecerá el formulario de música ante nuestras narices.
el código total de la página nos queda:
<html>
<head>
<title>HTMLWeb - formularios dinamicos - ejemplo_7</title>
<style type="text/css">
.titulo{font-size:12px;font-family:Verdana,Helvetica;color:#003366;font-weight:bold;margin-top:3px;}
p{font-size:11px;font-family:Verdana,Helvetica;color:black;font-weight:bold;}
td{font-size:11px;font-family:Verdana,Helvetica;color:black;font-weight:bold;}
.radio{background:#99ff99;}
#principal{position:absolute;top:50px;left:150px;width:500px;height:300px;clip:rect(0px,500px,300px,0px);background-color:#336600;layer-background-color:#336600;}
#fondo{position:absolute;top:1px;left:1px;width:498px;height:298px;clip:rect(0px,498px,298px,0px);background-color:#99ff99;layer-background-color:#99ff99;}
#musica{position:absolute;top:90px;left:50px;width:400px;height:100px;clip:rect(0px,400px,100px,0px);background-color:#336600;layer-background-color:#336600;visibility:hidden;}
#musicafondo{position:absolute;top:1px;left:1px;width:398px;height:98px;clip:rect(0px,398px,98px,0px);background-color:#99ff99;layer-background-color:#99ff99;padding-top:5px;}
#cine{position:absolute;top:90px;left:50px;width:400px;height:100px;clip:rect(0px,400px,100px,0px);background-color:#336600;layer-background-color:#336600;visibility:hidden;}
#cinefondo{position:absolute;top:1px;left:1px;width:398px;height:98px;clip:rect(0px,398px,98px,0px);background-color:#99ff99;layer-background-color:#99ff99;padding-top:5px;}
#informatica{position:absolute;top:90px;left:50px;width:400px;height:100px;clip:rect(0px,400px,100px,0px);background-color:#336600;layer-background-color:#336600;visibility:hidden;}
#informaticafondo{position:absolute;top:1px;left:1px;width:398px;height:98px;clip:rect(0px,398px,98px,0px);background-color:#99ff99;layer-background-color:#99ff99;padding-top:5px;}
#botonera{position:absolute;top:260px;left:0px;width:500px;height:35px;clip:rect(0px,500px,35px,0px);}
.boton{width:80px;height:18px;background:#003366;color:white;border:0px;font-weight:bold;}
</style>
<script language="JavaScript" type="text/javascript">
var nc = (document.layers) ? true:false
var ie = (document.all) ? true:false
var n6 = (document.getElementById) ? true:false
function muestracapa(id)
{
if(ie)
document.all[id].style.visibility="visible";
else if(nc)
document.principal.document.fondo.document.layers[id].visibility="show";
else if(n6)
document.getElementById(id).style.visibility="visible";
}
</script>
</head>
<body bgcolor="#ffff99">
<div id="principal">
<div id="fondo">
<div id="musica">
<div id="musicafondo">
<form name="formMusica">
<table cellpadding="2" cellspacing="0" border="0" align="center">
<tr>
<td height="50">
<select name="tipo">
<option value="0">elige un tipo de música</option>
<option value="rock">rock</option>
<option value="rock">pop</option>
<option value="rock">heavi</option>
</select>
</td>
<td align="right">
<select name="anyos">
<option value="0">elige años</option>
<option value="rock">1970/1980</option>
<option value="rock">1980/1990</option>
<option value="rock">1990/2000</option>
</select>
</td>
</tr>
<tr>
<td>tu grupo preferido:</td>
<td><input type="text" name="grupo" size="20"></td>
</tr>
</table>
</form>
</div>
</div>
<div id="cine">
<div id="cinefondo">
<form name="formCine">
<table cellpadding="2" cellspacing="0" border="0" align="center">
<tr>
<td height="50">
<select name="tipo">
<option value="0">elige un tipo de cine</option>
<option value="rock">acción</option>
<option value="rock">drama</option>
<option value="rock">comedia</option>
</select>
</td>
<td align="right">
<select name="anyos">
<option value="0">elige años</option>
<option value="rock">1970/1980</option>
<option value="rock">1980/1990</option>
<option value="rock">1990/2000</option>
</select>
</td>
</tr>
<tr>
<td>tu actor preferido:</td>
<td><input type="text" name="actor" size="20"></td>
</tr>
</table>
</form>
</div>
</div>
<div id="informatica">
<div id="informaticafondo">
<form name="formInformatica">
<table cellpadding="2" cellspacing="0" border="0" align="center">
<tr>
<td height="50">
<select name="tipo">
<option value="0">elige un sistema operativo</option>
<option value="rock">Windows</option>
<option value="rock">Unix</option>
<option value="rock">Mac</option>
</select>
</td>
<td align="right">
<select name="anyos">
<option value="0">elige un lenguaje</option>
<option value="rock">Java</option>
<option value="rock">C++</option>
<option value="rock">Visual Basic</option>
</select>
</td>
</tr>
<tr>
<td>tu e-amil:</td>
<td><input type="text" name="email" size="20"></td>
</tr>
</table>
</form>
</div>
</div>
<div id="botonera">
<form name="formulario">
<table cellpadding="2" cellspacing="0" border="0" align="center">
<tr>
<td><input type="button" class="boton" name="cancelar" value="cancelar"></td>
<td><input type="button" class="boton" name="borrar" value="borrar"></td>
<td><input type="button" class="boton" name="enviar" value="enviar"></td>
</tr>
</table>
</form>
</div>
<p class="titulo" align="center">HTMLWeb - formulario dinámico</p>
<p>
<form name="menu">
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td width="15"> </td>
<td class="titulo">Elige una de estas opciones:</td>
<td><input type="radio" class="radio" name="opcion" value="musica" onClick="muestracapa('musica')"></td>
<td>música</td>
<td><input type="radio" class="radio" name="opcion" value="cine"></td>
<td>cine</td>
<td><input type="radio" class="radio" name="opcion" value="informatica"></td>
<td>informática</td>
</tr>
</table>
</form>
</p>
</div>
</div>
</body>
</html>
el resultado obtenido es este.
 |
 |
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14