|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14
formulario dinámico (II)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Entorno de trabajo.-
El problema que nos planteamos es la creación de un formulario inteligente, entendiendo por esto un formulario compuesto de varias partes y capaz de mostrar cada una de ellas en el momento adecuado, realizando a la vez una recopilación de los diferentes datos introducidos por el usuario.
Y para ello, vamos a crear el formulario en sí, que va a estar compuesto por un menú inicial de 3 botones de radio, 3 diferentes subformularios y un grupo de botones final. La idea es que estos subformularios van a estar inicialmente ocultos, mostrándose cada uno de ellos cuando se active el radio botón asociado. Necesitaremos también un formulario de recopilación de resultados, por la razón que más adelante explicaré.
Y como estamos en la sección de DHTML, vamos a crear nuestra página con capas, introduciendo dentro de cada una de ellas uno de los diferentes elementos del formulario. Para empezar, necesitamos un par de capas principales, que nos van a crear el contenedor para todo lo demás. Estas capas van a responder al código:
<html>
<head>
<title>HTMLWeb - formularios dinamicos</title>
<style type="text/css">
#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:#336600;}
</style>
</head>
<body>
<div id="principal">
<div id="fondo">
</div>
</div>
</body>
</html>
Observad que hemos creado una capa padre, de color verde oscuro, y dentro de ella otra de color verde claro, que va a ser el fondo de nuestro formulario. La capa oscura exterior la ponemos con objeto de crear un borde de 1 pixel alrededor del fondo, para dar un estilo bonito al formulario. Si os fijáis en la definición de estilos en cabecera véis que hemos posicionado absolutamente las dos capas, y que hemos situado la de fondo a un pixel a la derecha y a 1 pixel hacia abajo de la capa principal, para crear el borde; luego hemos asignado a esta capa de fondo una anchura 2 pixels más estrecha y más baja que la principal. Además, daros cuenta de que para definir el color de fondo usamos background-color y layer-background-color, el primero para Internet Explorer y Nestcape Navigator 6x, y el segundo para Nestcape 4x. El efecto conseguido lo tenéis en la siguiente ventana.
Y ahora vamos a poner un título al formulario, y para ellos vamos a usar un párrafo simple contenido en la capa de fondo. Para controlar el aspecto del texto de este título, definimos en la cabecera de estilos una clase de párrafo de fuente Verdana - Helvetica (fuentes estándar para Windows y Mac, respectivamente), de 12 pixels de tamaño, de color azul oscuro y con un padding superior de 3 pixels, para que se nos separe el texto del borde del formulario. Si tenéis dudas respecto a los estilos de párrafos podéis consultar el manual de textos en la sección de HTML, y si las dudas son respecto al posicionamiento de capas podéis aclararos en el artículo "test matemático" de esta misma sección de DHTML.
El código por ahora nos queda:
<html>
<head>
<title>HTMLWeb - formularios dinamicos - ejemplo_1</title>
<style type="text/css">
p.titulo{font-size:12px;font-family:Verdana,Helvetica;color:#003366;font-weight:bold;margin-top:3px;}
#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:#336600;}
</style>
</head>
<body bgcolor="#ffff99">
<div id="principal">
<div id="fondo">
<p class="titulo" align="center">HTMLWeb - formulario dinamico</p>
</div>
</div>
</body>
</html>
cuyo resultado esta en esta ventana flotante.
 |
 |
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14