|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14
formulario dinámico (V)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Capas de formularios.-
Ya creado el menu, tenemos que implementar ahora los 3 formualrios diferentes que se corresponden con cada una de las opciones del menú. Para ello debemos crear 3 capas, una para cada formulario, que deben ser iguales en cuanto a tamaño y posición.
Así, para crear la primera vamos a establecer una capa, que vamos a llamar "musica", situada dentro de la capa de fondo, en una posición adecuada al diseño, y dentro de ella otra capa llamada "musicafondo". La idea es crear una capa con un borde de 1 pixel, igual que hemos hecho con la capa principal. Para poder ver el resultado establecemos inicialmente como visible la capa musica:
<html>
<head>
<title>HTMLWeb - formularios dinamicos - ejemplo_4</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;}
#musicafondo{position:absolute;top:1px;left:1px;width:398px;height:98px;clip:rect(0px,398px,98px,0px);background-color:#99ff99;layer-background-color:#99ff99;}
</style>
</head>
<body bgcolor="#ffff99">
<div id="principal">
<div id="fondo">
<p class="titulo" align="center">HTMLWeb - formulario dinámico</p>
<p>
<form name="menu" action="miaccion" method="post">
<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"></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 id="musica">
<div id="musicafondo">
</div>
</div>
</div>
</div>
</body>
</html>
Ahora vamos a situar dentro de la capa "musicafondo" un nuevo formulario, que llamaremos formMusica, que va a contener las opciones correspondientes a este apartado. El código necesario es el sigiente:
<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>
Observa cómo de nuevo hemos usado una tabla para posicionar los elementos del formulario, y que hemos declarado un nuevo formulario en la capa "musicafondo".
el resultado del código anterior está en esta ventana flotante.
Y ahora ya sólo nos falta crear dos nuevos grupos de capas: cine / cinefondo y informatica / informaticafondo, situando en cada una de las correspondientes al fondo un nuevo formulario similar al anterior. Para finalizar esta etapa establecemos a las capas musica, cine y fondo su visibilidad a hidden:
#capa{.........................;visibility:hidden;}
con lo que inicialmente estarán ocultas.
 |
 |
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14