FORMULARIOS HTML

Los formularios son una de las herramientas de que disponemos a la hora de hacer nuestras páginas web
interactivas, en el sentido de que nos permiten recopilar información de la persona que ve la página, procesarla y
responder a ella, pudiendo de esta forma responder adecuadamente a sus acciones o peticiones.

El proceso comienza con la creación en nuestra página de un formulario de entrada de datos, que va a contener
diversos campos diferentes en su funcionalidad y que nos van a permitir recopilar toda aquella información que
deseemos de la persona que ve la página. Estos datos, una vez completado el formulario, serán enviados
normalmente al servidor para su procesamiento o a nosotros directamente, mediante correo electrónico.

Para poder procesar la información recibida mediante un formulario necesitaremos un programa especial, que
normalmente se aloja en el servidor web, llamado CGI (Common Gateway Interface), que suele estar escrito en Perl
o en C++, de los disponemos de gran cantidad de ellos en páginas especializadas de Internet. También es posible
procesar esa información mediante páginas ASP (Active Server Pages) o JSP (Java Server Pages), que son páginas
que contienen dentro de su código HTML trozos de código escrito en Visual Basic Script o Java Script
recpectivamente. Mediante alguno de estos métodos podremos incorporar los datos recibidos del formulario a una
base de datos, crear un registro, enviar un mensaje automático de respuesta al usuario, validar un pedido, confirmar
el acceso a un sistema remoto, etc.

Una vez procesada de esta forma la información recibida podremos enviar una página de respuesta definida a
nuestro visitante, con lo que podremos personalizar esta respuesta de antemano.

Los formularios están formados por una serie de controles distintos, cada uno de los cuales está asociado a un tipo
concreto de datos o una acción predeterminada: botones de envío y borrado de datos, listas de selección, cajas de
entrada de texto, etc.

El resultado de cualquier formulario es una lista de variables y valores asignados a las mismas, que tienen todos ellos
un atributo en común: el nombre de su variable.

Etiquetas <FORM>...</FORM>

Estas etiquetas son las que delimitan el comienzo y el final de un formulario. Si queremos mostrar en una página un
elemento aislado de un formulario, aunque sea con otra finalidad diferente a la del envío de los datos que contenga
al servidor (por ejemplo para tratar esa información mediante Javascript), es necesario delimitar ese elemento de
formulario mediante las etiquetas <FORM> y </FORM>. Si no lo hacemos así, I.Explorer sí mostrará el elemento,
pero Nestcape no.

La pareja de etiquetas se introduce en el código HTML dentro del BODY de la página, en el lugar en que queramos
que nos aparezcan los elementos del formulario.

Sus principales atributos o parámetros son:

* action = "ruta_programa". Indica el programa del servidor que va a "tratar" las variables que se envíen con el
formulario o el envío de los datos mediante correo electrónico mediante el valor "mailto: direccion_de_correo", en
cuyo caso deberemos añadir el parámetro ENCTYPE="text/plain" para que lo que recibamos resulte legible. También
puede ser una URL usando el método GET (por ejemplo, un botón para ir a otra página).

En el caso de que definamos aquí un programa para el tratamiento de datos deberemos especificar su ruta relativa
respecto al directorio de carpetas del servidor en dónde tengamos situado nuestra aplicación web o bien una URL
completa, si el programa está en otra dirección de Internet.

* method = " POST / GET " . Indica el método según el que se van a transferir las variables del formulario. POST
envía los datos, normalmente al programa CGI definido en action o por correo si en action hemos utilizado mailto. El
método GET añade los argumentos del formulario al URL recogido en action (utilizando como separador de las
variables la "?"). El método de uso más normal es POST, y en el caso de que estemos mandando el formulario a
nuestra dirección de correo electrónico es obligado usarlo.
Con GET los datos son encadenados al URL especificado en action , utilizando el tipo de codificación especificado en
el atributo enctype. Este método se utiliza cuando los datos no modifican la base de datos, por ejemplo, al realizar
una búsqueda, y los caracteres a enviar tienen que pertenecer obligariamente al conjunto ASCII.

Con el método POST se realiza una transacción mediante el protocolo HTTP, utilizando la codificación enctype. Se
utiliza para aplicaciones que modifican la base de datos de destino.

* enctype =" tipo ". Indica el tipo de documento en formato MIME. El más usado para que lleguen el contenido a
través de un mail con el método post sería "text/plain". Especifica el tipo de encriptación que se va a realizar con los
datos que se van a enviar. Este atributo solamente se aplica si method es POST. Indica como se codificará el
formulario si utiliza el método POST. Por defecto es "application/x-www-form-urlencoded". Otro posibles valor es
"multipart/form-data". Más adelante veremos en que caso se utiliza uno u otro tipo.

* accept =" tipo MIME ", que indica al servidor qué tipos de archivo MIME se van a aceptar en el envío.
Normalmente no se usa, pero si nos es necesario el administrador de nuestro servidor web nos puede indicar cuales
son aceptados.

* accept-charset = "charset ", que especifica la lista de caracteres permitidos que deben ser interpretados
correctamente por el servidor receptor. Por ejemplo, si el servidor admite como caracteres permitidos código HTML,
en valor de charset será "text/html".

* target= " nombre ".. Este atributo funciona igual que el homónimo de las etiquetas <A> y <FRAME>, e indica
en qué ventana de una página con frames se debe mostrar el resultado del proceso de datos mediante el programa
CGI. 

Ejemplo.-

  <form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

...
...elementos del formulario
...
  </form>

Formularios HTML
Etiqueta <INPUT>

La etiqueta <INPUT> va a definir la mayoría de los diferentes elementos que va a contener el formulario.

Sus atributos y valores son:

* TYPE = " tipo ", donde tipo puede ser uno cualquiera de los elementos que veremos a continuación:

 text, que sirve para introducir una caja de texto simple, y admite los parámetros:
o name=" nombre", que asigna de forma unívoca un nombre identificador a la variable que se
introduzca en la caja de texto.
o maxlenght=" n ", que fija el número máximo de caracteres que se pueden itroducir en la caja
de texto.
o size=" n ", que establece el tamaño de la caja de texto en pantalla.
o value=" texto ", que establece el valor por defecto del texto que aparecerá en inicialmente en
la caja de texto.
o disabled, que desactiva la caja de texto, por lo que el usuario no podrá escribir nada en ella.
o accept = " lista de content-type", Indica el tipo de contenido que aceptará el servidor.
Sus posibles valores son:
1. text/html
2. application/msexcel
3. application/msword
 4. application/pdf
5. image/jpg
6. image/gif
etc.
o readonly, que establece que el texto no puede ser modificado por el usuario.
o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los
elementos que incluye el formulario.
o alt= " texto ", que asigna una pequeña descripción al elemento.

Ejemplo.-

<form action="" method="post" enctype="text/plain" name="miform">

  introduce tu nombre:
  <input type="text" maxlength="10" size="10" name="nombre">
</form>

con el que obtenemos:

introduce tu nombre: 

 radio, que define un conjunto de elementos de formulario de tipo circular, en los que el usuario debe optar
por uno solo de ellos, que se marca con el ratón o tabulador. Admite los parámetros:
o name=" nombre"", que asigna un nombre identificador único a la variable definida por el
elemento. Este identificador debe ser el mismo para todos los elementos radio de un grupo.
o value =" valor ", que define un valor posible de la variable para cada uno de los radio botones.
o checked, que marca por defecto uno de los radio botones del grupo.
o disabled, que desactiva el radio botón, por lo que el usuario no podrá marcarlo.
o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los
elementos que incluye el formulario.

Ejemplo.-

<form action="mailto:[email protected]" method="post" enctype="text/plain" name="miform">

  marca tu equipo favorito:
  <input type="Radio" name="equipo" value="madrid" checked>Real Madrid
  <input type="Radio" name="equipo" value="atletico">Atlético de Madrid
  <input type="Radio" name="equipo" value="barcelona">Barcelona
</form>

con el que obtenemos:

marca tu equipo favorito:   Real Madrid   Atlético de Madrid  Barcelona

 checkbox, que define una o más casillas de verificación, pudiendo marcar el usuario las que desee del
conjunto total. Si pinchamos una casilla con el ratón o la activamos con el tabulador y le damos a la barra
espaciadora la casilla se marca; si volvemos a hacerlo, la casilla se desmarca. Sus parámetros
complementarios son:
o name=" nombre", que asigna un nombre identificador único a la variable definida por el
elemento. Este identificador debe ser el mismo para todos los elementos conjunto de casillas.
o value =" valor ", que define un valor posible de la variable para cada uno de casillas de
verificación.
o checked, que marca por defecto una o más de las casillas del grupo.
o disabled, que desactiva la casilla de verificación, por lo que el usuario no podrá marcarla.
o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los
elementos que incluye el formulario.
 Ejemplo.-

<form action="mailto:[email protected]" method="post" enctype="text/plain" name="miform">

  marca tu música favorita:
  <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
</form>

con el que obtenemos:

marca tu música favorita:   Rock   Pop   Heavy   Tecno

 button, que define un botón estandar. Este botón puede ser usado para diferentes acciones, pero
normalmente se le dá utilidad mediante JavaScript, mediante el evento "OnClick". Sus parámetros son:
o name=" nombre", que asigna un nombre al botón, que nos puede servir para acciones con
lenguaje de script.
o value=" valor ", que define el texto que va a figurar en el botón.
o disabled, que desactiva el botón, de tal forma que no se produce ninguna acción cuando se
pulsa, pués permanece inactivo.
o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los
elementos que incluye el formulario.

Ejemplo.-

<form action="mailto:[email protected]" method="post" enctype="text/plain" name="miform">

  <input type="Button" name="boton" value="pulsame">
</form>

con el que obtenemos:

 image, que introduce un botón definido por una imagen, en vez del formato estandar de botones, con lo
que podemos así personalizar el botón. Inicialmente su función era contener una localización de las
coordenadas que pinchara el usuario, para que luego el programa CGI realizara una acción u otra
dependiendo de estas. Pero actualmente se usa más para personalizar un botón de envío de datos; es
decir, su funcionalidad es análoga a la de submit, pero nos permite personalizar este elemento. Además
añadirá como información en el formulario las coordenadas x e y donde el usuario lo pulsó. Admite los
parámetros:
o name=" nombre", que asigna un nombre al botón para identificarlo de forma única y poder así
acceder luego a sus propiedades.
o src= " ruta imagen ", que establece la ruta dónde localizar el fichero de imagen. Esta ruta
puede ser relativa al directorio web en el servidor o una URL absoluta que define unívocamente la
lozalización de la imagen.
o width= " w ", que fija la anchura del botón de imagen.
o height= " h ", que fija la altura del botón de imagen.
o align= " left / middle / right / bottom / baseline...", que define la posición del texto que
rodea el botón respecto a este.
o hspace= " x ", que fija el espacio horizontal que habrá entre el botón y el texto que lo circunda.
o vspace= " x ", que fija el espacio vertical que habrá entre el botón y el texto que lo circunda.
o alt = " texto ", que asocia un texto explicativo al botón de imagen. Al situar el cursor encima del
botón se mostrará este texto en forma de tip de Windows. Siempre es conveniente poner este
atributo, para que en caso de navegadores de sólo texto, de que la imagen no se encuentre en la
ruta por cualquier motivo o de que la página tarde mucho en cragarse por su peso, el usuario
puede ver qué hace el botón de imagen y pueda en consecuencia utilizarlo para tal fin.
o disabled, que desactiva el botón, de tal forma que no se produce ninguna acción cuando se
pulsa, pués permanece inactivo.
o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los
elementos que incluye el formulario.
 o usemap= " #nombre de mapa ", que nos permite el uso de un mapa de imágenes en el
cliente como un dispositivo más de entrada de datos.

Ejemplo.-

<form action="mailto:[email protected]" method="post" enctype="text/plain" name="miform">

  <input type="image" name="boton" src="/images/contenidos/lecciones/1.jpg" width="50" height="20"
hspace="10" align="middle">
</form>

con el que obtenemos:

 púlsa aquí

 password, que define una caja de texto para contener una clave o password, por lo que el texto que
introduzca el usuario aparecerá como asteriscos, por motivos de seguridad. Sus parámetros opcionales son
los mismos que los del tipo text.

Ejemplo.-

<form action="mailto:[email protected]" method="post" enctype="text/plain" name="miform">

  <input type="password" size="15" maxlength="10">
</form>

con el que obtenemos:

introduce la clave de acceso: 

 hidden, que define un campo invisible, por lo que no se ve en pantalla. Aunque parece así definido que no
tiene utilidad, sus usos son varios e importantes, y los veremos más tarde. Sus atributos son:
o name=" nombre", que asigna un nombre identificador único al campo oculto.
o value=" valor ", que va a ser el valor fijo que se le va a pasar al programa del servidor, ya que
el usuario no puede modificarlo. En realidad este valor no tiene porqué ser fijo, ya que lo vamos a
poder modificar mediante código de script, lo que nos va a permitir ir pasando una serie de
variables ocultas de una página a otra.

Ejemplo.-

<form action="mailto:[email protected]" method="post" enctype="text/plain" name="miform">

  <input type="hidden" name="contraseña" value="123ABC">
</form>

 file = " ruta archivo ", que define un archivo que puede ser enviado junto con los datos del formulario, y
en donde la ruta puede ser relativa al directorio de carpetas del servidor o una ruta URL absoluta de
Internet. Debemos asegurarnos de que el tipo de archivo enviado esté dentro de los permitidos por la
etiqueta ACCEPT.

 submit, que incorpora al formulario un botón de envío de datos. Cuando el usuario pulsa este botón los
datos que ha introducido en los diferentes campos del formulario son enviados al programa del servidor o a
la dirección de correo indicada en action. Sus atributos son:
o value=" valor ", que define el texto que va a aparecer en el botón de envío.
 o disabled, que desactiva el botón, de tal forma que no se produce ninguna acción cuando se
pulsa, pués permanece inactivo.
o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los
elementos que incluye el formulario.

 reset, que define un botón que al ser pulsado por el usuario borra todos los datos que hubiera introducido
en cualquiera de los campos del formulario. Sus atributos son los mismos que los de SUBMIT.

ver ejemplo general nº 1.

Etiquetas <SELECT>...</SELECT>

Mediante esta etiqueta podemos definir una entrada de datos en forma de lista desplegable, que presenta varias opciones de elección, de tal
forma que el usuario puede elegir una o varias de ellas, si así se especifica.

Sus atributos y valores son:

o name=" nombre", que asigna un nombre identificador al campo, de tal forma que al enviar los datos del
formulario la opcción elegida será asociada a este nombre.
o size= " n ", con n= nº entero, que define el número de opciones visibles. Si n=1 el campo de selección se
presenta como una lista desplegable, mientras que si se indica otro valor se presenta como una caja de
lista con barra de desplazamiento.
o multiple, que permite elegir varias de las opciones a la vez. Si no se especifica este atributo solamente se
podrá escoger una de las opciones. Para ello hay que mantener pulsada la tecla CONTROL mientras se
seleccionan y/o deseleccionan las diversas opciones.
o disabled, que desactiva la lista, de tal forma que no se produce ninguna acción cuando se pulsa una
opción, pués permanece inactiva.
o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos
que incluye el formulario.

Para introducir cada una de las diferentes opciones de la lista se utiliza la etiqueta <OPTION>, que admite como parámetros:

o value, que fija el valor que será asociado al parámetro name de <SELECT> cuando se envíe el formulario.
Este valor debe ser único para cada opción.
o selected, que establece la opción por defecto. Si no se especifica este parámetro en ninguna opción se
tomará la primera de ellas por defecto.

La anchura de la lista desplegable vendrá determinado por el número de caracteres de la opción que más tenga.

Ejemplos.-

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

  selecciona una de los siguientes valores:
  <select>
  <option value="uno">uno
  <option value="dos">dos
  <option value="tres">tres
  </select>
</form>

con el que obtenemos:

uno
selecciona un de los siguientes valores:                     
<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">
  selecciona una de los siguientes valores:
  <select size="3">
  <option value="uno">uno
  <option value="dos">dos
  <option value="tres">tres
  </select>
</form>

con el que obtenemos:

uno
dos
tres
selecciona un de los siguientes valores:                     

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

  selecciona una de los siguientes valores:
  <select size="3" multiple>
  <option value="uno">uno
  <option value="dos">dos
  <option value="tres">tres
  </select>
</form>

con el que obtenemos:

uno
dos
tres
selecciona un de los siguientes valores:                     

Etiquetas <TEXTAREA>...</TEXTAREA>

Esta pareja de etiquetas inserta una caja de texto de múltiples líneas, que normalmente se utiliza para introducir comentarios o datos largos
en un formulario. Si no se introduce ningún texto entre ambas etiquetas la caja de texto aparecerá vacía, para que el usuario lo introduzca,
pero si introducimos algún texto entre ambas este aparecerá inicialmente en la caja. Si el texto que contiene supera el espacio disponible en
la caja aparecerá una barra de desplazamiento vertical. 

Sus atributos y valores son:

o name=" nombre",que asigna un nombre identificador al campo, que será asociado en el envío del
formulario al texto introducido en la caja de texto.
o cols=" x ", que define el número de columnas visibles de la caja de texto.
o rows= " y ", que define el número de filas visibles de la caja de texto.
o wrap= " valor ", que justifica automáticamente el texto en el interior de la caja. Este atributo es de uso
complicado.
Según las recomendaciones si su valor es VIRTUAL se enviará todo el texto seguido, en una línea,
mientras que si vale PHYSICAL el texto se enviará separado en líneas físicas, pero así como se define no
lo admiten los navegadores. Usemos cual usemos de los dos el resultado es el mismo: justificación por
líneas físicas, y así y todo se producen saltos de línea indeseados.
Si construimos la página web con un programa de ayuda tipo HomeSite nos encontramos con tres posibles
valores de wrap: SOFT y HARD, que hacen lo mismo, alineando el contenido en líneas físicas, como en los
casos anteriores y es el valor por defecto, y OFF, que coloca todo el texto de la caja en una sóla línea,
apareciendo entonces una barra de desplazamiento horizontal para poder visualizar todo el contenido de la
caja.
o disabled, que desactiva la caja de texto. Su utilidad es escasa.
o readonly, que impide que el contenido de la caja sea modificado por el usuario.
 o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos
que incluye el formulario.

Ejemplos.-

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

  introduce un comentario:
  <textarea name="comentario" cols="20" rows="10">
  </textarea>
</form>

con el que obtenemos:

introduce un comentario:

Ejemplos.-

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

  <textarea name="comentario" cols="20" rows="10">
  introduce un comentario:
  </textarea>
</form>

con el que obtenemos:

Ejemplos.-

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

  <textarea name="comentario" cols="20" rows="10" wrap="off">
  introduce un comentario:
  </textarea>
</form>

con el que obtenemos:

Ejemplos.-

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

  <textarea name="comentario" cols="20" rows="10" readonly>
  ahora no puedes escribir nada.
  </textarea>
</form>

con el que obtenemos:

< Anterior Siguiente >

 Etiquetas <BUTTON>...</BUTTON>

A partir de la implementación de los estándares HTML 4.0 contamos con varias etiquetas nuevas para construir formularios, siendo BUTTON
una de ellas, bastante util por cierto. La pega es que las versiones de 4 de Nestcape se lanzaron antes de estas implementaciones, por lo que
estas nuevas etiquetas sólo se pueden visualizar correctamente con Internet Explorer 4 y superiores.

Esta etiqueta proporcina un método único para la implementación de cualquier tipo de botón de formulario. Sus principales atributos son:

o type= " tipo ", que puede tomar los ya conocidos valores submit (por defecto), reset y button.
o name= " nombre ", que asigna un nombre identificador único al botón.
o value= " texto ", que define el texto que va a aparecer en el botón.

La principal ventaja que aporta estas etiquetas es que ahora vamos a poder introducir dentro de ellas cualquier elemento de HTML, como
imágenes y tablas.

Ejemplos.-

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

  <button name="boton_1" type="button">
  <table width="10" cellspacing="0" cellpadding="2" border="1">
  <tr>
    <td>uno</td>
    <td>dos</td>
  </tr>
  <tr>
    <td>tres</td>
    <td>cuatro</td>
  </tr>
  </table>
  </button>
</form>

con el que obtenemos: (en Nestcape sólo se verá la tabla, no el botón)

d
o
s
c
u
a
t
r
o

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

  <button name="boton_1" type="button">
  <img src="images/pajaro.gif" width="75" height="30" border="0" alt="enviar">
  </button>
</form>

con el que obtenemos: ( en Nestcape sólo se verá la imagen, no el botón)

Etiquetas <LABEL>...</LABEL>

Hasta hora, el texto que acompañaba a los campos de entrada no estaba asociado a los mismos de ninguna manera. Así, por ejemplo, si
pulsábamos en el texto que acompañaba a un control de confirmación, no sucedía nada. Ahora, en cambio, si utilizamos la etiqueta LABEL, el
control cambiará de estado (sólo disponible en Netscape 5).

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

  <label>
  <input type="checkbox" name="correo">
  deseo que me envíen correo
  </label>
</form>

Etiquetas <FIELDSET>...</FIELDSET>

Hasta ahora, no disponíamos de ninguna manera de agrupar visualmente varios controles, si no echábamos mano de elementos que no son
del formulario, como tablas o imágenes.

Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se mostrará un rectángulo alrededor de los mismos. Además,
podemos indicar un título por medio de la etiquetaLEGEND, que admite el parámetro align="left / center / right / top /bottom", lo que
nos permite alinear el título horizontal y verticalmente. La única pega es que deberemos introducir el conjunto en una celda de tabla con un
ancho determinado, ya que si no lo hacemos así el recuadro abarcará todo el ancho de pantalla disponible.
Ejemplo.- (Sólo para I. Explorer)

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

  <table width="200">
  <tr>
    <td>
    <fieldset>
      <legend align="left"><font color="red">Caja de texto</font></legend>
      pon tu nombre:
      <input type="text" size="15">
    </fieldset>
    </td>
  </tr>
  <table>
</form>

con el que obtenemos:

Caja de textopon tu
nombre:

Formularios con estilos

Los formularios constituyen una buena herramienta con la que podemos volver nuestras páginas web más
interactivas, pero los diferentes elementos que los componen presentan bastantes limitaciones a la hora del diseño
"estético" de la página. Esto es debido a que son objetos predefinidos, y como tales tienen una propiedades que
hasta hace poco eran fijas e inmutables.

Hace poco Microsoft, en su empeño por convertir cada elemento HTML en un objeto libre con sus propiedades y
métodos, implementó el uso de Hojas de Estilo en Cascada (CSS) a estos elementos, permitiendo con ello modificar a
nuestro gusto diversas características de los componentes de un formulario, dándonos con ello un grán abanico de
posibilidades de diseño. Por desgracia, casi todas estas implementaciones son ignoradas por Nestcape, con lo que el
poder que podíamos conseguir con esta técnica queda disminuido notablemente. La única solución viable pués si
queremos modificar el funcionamiento estandar de los elementos de un formulario es intentar compaginar un diseño
personalizado de nustra página para aquellos navegantes que nos visiten usando Explorer con un diseño estandar
válido para los que lo hagan con Nestcape. Y esto mismo nos va a ocurrir con casi todos los elementos HTML.

* estilos para cajas de texto.

Las cajas de texto presentan varias limitaciones en cuanto a su diseño clásico. Para empezar, el tamaño de las
mismas viene definido mediante el atributo size="n", y mediante diferentes valores de n podemos aumentar o
disminuir la anchura de la caja. Pero estas unidades de medida no son todo lo exactas que a veces podemos
necesitar, ya que el aumento de una unidad en el valor de n se traduce en un aumento de anchura de 6 - 7 píxeles,
que puede ser excesivo margen para nustro gusto, por ejemplo si trabajamos en una página en que estamos
condicionados a diseñar "al píxel".

Existen otras muchas limitaciones a la hora de trabajar con cajas de texto: color de fondo de la caja, que siempre por
defecto es blanco, color del texto (negro), tamaño y familia de fuente, altura de la caja, alineación del texto dentro
de ella (a la izquierda), etc. Todas ellas podemos adaptarlas a nuestras necesidades mediante hojas de estilo,
pero sólo se verán así en I. Explorer, ya que en Nestcape aparecerán con el formato clásico ( y esto nos vale
para todo lo que digamos en adelante de hojas de estilo en formularios).

Ejemplos.-

<form>
  <input type="Text" style="width:100px;height:20px;background-color:red;color:yellow;font-size:10pt; font-
family:Verdana;text-align:center;">
</form>

que nos da:

<form>
  <input type="Text" style="width:200px;height:50px;background-color:yellow;color:blue;font-size:14pt;font-family:
Comic Sans MS;text-align:right;padding-right:10px;">
</form>

que nos da:

<form>
  <input type="text" style="width:70px;height:30px;font-size:12pt;font-family:Helvetica;font-weight:bold;
color:green;border-width:thin;border-style:solid;border-color:green;background-image:url(images/1.jpg);">
</form>

que nos da:

Los atributos de CSS que se manejan son:

 width, que fija la anchura de la caja.

 height, que fija la altura de la caja.
 background-color, que determina el color de fondo, y cuyo valor puede venir dado en su nombre web en
inglés o como formato hexadecimal.
 color, que define el color de la fuente, y cuyo valor puede venir dado en su nombre web en inglés o como
formato hexadecimal.
 font-family, que fija el tipo de la fuente.
 text-align, que define la alineación del texto en la caja.
 padding-right (left / top/ bottom), que fija el margen entre el extremo derecho (izquierdo / superior
/inferior) de la caja y el texto que contiene.
 border-width (thin / medium / thick / none), que define el ancho del borde.
 border-style (none / solid / double / groove / ridge / inset / outset), que fija el estilo del borde.
 border-color, que define el color del borde.
 background-image, que establece una imagen de fondo para la caja de texto.. Este atributo no es
soportado por Nestcape en ninguno de los elementos de formulario, y simplemente lo ignora.

y de igual forma se pueden usar todos aquellos atributos CSS que consideremos necesarios. En estos ejemplos
Nestcape sólo aceptaría el tamaño de la fuente, el tipo de esta y la anchura de la caja, adaptando la altura a la
fuente, y los bordes los pintará aparte de la caja, como un elemento aparte, con lo que el resultado no es el
deseado.

La "pega" que encontramos al usar CSS en cajas de texto es que una atributo pripio de ellas como
es maxlenght queda anulado en cuanto introducimos un estilo, por lo que no podremos usar las dos cosas juntas.
Si queremos usar CSS y a la vez determinar un número máximo de caracteres de entrada en la caja de texto
tendremos que usar una función JavaScript.

* estilos para botones de radio.

El planteamiento es análogo al de las cajas de texto que hemos visto, pero debido a que este campo de formulario es
sólo un botón sin texto intrínseco, las propiedades de CSS que podremos usar son más limitadas.

Ejemplos.-
<form>
  <input type="radio" name="opcion" value="uno" style="width:200px;height:50px;background-color:yellow;">
  <input type="radio" name="opcion" value="dos" style="width:200px;height:50px;background-color:blue;border-
width:thick;border-style:solid;
border-color:red;">
</form>

que nos da:

<form>
  <input type="radio" style="width:70px;height:30px;border-width:thin;border-style:solid;
border-color:green;color:#000000;background-image:url(images/1.jpg);">
</form>

que nos da:

Explorer nos mostrará los botones de radio con las dimensiones definidas, pero Nestcape los mostrará con sus
dimensiones estandar. Lo que sí aceptan ambos navegadores en el color de fondo, y esto es muy importante, ya que
si nuestra página tiene un fondo de color definido y no especificamos el mismo color para el botón de radio Explorer
adaptará el color del contorno del mismo al de la página, pero Nestcape no, con lo que se verá un cuadrado de color
blanco alrededor del botón, cosa que afea mucho el diseño. Por esto: "siempre que utilicemos botones de radio en
páginas con un color de fondo que no sea blanco deberemos utilizar CSS para darle al botón el mismo color de fondo
que el que tiene la página."

Otro factor importante a la hora de trabajar con botones de radio en recordar que siempre debemos establecer los
atributos name y value, ya que si no Nestcape no activará los botones. Y si le damos un borde determinado al
botón, hay que tener en cuenta primero que las dimensiones del botón se adpatarán para que el tamaño total, borde
incluido, sea el definido en el estilo, por lo que lo que es el botón en sí se reducirá, y segundo que Nestcape no
pintará el borde alrededor del botón, si no que lo hará aparte, fuera de este, con lo que el efecto conseguido no es el
deseado.

* estilos para checkbox.

Al igual que con los botones de radio podemos utilizar aquellos atributos CSS que no afecten al texto, teniendo los
mismos atributos y problemas respecto a los navegadores.

Ejemplos.-

<form>
  <input type="Checkbox" style="width:50px;height:50px;background-color:yellow;">
  <input type="checkbox" style="width:50px;height:50px;background-color:blue;border-width:thick;
border-style:double;border-color:red;">
</form>

que nos da:

<form>
  <input type="checkbox" name="valor" value="uno" style="width:70px;height:30px;border-width:thin;border-
style:solid;border-color:green;
color:#000000;background-image:url(images/1.jpg);"">
</form>

que nos da:

* estilos para botones.

Los botones (type button, submit y reset) admiten los siguientes atributos CSS de estilo:

 width, que fija la anchura del botón.

 height, que fija la altura del botón.
 background-color, que determina el color de fondo, y cuyo valor puede venir dado en su nombre web en
inglés o como formato hexadecimal.
 background-image, que determina una imagen de fondo.
 color, que define el color de la fuente, y cuyo valor puede venir dado en su nombre web en inglés o como
formato hexadecimal.
 font-family, que fija el tipo de la fuente del texto del botón.
 font-size, que define el tamaño del texto del botón.
 font-weight, que fija el peso de la fuente (cantidad de negrita).
 text-align, que define la alineación del texto en el botón.
 padding-right (left / top/ bottom), que fija el margen entre el extremo derecho (izquierdo / superior
/inferior) del botón y el texto que contiene.
 border-width (thin / medium / thick / none), que define el ancho del borde.
 border-style (none / solid / double / groove / ridge / inset / outset), que fija el estilo del borde.
 border-color, que define el color del borde.

Ejemplos.-

<form>
  <input type="button" style="width:50px;height:50px;.background-color:yellow; value="botón">
  <input type="button" style="width:70px;height:50px;background-color:blue;border-width:thin;border-style:solid;
border-color:red;color:#ffffff;font-size:12pt;font-family:Verdana;font-weight:bold;" value="botón">
</form>

que nos da:

 

<form>
  <input type="button" name="boton" value="uno" style="width:70px;height:30px;border-width:thin;border-
style:solid;border-color:green;
color:#000000;background-image:url(images/1.jpg);">
</form>

que nos da:

En Nestcape sólo se apreciaran los atributos de texto, como el tipo, tamaño y peso de la fuente, pero no se
apreciarán ni colores de fuente ni de fondo. Los bordes aparecerán aparte del botón, por lo que es conveniente que
si queremos usar botones con borde es mejor utilizar una imagen como botón o utilizar un botón "fabricado"
mediante capas (DIV y/o SPAN).

NOTA: Si usamos bordes para Explorer tenemos aún más facilidad de construcción, ya que podemos definir qué
bordes en concreto queremos que se vean. Para más información consultar manual de CSS.

* estilos para botones de imagen.

Admiten los atributos CSS de anchura, altura y bordes. De ellos sólo es nuevo el referente a bordes, ya que en los
propios atributos del botón imagen podemos definir su tamaño mediante width y height. En cuanto a los bordes,
Nestcape los muestra aparte del botón, mostrando este con unos bordes azules por defecto si ni incluimos el atributo
de imagen border="0".

Ejemplo.-

<form>
  <input type="button" style="width:50px;height:50px;.background-color:yellow; value="botón">
  <input type="image" src="images/1.jpg" width="70" height="30" border="0"
style="width:70px;height:30px;border-width:thin;border-style:solid;border-color:red;"> 
</form>

que nos da:

NOTA: Si queremos definir un botón con un color de fondo. que sea visible en ambos navegadores, y puesto que
Nestcape no admite este atributo, deberemos utilizar un botón de tipo image, estableciendo como imagen de fondo
simplemente un gráfico del color que deseemos. El inconveniente es que este tipo de botones no admiten el
parámetro value, por lo que si queremos que aparezca un texto en el botón deberá estar este incluido en la propia
imagen de fondo.

NOTA: En Nestcape, puesto que no reconoce para este tipo de botón los atributos de estilo de anchura y altura
deberemos especificar estos como parámetros width y height del propio botón ya que si no es así mostrará la imagen
con sus dimensiones originales. Es por eso que no los introducimos dentro de style, si no como atributos de botón.

* estilos para listas de selección.

I.Explorer admite prácticamente todos los atributos de estilo, salvo los de bordes y el de imagen de fondo. No admite
este, pero sí el de color de fondo, admitiendolo tanto para toda la lista, si lo incluimos en el estilo de la etiqueta
SELECT como opción por opción, si lo incluimos dentro de cada etiqueta OPTION. Nestcape no admite ninguna de
ellos, y para determinar en él el tamaño de fuente y la clase de la misma hay que recurrir a las etiquetas <FONT
SIZE="tamaño" FACE="familia">, con los inconvenientes que utilizar estas etiquetas ya depreciadas conlleva. En
este caso, la anchura y la altura de la lista dependerá del tamaño y tipo de fuente elegido (para Nestcape).

Ejemplos.-

<form>
<font face="Courier" size="1">
  <select style="width:170px;height:50px;color:red;background-color:yellow;font-size:12px;font-family:courier;">
  <option value="uno">uno
  <option value="dos">dos
  <option value="tres">tres
</font>
</form>

uno
                               

<form>
<font face="Comic Sans MS" size="2">
  <select style="width:100px;height:50px;font-size:12px;font-family:Comic Sans MS;">
  <option value="uno" style="color:red;background-color:yellow;">uno
  <option value="dos" style="color:#333300;background-color:#ccff00;">dos
  <option value="tres" style="color:#996600;background-color:#66ccff;">tres
  <select>
</font>
</form>

uno
                               
* estilos para cajas de texto múltiples.

Las cajas de texto de varias líneas y columnas, definidas por la pareja de etiquetas <TEXTAREA>...</TEXTAREA>,
admiten en Explorer todas los atributos de estilo, incluyendo una imagen de fondo para la caja. Nestcape no
reconoce ningún atributo de estilo, debiendo especificar el tamaño y la familia de la fuente dentro de la etiqueta
FONT.

Ejemplos.-

<form>
<font face="Comic Sans MS" size="3">
<textarea name="comentario" cols="20" rows="5" style="width:200px;height:100px;font-size:12px;font-
family:Comic Sans MS;background-image:url(images/1.jpg);color:red;asdas">
</textarea>
</font>
</form>

<form>
<font face="Helvetica" size="3">
<textarea name="comentario" cols="20" rows="5" style="width:200px;height:100px;font-size:12px;font-
family:Helvetica;background-color:green;color:yellow;">
</textarea>
</font>
</form>

* estilos para etiquetas BUTTON.

Esta etiqueta no es reconocida por Nestcape, por lo que lo que digamos en adelante es sólo aplicable a Explorer.
Este reconoce todas la etiquetas de estilo, presentando este elemento de formulario la grán ventaja de que admite
tanto imagen de fondo como texto y cualquier otro elemento HTML en su interior, por lo que presenta múltiples
usos. Como observación, si empleamos elementos HTML dentro del botón, como por ejemplo una tabla, los estilos de
color de texto deben ser definidos bien mediante la etiqueta FONT dentro de la tabla, bien dando estilo de texto
mediante CSS a la tabla en sí; si no lo hacemos así normalmente el texto aparecerá en color negro. El tipo de fuente
y el tamaño sí lo cogen directamente del estilo del botón. La pena es que no podremos usarla para construir páginas
que deban ser visualizadas en ambos navegadores, con lo que su uso es por esto desaconsejable. En el caso de un
botón de este tipo con una tabla dentro, Nestcape sólo visualizará la tabla.

Ejemplo.-

<form>
<button name="boton_1" type="button" style="color:blue;width:100px;height:60px;font-size:12px;font-
family:Comic Sans MS;background-image:url(images/1.jpg);">
<table width="50%" height="50%" cellspacing="0" cellpadding="2" border="1">
  <tr>
    <td>uno</td>
    <td>dos</td>
  </tr>
  <tr>
    <td>tres</td>
    <td>cuatro</td>
  </tr>
</table>
</button>
</form>

uno dos
tres cuatro

* posicionamiento de elementos de formulario.

Lo que sigue ahora es también exclusivo de Explorer, y es una aplización directa de las Hojas de Estilo en Cascada y
del hecho de que este navegador reconoce cualquier elemento HTML como un objeto en sí mismo. Como
consecuencia de ello podemos usar los atributos de posicionamiento de CSS para situar relativa o absolutamente un
elemento en pantalla. Esto ofrece la grán ventaja de que no nos vemos sometidos a casi ninguna limitación en el
diseño, pudiendo situar nuestros elementos donde queramos.

Para posicionar elementos de formulario dentro de la ventana de nuestro navegador deberemos introducir los
parámetros position (absolute / relative), top. (normalmente en píxeles, y define la posición de la esquina superior
izquierda del elemento respecto al borde superior de la ventana del navegador) y left (normalmente en píxeles, que
determina la distancia respecto al borde izquierdo de la ventana del navegador) dentro del atributo style del
elemento.

La sintaxis general sería del tipo:

<form>
  <input type="Text" style="width:100px;height:20px;background-color:red;color:yellow;font-size:10pt; font-
family:Verdana;text-align:center;position:absolute;top:50px;left:200px;">
</form>

que nos situaría la caja de texto a 50 píxeles por debajo del borde superior de la ventana del navegador y a 200
píxeles del borde izquierdo.

Ver resultado

En el caso de que varios elementos se superpusieran aparecería aquel que estuviera situado antes en la estructura
del código HTML de la página. Esto se puede cambiar mediante el atributo z-index, que define una coordenada z o
de profundidad de los elementos en la página.

<form action="cgi-bin/control.cgi" method="post" enctype="text/plain" name= "miform">

  <textarea name="comentario2" cols="20" rows="10" style="position:absolute;top:50px;left:50px;z-index:1;">
  </textarea>
  <textarea name="comentario2" cols="20" rows="10" style="position:absolute;top:70px;left:70px;z-index:2;">
  </textarea>
</form>

Ver resultado

* posicionamiento mediante capas.

El grán inconveniente de posicionar elementos de formulario mediante estilos directos es que aquellos visitantes que
usen Nestcape Navigator no verán una página agradable entonces. ¿Qué podemos hacer si queremos posicionar un
elemento para que sea visible en ambos navegadores?.
La solución pasa por colocar los elementos dentro de una capa, creada mediante las etiquetas <DIV> y/o <SPAN>,
con sus respectivas de cierre. Con esto, podemos posicionar estas capas, y con ellas los elementos que contienen, en
nuestra página, y esto será comtemplado adecuadamente por los dos navegadores.

Un ejemplo de esto sería, basándonos en el anterior:

<form action="cgi-bin/control.cgi" method="post" enctype="text/plain" name= "miform">

    <div style="position:absolute;top:50px;left:50px;width:200px;height:200px;clip:rect(0,200,200,0);z-index:1;"> 
      <textarea name="comentario1" cols="20" rows="10"></textarea>
    </div>
    <div style="position:absolute;top:90px;left:90px;width:200px;height:200px;clip:rect(0,200,200,0);z-index:2;"> 
      <textarea name="comentario2" cols="20" rows="10"></textarea>
    </div> </form> 

Ver resultado

Y así y todo seguimos con las pegas en Nestcape, ya que las capas se activan al coger el foco el textarea que
contienen, con lo que se produce una situación liosa. Además, para que funcione esto bien deberemos introducir en
cada capa la pareja de etiquetas <form>...</form>, lo que nos va a ocasionar bastantes quebraderos de cabeza a la
hora de recoger los datos para enviarlos y de validar y acceder mediante JavaScript a todos los elementos que
tengamos. Con Explorer esto no ocurre, ya que siempre la primera textarea estará debajo de la segunda, aunque
reciba el foco.

De todas formas lo dicho en este capítulo sobre elementos superpuestos es sólo orientativo, ya que pocas veces
vamos a necesitar utilizar este efecto.

Maquetación de formulario

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 página.

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 será
valida si estamos diseñando para I. Explorer, es decir, que no debemos usarla nunca, ya que siempre debemos crear
páginas para ambos navegadores. A título teórico veremos esta forma, pero sólo para eso.

* Maquetación mediante tablas.

La técnica más general para maquetar una página 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.

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 más 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 (&nbsp;) 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 (&nbsp;)
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
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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
  &nbsp;&nbsp;<input type="checkbox" name="musica" value="pop" checked>Pop
  &nbsp;&nbsp;<input type="checkbox" name="musica" value="heavy">Heavy
  &nbsp;&nbsp;<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

FORMULARIOS HTML
Ejemplo 5

 
Por favor, rellena estos datos

Nombre:

Apellidos:

Direción:

Código Postal:

Marca tu equipo Real Madrid       Atlético de

favorito: Madrid
Marca tu
música Rock    Pop    Heavy   
favorita: Tecno
Elige un
escritor:
¿Algún
comentario?

enviar borrar