|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14
formulario dinámico (VI)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Código hasta ahora.-
El código de nuestra página es hasta ahora:
<html>
<head>
<title>HTMLWeb - formularios dinamicos - ejemplo_5</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>
</head>
<body bgcolor="#ffff99">
<div id="principal">
<div id="fondo">
<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"></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">
<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>
</div>
</div>
</body>
</html>
 |
 |
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14