|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Maquetación de formularios
Hemos visto hasta ahora cómo implementar los diferentes elementos que forman un formulario, pero de una forma aislada, y esta no es la forma en que estos trabajan. Para que un formulario sea atractivo para un visitante y logre romper ese miedo innato que todos tenemos a la hora de introdugir nuestros datos personales, lo primero que debe tener es una buena - magnífica apariencia estética.Y luego, por supuesto, que esté realizado técnicamente bien y que el programa que lo vaya a gestionar en el servidor sea el adecuado.
Para dar un buen aspecto a nuestro formulario deberemos primero estudiar, antes de hacer nada, qué datos queremos recopilar. eliminando los superfluos, (no debemos agobiar al visitante con demasiadas preguntas) y hacer un esquema en papel de cómo van a estar dispuestos los diferentes elementos en la pagina.
Una vez definido el formulario que deseamos...?Cómo lo llevamos a la realidad?. Bien, podemos construirlo usando principalmente dos técnicas distintas, aunque la basada en capas o posicionamientos directos de elementos sólo sera valida si estamos diseñando para I. Explorer, es decir, que no debemos usarla nunca, ya que siempre debemos crear paginas para ambos navegadores. A título teórico veremos esta forma, pero sólo para eso.
* Maquetación mediante tablas.
La técnica mas general para maquetar una pagina es la basada en tablas, y a esto tampoco escapan los formularios. Vamos pués a maquetar nuestro formulario usando una tabla, teniendo siempre en cuenta las limitaciones que estas tienen (vease el capítulo correspondiente a tablas en este mismo manual).
La idea general es crear una tabla compuesta de dos columnas y tantas filas como nos sean necesarias. En la primera columna van a ir los mensajes de cada campo, y el la segunda los propios campos del formulario.
Deberemos tener en cuenta:
* hay que especificar correctamente las anchuras de la tabla en su totalidad y de las celdas que la van a componer. Hay que tener en cuenta que todas las celdas se van a adaptar a la de mayor contenido, por lo que conviene elegir unos mensajes de campo de longitud parecida.
* si vamos a dar algún color de fondo a las celdas, para hacer la tabla mas presentable, es conveniente dejar un pequeño margen entre las celdas, mediante el atributo celspacing.
* si utilizamos en la maquetación celdas "vacias" deberemos introducir dentro de ellas un espacio ( ) o una imagen transparente de 1 píxel, para que se mantengan las anchuras de estas celdas.
* es conveniente disponer todo el formulario en la visual de la ventana del navegador para que el usuario no tenga que moverse a lo largo del mismo mediante las barras de desplazamiento, ya que esto es incómodo para él. Para ello deberemos, si es necesario, disponer el formulario en varias columnas de introducción de datos.
* si necesitamos separa elementos que estén dentro de la misma celda lo haremos con tantos espacios ( ) como sea necesario.
Ejemplo.-
<form action="cgi-bin/mailto.cgi"
method="post" enctype="application/x-www-form-urlencoded">
<table
width="60%" cellspacing="2" cellpadding="2" border="0">
<th colspan="2"
bgcolor="Fuchsia">Por favor, rellena estos
datos</th>
<tr>
<td bgcolor="#ccff33"
width="180"><b>Nombre:</b></td>
<td bgcolor="#ccffff"><input type="text" maxlength="15" size="35"
name="nombre"></td>
</tr>
<tr>
<td bgcolor="#ccff33"
width="180"><b>Apellidos:</b></td>
<td bgcolor="#ccffff""><input type="text" maxlength="25" size="35"
name="apellidos"></td>
</tr>
<tr>
<td bgcolor="#ccff33"
width="180"><b>Direción:</b></td>
<td bgcolor="#ccffff""><input type="text" maxlength="35" size="35"
name="direccion"></td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Código
Postal:</b></td>
<td
bgcolor="#ccffff""><input type="text" maxlength="5" size="4"
name="direccion"></td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Marca tu equipo
favorito:</b></td>
<td
bgcolor="#ccffff"">
<input type="Radio" name="equipo"
value="madrid" checked>Real Madrid
<input type="Radio"
name="equipo" value="atletico">Atlético de
Madrid
</tr>
<tr>
<td
bgcolor="#ccff33" width="180"><b>Marca tu música
favorita:</b></td>
<td
bgcolor="#ccffff"">
<input type="checkbox"
name="musica" value="rock" checked>Rock
<input type="checkbox" name="musica" value="pop"
checked>Pop
<input type="checkbox"
name="musica" value="heavy">Heavy
<input
type="checkbox" name="musica" value="tecno">Tecno
</td>
</tr>
<tr>
<td
bgcolor="#ccff33" width="180"><b>Elige un
escritor:</b></td>
<td
bgcolor="#ccffff"">
<select
style="width:100px;">
<option
value="Cervantes">Cervantes
<option
value="Reverte">Reverte
<option
value="Asimov">Asimov
</select>
</td>
</tr>
<tr>
<td
bgcolor="#ccff33" width="180" valign="top"><b>?Algún
comentario?</b></td>
<td
bgcolor="#ccffff"">
<textarea name="comentario"
cols="20" rows="10">
</textarea>
</td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180" align="right"><input type="submit"
value="enviar"></b></td>
<td
bgcolor="#ccffff" align="left"><input type="reset"
value="borrar"></td>
</tr>
</table>
</form>
ver resultado.
* Maquetación mediante capas.
Otra forma de maquetar un formulario es utilizando capas, definidas mediante las parajas de etiquetas <DIV>...</DIV> y/o <SPAN>...</SPAN>, que vamos a situar en nuestra pagina mediante los atributos de style position, top y left. Ya hemos dicho antes que este método suele traer bastantes quebraderos de cabeza en Nestcape.
La idea ahora es ir creando y posicionando las capas, introduciendo en
cada una de ellas bien un mensaje de campo bien el propio campo.
De esta forma podríamos escribir el siguiente código:
<html>
<head>
<title>formularios - ejemplo 6</title>
<style
type="text/css">
.mensaje{width:195px;height:25px;clip:rect(0,195,25,0);background-color:#ccff33;layer-background-color:#ccff33;padding-left:5px;font-family:Verdana;font-size:8pt;font-weight:bold;padding-top:3px;}
.mensaje2{width:195px;height:168px;clip:rect(0,195,168,0);background-color:#ccff33;layer-background-color:#ccff33;padding-left:5px;font-family:Verdana;font-size:8pt;font-weight:bold;padding-top:3px;}
.boton{width:195px;height:30px;clip:rect(0,195,30,0);background-color:Fuchsia;layer-background-color:Fuchsia;padding-left:5px;padding-top:3px;font-family:Verdana;font-size:8pt;font-weight:bold;}
.boton2{width:265px;height:30px;clip:rect(0,265,30,0);background-color:Fuchsia;layer-background-color:Fuchsia;padding-left:5px;padding-top:3px;font-family:Verdana;font-size:8pt;font-weight:bold;}
.campo{width:265px;height:25px;clip:rect(0,265,25,0);background-color:#ccffff;layer-background-color:#ccffff;padding-left:5px;padding-top:1px;}
.campo2{width:265px;height:168px;clip:rect(0,265,168,0);background-color:#ccffff;layer-background-color:#ccffff;padding-left:5px;padding-top:1px;}
#cabecera{position:absolute;top:22px;left:20px;width:464px;height:25px;clip:rect(0,464,25,0);background-color:Fuchsia;layer-background-color:Fuchsia;text-align:center;font-family:Verdana;font-size:8pt;font-weight:bold;padding-top:5px;}
#capaA0{position:absolute;top:50px;left:20px;}
#capaA1{position:absolute;top:50px;left:220px;}
#capaB0{position:absolute;top:80px;left:20px;}
#capaB1{position:absolute;top:80px;left:220px;}
#capaC0{position:absolute;top:110px;left:20px;}
#capaC1{position:absolute;top:110px;left:220px;}
#capaD0{position:absolute;top:140px;left:20px;}
#capaD1{position:absolute;top:140px;left:220px;}
#capaE0{position:absolute;top:170px;left:20px;}
#capaE1{position:absolute;top:170px;left:220px;}
#capaF0{position:absolute;top:200px;left:20px;}
#capaF1{position:absolute;top:200px;left:220px;}
#capaG0{position:absolute;top:230px;left:20px;}
#capaG1{position:absolute;top:230px;left:220px;}
#capaH0{position:absolute;top:260px;left:20px;}
#capaH1{position:absolute;top:260px;left:220px;}
#capaI0{position:absolute;top:433px;left:20px;padding-left:100px;}
#capaI1{position:absolute;top:433px;left:220px;}
</style>
</head>
<body>
<form name="miform">
<div
id="cabecera">Por favor, rellena estos datos</div>
<div
id="capaA0" class="mensaje">Nombre:</div>
<div id="capaA1"
class="campo"><input type="text" maxlength="15" size="35"
name="nombre"></div>
<div id="capaB0"
class="mensaje">Apellidos:</div>
<div id="capaB1"
class="campo"><input type="text" maxlength="25" size="35"
name="apellidos"></div>
<div id="capaC0"
class="mensaje">Direción:</div>
<div id="capaC1"
class="campo"><input type="text" maxlength="35" size="35"
name="direccion"></div>
<div id="capaD0"
class="mensaje">Código Postal:</div>
<div id="capaD1"
class="campo"><input type="text" maxlength="5" size="4"
name="direccion"></div>
<div id="capaE0" class="mensaje">Marca
tu equipo favorito:</div>
<div id="capaE1"
class="campo">
<input type="Radio" name="equipo" value="madrid"
checked>Real
Madrid
<input
type="Radio" name="equipo" value="atletico">Atlético de
Madrid
</div>
<div id="capaF0" class="mensaje">Marca tu música
favorita:</div>
<div id="capaF1"
class="campo">
<input type="checkbox" name="musica" value="rock"
checked>Rock
<input type="checkbox"
name="musica" value="pop" checked>Pop
<input
type="checkbox" name="musica" value="heavy">Heavy
<input type="checkbox" name="musica"
value="tecno">Tecno
</div>
<div id="capaG0"
class="mensaje">Elige un escritor:</div>
<div id="capaG1"
class="campo">
<select style="width:100px;">
<option value="Cervantes">Cervantes
<option
value="Reverte">Reverte
<option
value="Asimov">Asimov
</select>
</div>
<div
id="capaH0" class="mensaje2">?Algún comentario?</div>
<div
id="capaH1" class="campo2">
<textarea name="comentario" cols="20"
rows="10">
</textarea>
</div>
<div id="capaI0"
class="boton"><input type="submit" value="enviar" onclick="alert('botón de
prueba. No esta activo');"></div>
<div id="capaI1"
class="boton2"><input type="reset"
value="borrar"></div>
</form>
</body>
</html>
ver resultado.
y vemos que el resultado es analogo al obtenido mediante maquetación por tablas. Para comprender bien este ejemplo es necesario tener conocimientos de Hojas de Estilo en Cascada (CSS), que nos permiten posicionar y dar estilo completo a las contenidos de las capas.
Si visualizamos este último ejemplo en
Nestcape el resultado no es el esperado, por lo que no se puede usar esté
método para aplicaciones cross-browser.
 |
 |