|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14
formulario dinámico (XIII)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Fichero HTML.-
Código del fichero formulario.html:
<html>
<head>
<title>HTMLWeb - ejemplo de formulario dinamico</title>
<link rel="stylesheet" type="text/css" href="../archivo.css">
<script language="JavaScript" type="text/javascript" src="../archivo.js"></script>
</head>
<body bgcolor="#ffff99">
<div id="principal">
<div id="fondo">
<form name="oculto" action="nuestra_accion" method="post">
<input type="hidden" name="tipo" value="0">
<input type="hidden" name="anyos" value="0">
<input type="hidden" name="nombre" value="0">
</form>
<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" onChange="escribe(this.name,(this.options[this.selectedIndex].value))">
<option value="0">elige un tipo de música</option>
<option value="rock">rock</option>
<option value="pop">pop</option>
<option value="heavi">heavi</option>
</select>
</td>
<td align="right">
<select name="anyos" onChange="escribe(this.name,(this.options[this.selectedIndex].value))">
<option value="0">elige años</option>
<option value="1970/1980">1970/1980</option>
<option value="1980/1990">1980/1990</option>
<option value="1990/2000">1990/2000</option>
</select>
</td>
</tr>
<tr>
<td>tu grupo preferido:</td>
<td><input type="text" name="nombre" size="20" onChange="escribe(this.name,this.value)"></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" onChange="escribe(this.name,(this.options[this.selectedIndex].value))">
<option value="0">elige un tipo de cine</option>
<option value="accion">acción</option>
<option value="drama">drama</option>
<option value="comedia">comedia</option>
</select>
</td>
<td align="right">
<select name="anyos" onChange="escribe(this.name,(this.options[this.selectedIndex].value))">
<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="nombre" size="20" onChange="escribe(this.name,this.value)"></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" onChange="escribe(this.name,(this.options[this.selectedIndex].value))">
<option value="0">elige un sistema operativo</option>
<option value="windows">Windows</option>
<option value="unix">Unix</option>
<option value="mac">Mac</option>
</select>
</td>
<td align="right">
<select name="anyos" onChange="escribe(this.name,(this.options[this.selectedIndex].value))">
<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 align="right">tu e-mail:</td>
<td><input type="text" name="nombre" size="10" onChange="escribe(this.name,this.value)"></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" onClick="borra();"></td>
<td><input type="button" class="boton" name="enviar" value="enviar" onClick="envia();"></td>
</tr>
</table>
</form>
</div>
<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" onClick="muestracapa('musica');borra();"></td>
<td>música</td>
<td><input type="radio" class="radio" name="opcion" value="cine" onClick="muestracapa('cine');borra();"></td>
<td>cine</td>
<td><input type="radio" class="radio" name="opcion" value="informatica" onClick="muestracapa('informatica');borra();"></td>
<td>informática</td>
</tr>
</table>
</form>
</p>
</div>
</div>
</body>
</html>
Y el resultado final podéis verlo en esta ventana flotante.
 |
 |
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14