|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 - 13 - 14
formulario dinámico (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Botones de envío.-
Vamos ahora a añadir una capa inferior con los botones necesarios para cancelar, borrar y enviar los datos del formulario. Para ello asignamos los estilos correspondientes en la cabecera, e introducimos un formulario para los botones. También asignamos un estilo a los botones, para que se adecuen al estilo general del formulario. El código necesario es:
<html>
<head>
<title>HTMLWeb - formularios dinámicos - ejemplo_21</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:#99ff99;}
#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>
<div id="botonera">
<form name="formulario" action="verdadero" method="post">
<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>
Observarás que hemos usado una tabla para introducir los botones y un formulario propio para los mismos. Las razones de esto las veremos más adelante. A los botones no les damos por ahora ninguna utilidad; luego se la daremos y explicaremos porqué.
En cuanto a los estilos de los botones, decir que son válidos para Internet Explorer y Nestcape Navigator 6x. En el caso de Nestcape 4x estos se veran grises y con texto negro, ya que este navegador no admite estilos para los botones. Si queremos buscar compatibilidad total, basta con usar imágenes como botones, implementando luego la funcionalidad de cada uno mediante código JavaScript.
Y el formulario con los botones queda así.
 |
 |
Home - DHTML - formulario dinámico - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 5 - 11 - 12 -