formularios web

Los Formularios Web

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>


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


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>


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


Ejemplo.-

<form action="mailto:[email protected]" method="post" enctype="text/plain" name="miform"> <input type="Button" name="boton" value="pulsame"></form>


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 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>


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>


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.


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.

Ejemplo:

Ejemplo 1

entra tu nombre y apellidos:

elije un tema:

ciencia

arte

literatura

marca tus aficiones:

deporte

música

lectura

pesca

entra la contraseña de usuario:

enviar datos borrar datos

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.


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.


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>


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>



<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>



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.


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>


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>


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>


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>




< 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>

ahora no puedes escribir nadar

</button></form>

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

<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 etiqueta LEGEND, 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>


Caja de texto pon 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>

<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>

* 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>

* 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 ( ) 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 página 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 está activo');"></div><div id="capaI1" class="boton2"><input type="reset" value="borrar"></div></form></body></html>

y vemos que el resultado es análogo 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.

JavaScript y Formularios

Como ya hemos visto anteriormente el principal uso de los formualrios es el de recopilar información de todo tipo sobre la persona que visita nuestra página, que podemos utilizar luego para muy diversos fines:inclusión en listas de correo, corrección de nuestras páginas basándonos en la opinión de nuestros visitantes, recepción de artículos y programas por, etc.

Pero si bien los formularios son muy útiles si los sabemos usar bien, por sí sólos tienen poca utilidad, y esto es debido a que co el uso exclusivo de HTML podemos crear el formulario, pero no disponemos de herramientas que nos permitan ni procesar los datos recibidos, ni validar los datos introducidos antes de su envío ni dar vida a los campos para que la interactividad con el usuario sea la adecuada.

Estas utilidades se consiguen mediante el uso de diversas tecnologías que deben ir siempre unidas a los formularios y al HTML. Entre ellas caben destacarse:

* JavaScript, que es el alma propia de la iteractividad de los formularios en el lado cliente, y que nos va a permitir validar los datos antes de su envío, establecer interacciones entre los diferrentes elementos del formulario, poder acceder a todos o algunos de los elementos del formulario para poder cambiar sus atributos o aspecto, etc.

* CGI, abreviatura de COMMON GATEWAY INTERFACE, que es una tecnología que permite el procesamiento de los datos del formulario en el lado del servidor, para poder incorporarlos a una base de datos, enviarlos mediante e-mail de una forma comprensible, etc. Se basa en unos programas escritos normalmente en C o en Perl, que suelen estar en el servidor en una carpeta especial llamada cgi-bin.

* ASP - JSP, abreviaturas de Active Server Pages y Java server Pages, que son tecnologías de páginas activas en el servidor, que mediante la inclusión en las páginas de código escrito en Visual Basic Script o JavaScript permiten establecer conexiones con bases de datos, validar campos, enviar páginas de respuesta edacuadas, etc.

Todas estas tecnologías escapan al fin de este manual, existiendo en la red gran cantidadd e manuales de todas ellas, y a los que os refiero para poder comprenderlas y utilizarlas.

Lo que sí voy a hacer en este capítulo es indicar diferentes utilidades que le podemos dar a los formularios en unión con JavaScript y mostrar una serie de ejemplos de cada una de ellas, poniendo a vuestra disposición el código fuenta que las origina. La mayoría de estos ejemplos los he recopilado en mis ratos en la red, por lo que no los he escrito yo. POr esto pido a los autores de los mismos que si no omenciono su nombre explicitamente en bien porque no lo se, bien po no hacer este capítulo demasiado extenso. Gracias a todos ellos por su contribución al avance de la programación web.

* Validación de formularios.

El uso más general de los formularios ya hemos visto que es la recoìlación de datos del usuario, pero es muy importante que este rellen los campos que nosotros deseamos y que los datos que en ellos introduzca sean lo más reales posibles.

Todos nos hemos visto en la necesidad de tener que rellenar alguna vez un formulario, y hemos experimentado esa sensación de intromisión en nuestra intimidad que supone mandar por la red a alguien que no conocemos nuestr datos personales.

Por lo tanto se hace necesario un proceso de verificación de estos datos, que en el lado del cliente lo vamos a realizar usando JavaScript.

Vamos a ver cómo se validan los datos de elementos simple, ya que luego la validación de todo el formulario será la suma de realizar este proceso con todos los campos que lo forman. Para ver el código fuente que crea los script, simplemente pulse sobre la ventana del script con el botón derecho del ratón y seleccione "ver código fuente".

* Validación de una caja de texto:

- El primer paso será comprobar que el usuario no deje el campo en blanco. El siguiente ejemplo lanza un mensaje de error si se pretende enviar el formulario con la caja de texto sin rellenar, y devuelve el foco a la misma. ver ejemplo.

http://www.webtaller.com/construccion/lenguajes/html/lecciones/formularios_html_ejemplo_javascript1.php

- También nos puede interesar que en cada palabra de las introducidas en la caja su primera letra pasa a mayúscula. ver ejemplo.


- O podemos hacer que sólo la primera letra del texto introducido pase a mayúscula. ver ejemplo.


- O que todo el texto introducido pase a mayúsculas. ver ejemplo.


- O tal revés, que todo el texto pase a minúsculas. ver ejemplo.












- También nos puede interesar quitar los espacios en blanco que se hayan introducido en la caja antes del envío, ya que estos pueden dar problemas al programa CGI. ver ejemplo.


- Otro script nos permite reemplazar espacios en blanco por el signo " + ". ver ejemplo.


- Podemos quitar los espacios en blanco al principio del texto, especialmente útil cuando queremos subir archivos al servidor. ver ejemplo.


- O quitarlos al final del texto, igualmente útil cuando queremos subir archivos al servidor. ver ejemplo.


- Y para subir archivos al servidor, ¿qué mejor que filtrar el tipo de estos permitido?. ver ejemplo.


- Podemos eliminar ciertas palabras que consideremos obscenas o de mal gusto antes del envío. En el siguiente ejemplo se han eliminado entre otras "sex, babes, shit, fuck, damn, porno, cum, cunt, prick, pecker, ass". Si el usuario introduce alguna de ellas, será inmediatamente sustituida por un conjunto de caracteres predefinido. ver ejemplo.














- Se puede establecer una caja de texto que no admita caracteres determinados, y que al introducir uno de ellos simplemente no lo escriba. ver ejemplo.


- O que no deje introducir comillas, ni dobles ni simples. ver ejemplo.


- Asímismo podemos eliminar la entrada de números el la caja de texto, para campos que queramos que sean exclusivamente para introducir letras. ver ejemplo.


- O usar un script que sólo permita la entrada de números, especialmente util para campos como códigos postales o números de cartillas de la seguridad social. ver ejemplo.


- Podemos especificar lo que se debe introducir en el campo en un mensaje inicial dentro de este, de tal forma que al poner el cursor dentro de la caja de texto el mensaje se borre. ver ejemplo.


- O podemos etablecer una ayuda más completa explicando el contenido de los campos. En este ejemplo se explican dos campos mediante ventanas, con copia de los datos introducidos al formulario original. ver ejemplo.














- En cuanto a trabajar con números, podemos por ejemplo validar que sólo se introduzcan números sin decimales o con dos decimales. ver ejemplo.


- Ahora que vamos a trabajar con Euros, podemos formatear una entrada de campo a euros con decimales. ver ejemplo.


- O afinando más podemos adaptar el script para que se ponga automáticamente el símbolo del euro y el número se formatee a comas decimales y a punto con dos decimales. ver ejemplo.


- Otro script muy util es el que valida una entrada de Código Postal, de tal forma que se deben introducir 5 dígitos en el campo. ver ejemplo.


- A la hora de manejar entradas de fecha podemos usar un completo script para que la entrada sea la deseada. ver ejemplo.


- Y para validar una entrada de e-mail disponemos de este completo script que valida la entrada a fondo. ver ejemplo.














- Si combinamos una caja de texto con ena lista de selección podemos facilitar al usuario la búsqueda de un término concreto entre una lista de preestablecidos. ver ejemplo.


- Y si lo que combinamos son dos cajas de texto podemos hacer que el usuario sólo pueda rellenar una de ellas, a su elección. ver ejemplo.


- O podemos verificar si la entrada en los dos campos es la misma, idoneo para verificar la entrada de una contraseña. ver ejemplo.


- Y si trabajamos con números de teléfono podemos lograr que se entre en un campo el prefijo y automáticamente se salte a otro campo para introducir el número, estando la longitud de ambos campos acotada. ver ejemplo.


- Uniendo varias cajas de texto podemos ir construyendo un formulario más complejo, aplicando a cada campo las reglas de validación oportunas. ver ejemplo.


* Javascript y checkbox:

La validación de que el usuario marque alguno de los checkbos de nuestro formulario es un asunto que no se adpata a la realidad de uso, ya que por propia definición los checkbox están para que se elija uno, varios o ninguno. Si deseamos que el usuario tenga que marcar una ý sólo una opción es mejor sustituir los checkbox por botones de radio, que son los elementos que en un formulario hacen eso precisamente.











Pero podemos ampliar la propia utilidad de estos elementos usando Javascript. Veamos unos ejemplos:

- Podemos obligar al usuario a que marque sólo un número determinado de opciones dentro de un conjunto de ellas. ver ejemplo.

- A pesar de lo dicho antes, si nos interesa los checkbox también pueden ser autoexcluyentes, pero sólo es conveniente su uso en casos como el de este ejemplo, en el que obligamos al usuario a elegir entre una opción que selecciona todas las demás o marcar las que desea una a una. ver ejemplo.

- Es posible implementar un botón que marque de una vez todos los checkbox de una colección, y otro que los desmarque. ver ejemplo.

- Y también otro adicional que invierta la selección previa. ver ejemplo.

- O establecer un único botón que alterne entra marcar y desmarcar todas las opciones a la vez. ver ejemplo.

* Javascript y checkbox:

Los radio button, por propia definición, permiten pocas florituras mediante Javascript, ya que su misión es permitir una sóla selección entre un grupo de ellas. No obstante, podemos dar a estos elementos alguna funcionalidad extra mediante este lenguaje de programación. Y como muestra algún que otro botón:

- Podemos asociar un mensaje de alerta al radio botón, de tal forma que cuando el usuario pinche en él se active este mensaje de advertencia. ver ejemplo.

- O también que en vez de ser un feo mensaje de advertencia sea una suave pregunta de confirmación (aunque en realidad tenga poca utilidad real, es una forma de quedar bien). ver ejemplo.

- Si asociamos dos botones de radio con una caja de texto podemos conseguir que sólo se pueda introducir datos en la caja si se selecciona el radio que nosotros establecemos (tipico ejemplo de las condiciones de aceptación de unas reglas). ver ejemplo.

Javascript y textarea:

Las areas de texto nos dan más juego cuando les aplicamos código Javascript, ya que son unos elementos que por propia definición son más configurables. Veamos unos ejemplos:

- Un script básico es aquel que nos permite limitar el número de caracteres que el usuario puede entrar el la caja. En este ejemplo si excede el número permitido se le pasa un mensaje de error, invitándole a introducir de nuevo el texto con las limitaciones establecidas. ver ejemplo.

- Pudiendo hacer este script más bonito si no permitimos que en un primer momento pueda introducir más caracteres de los permitidos y además le indicamos en un contador cuantos caracteres le quedan para llegar al límite. ver ejemplo.

- También podemos hacer que el texto introducido en la caja de justifique por sí sólo, y así recibiremos un texto formateado correctamente. Se puede conseguir fácilmente que la justificación se pruduzca al perder el foco el textarea, con lo que el usuario puede aprecia el cambio antes de enviar el formulario (anímese e inténtelo). ver ejemplo.

- Y continuando con el formateo del texto, aquí tenemos este script que nos convierte el introducido en la caja en código HTML con saltos de línea, ideal para convertir la información plana introducida por el usuario en código visible igual pero en un navegador. ver ejemplo.

- Un script útil es el que nos permite confeccionar con un textarea una entrada de datos explicativa y editable, para facilitar el trabajo a nuestro visitante. ver ejemplo.

- En sus viajes por la red habrá visto el típico ejemplo de código en un textarea, que se puede seleccionar por completo pulsando un enlace o un botón. Aquí va un ejemplo con un enlace. ver ejemplo.

- Pero también podemos hacer que se seleccione todo el texto símplemente poniendo el cursor sobre cualquier parte del mismo (es decire, al coger el foco el textarea). ver ejemplo.

- Y si queremos, la seleción se puede realizar al pulsar un botón, y podemos añadir una caja de texto que indique el tamaño en KB del código dentro del textarea. ver ejemplo.

- Otro uso de una caja de texto puede ser la de mostrar cierta información al visitante. En este ejemplo identificamos su navegador, y para que no pueda modificar el texto de información hacemos el textarea de sólo lectura. ver ejemplo.

Javascript y listas de selección:

Normalmente la unión de Javascript y listas de selección lleva a la creación de menús de navegación, bien entre páginas de un mismo sitio web bien como menú de enlaces con otros sitios. Esta aplicación de las listas de selección la veremos más adelante, dentro del capítulo formularios y menús.

Pero también podemos encontrar otros usos del lenguaje Javascript aplicado a las isitas de selección. Veamos algunos ejemplos:

- Imagine que queremos que nuestro visitante seleccione un día del més en curso. Podríamos introducir una caja de texto simple para realizar esta operación, o podríamos usar una lista de selección que contuviera símplemente opciones del 1 al 31. Pero podemos implementar esto de una manera correcta si facilitamos al visitante una lista de selección que incluye los días del més en curso, y que se renueva sóla cada més que pasa. ver ejemplo.

- Mediante una lista de selección y un textarea podemos crear una lista con explicación de cada opción. ver ejemplo.

- Si unimos dos listas podemos crear un mecanismo de selección múltiple, de tal forma que según el valor seleccionado en la primera cambiarán los valores de elección en la segunda. Note en este script cómo si seleccione la opción "otros" surgirá una ventana que le prguntará cual es el nuevo país, incluyéndolo entonces en la lista. ver ejemplo.

- El siguiente script es muy complejo en su implementación, ya que contiene en su código una cadena de valores hexadecimales. Introduciendo el Código Postal de un estado americano en la caja de texto aparecerá el estado correspondiente en la lista de selección. Si quiere configurarlo para otro país, en la línea donde pone "stateRange" debe hacer constar el código postal correspondiente a cada ciudad seguido de dos iniciales que le identifiquen unívocamente, y luego introducir una etiqueta <OPTION> cuyo valor sean estas iniciales. Como ejemplo de esto he introducido Madrid con su código, el 28041. ver ejemplo.

Javascript y botones:

Los elementos de formulario tipo botón son uno de los tipos más útiles, y no sólo en un formulario completo, si no también como elementos aislados, ya que siempre podemos asociarlos a funciones de Javascript, de tal forma que al pinchar el botón se ejecute esta. Vamos a ver ahora unos cuantos ejemplos del uso de botones con Javascript:

- Un ejemplo clásico es el botón que nos permite ver el código fuente de una página. ver ejemplo.

- En un formulario podemos implementar unos mensajes de confirmación cuando el usuario envía o/y borra los datos del mismo. ver ejemplo.

- Podemos asímismo crear un botón dinámico, que va cambiando el texto que en él aparece y el enlace a la página que lleva. ver ejemplo.

- O podemos crear un botón con estilos, con trés estados diferentes: inicial, al recibir el ratón y al quedar de nuevo suelto. ver ejemplo.

- Otro ejemplo clásico del uso de los botones son los botones de página anterior y página siguiente (Back y Forward), que nos permiten navegar por las páginas que hemos visitado anteriormente. Nota: en el ejemplo no se puede apreciar el efecto, ya que la ventana se abre nueva, por lo que no tiene historia).ver ejemplo.

- Vamos a crear ahora un botón saltarín, que siempre llama la atención. ver ejemplo.

- Y podemos implantar un botón que se escribe a sí mismo. ver ejemplo.

- Rizando el rizo, podemos crear un botón con estilo, que cambia sus mensajes de diferentes formas y que nos enlaza cada vez con una página diferente. Es un bonito script facil de personalizar. ver ejemplo.

formularios web

Documents