|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14
formulario dinámico (IV)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Creación del menú.-
Una vez disponemos del cuerpo del formulario, lo primero que vamos a hacer a continuación va a ser introducir el conjunto de 3 radio botones que nos va a servir como menú especial de navegación. Como este grupo de botones va a estar siempre en el mismo lugar y visible, no nos hace falta emplear para él una nueva capa, y podemos definirlo y situarlo mediante código HTML puro:
<html>
<head>
<title>HTMLWeb - formularios dinámicos - ejemplo_3</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;}
</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>
</div>
</body>
</html>
Sí, ya se: hay aquí varias cosas que tal vez no entendáis. Vamos a explicarlas:
1) introducimos un par de etiquetas </form>...</form> en la capa por dos motivos, primero porque si no lo hacemos Nestcape Navigator no reconoce luego las etiquetas input y no pinta los radio botones, y segundo porque para este Navegador hay que introducir un formulario distinto en cada capa de la página. Esto es debido a que para Nestcape 4x cada capa es un documento independiente, por lo que si sólo ponemos una pareja de etiquetas form al inicio de la página general, Internet Explorer y Nestcape 6x sí consideraran como elementos de este formulario todas las etiquetas input, textarea, etc. que haya en la página, pero Nestcape 4x sólo considerará elementos de ese formulario los que estén en la misma capa en que de define el mismo.
2) damos un nombre identificador a cada formulario que vayamos introduciendo, ya que luego tendremos que referirnos a sus elementos, y para ello nos hace falta su nombre (las normas HTML 4.0 asignan mejor un identificador ID al formulario, pero no vamos a complicar más las cosas).
3) introducimos el formulario dentro de una tabla, ya que si no lo hacemos así Nestcape Navigator puede crear un salto de línea cuando se encuentra un texto y una etiqueta de formulario a continuación una de otra. Además, con la tablas tendremos un mejor control de los elementos. Nota como he puesto una celda con un ancho de 15 pixels y con contenido un espacio simple: es para separar el texto del borde del formulario. Si no ponemos nada en la celda, Nestcape Navigator no tomará en cuenta la anchura que le demos a la misma.
4) hemos asignado un estilo de fuente a las celdas (mediante la asignación de estilo a la etiqueta td) en la cabecera de la página, ya que aunque la tabla esté dentro de un párrafo, no nos cogerá el estilo definido para este. Siempre las tablas se comportan individualmente en lo que respecta a estilos, salvo que usemos el estándar HTML 4.0 estricto (ver articulo sobre etiquetas olvidadas en la sección de HTML).
5) hemos definido asímismo una clase de estilo, llamada radio, para asignar el color de fondo a los radio botones, color que debe ser igual que el de la capa de fondo. Esto se debe hacer porque Nestcape Navigator 4x pinta siempre alrededor de los radios un cuadrado del color del BODY de la página, por lo que si la capa de fondo tiene un color diferente se produce un feo contraste. Asignando un color de fondo a los radio botones (se hace tan sólo con la orden background:#color) solucionamos este problema. Otra cosa es que entonces Nestcape Navigator 6x nos va a pintar el fondo del círculo del radio de ese color que le hemos asignado (solución: crear un fichero de estilos distinto para cada navegador).
el resultado del código anterior está en esta ventana flotante.
 |
 |
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14