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-formurlencoded". 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
o
o

readonly, que establece que el texto no puede ser modificado por el
usuario.
tabindex = " n ", que especifica el orden de tabulador que tendrá el
campo respecto todos los elementos que incluye el formulario.
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
Ejemplo.<form action="mailto:yo@miservidor.com" 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:
Barcelona



Real Madrid

Atlético de Madrid

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



value=" valor ", que define el texto que va a aparecer en el botón de
envío.
disabled, que desactiva el botón, de tal forma que no se produce ninguna
tabindex = " n ", que especifica el orden de tabulador que tendrá el

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

o

o

o
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.
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.
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.
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.
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
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.
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">
<select size="3">
</select>
</form>

name="miform">
<select size="3" multiple>
</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
o
o
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.
cols=" x ", que define el número de columnas visibles de la caja de texto.
rows= " y ", que define el número de filas visibles de la caja de texto.
wrap= " valor ", que justifica automáticamente el texto en el interior de la caja.
Este atributo es de uso complicado.

o
o
o

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.
disabled, que desactiva la caja de texto. Su utilidad es escasa.
readonly, que impide que el contenido de la caja sea modificado por el usuario.
tabindex = " n ", que especifica el orden de tabulador que tendrá el campo
respecto todos los elementos que incluye el formulario.

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

name="miform">
</textarea>
</form>


name="miform">
<textarea name="comentario" cols="20" rows="10" wrap="off">
</textarea>
</form>

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

ahora no puedes escribir nadar

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

type= " tipo ", que puede tomar los ya conocidos valores submit (por defecto),
reset y button.
name= " nombre ", que asigna un nombre identificador único al botón.
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.
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)

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

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)
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;backgroundcolor: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;backgroundcolor:yellow;color:blue;font-size:14pt;font-family: Comic Sans MS;textalign:right;padding-right:10px;">
</form>
que nos da:
.
<form>
<input type="text" style="width:70px;height:30px;font-size:12pt;fontfamily:Helvetica;font-weight:bold;
color:green;border-width:thin;border-style:solid;border-color:green;backgroundimage: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;borderstyle:solid;
border-color:red;">
</form>
que nos da:

<form>
<input type="radio" style="width:70px;height:30px;border-width:thin;borderstyle: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;backgroundcolor: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;borderwidth: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;fontsize:12px;font-family:courier;">
</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;backgroundcolor: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;backgroundcolor:red;color:yellow;font-size:10pt; font-family:Verdana;textalign: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,2
00,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,2
00,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-formurlencoded">
<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>
name="direccion"></td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Código Postal:</b></td>
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="atletico">Atlético de Madrid
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Marca tu música favorita:</b></td>
</td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Elige un escritor:</b></td>
<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>
</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);backgroundcolor:#ccff33;layer-background-color:#ccff33;padding-left:5px;fontfamily: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;fontfamily:Verdana;font-size:8pt;font-weight:bold;padding-top:3px;}
.boton{width:195px;height:30px;clip:rect(0,195,30,0);background-color:Fuchsia;layerbackground-color:Fuchsia;padding-left:5px;padding-top:3px;font-family:Verdana;fontsize:8pt;font-weight:bold;}
.boton2{width:265px;height:30px;clip:rect(0,265,30,0);backgroundcolor:Fuchsia;layer-background-color:Fuchsia;padding-left:5px;padding-top:3px;fontfamily:Verdana;font-size:8pt;font-weight:bold;}
.campo{width:265px;height:25px;clip:rect(0,265,25,0);background-color:#ccffff;layerbackground-color:#ccffff;padding-left:5px;padding-top:1px;}
.campo2{width:265px;height:168px;clip:rect(0,265,168,0);backgroundcolor:#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,46
4,25,0);background-color:Fuchsia;layer-background-color:Fuchsia;textalign: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="atletico">Atlético de Madrid
</div>
<div id="capaF0" class="mensaje">Marca tu música favorita:</div>
<div id="capaF1" class="campo">
</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>
</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.
_javascript2.php

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

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

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

- 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.
_javascript6.php

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

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

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

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

- 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.
_javascript7.php

- 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.
_javascript13.php

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

- 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.
_javascript9.php

- 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.
_javascript15.php

- 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.
_javascript16.php

- 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.
_javascript17.php

- 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.
_javascript18.php

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

- 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.
_javascript20.php

- 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.
_javascript21.php

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

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

- 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.
_javascript24.php

- 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.
_javascript25.php

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

- 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.
_javascript27.php

- 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.
_javascript28.php

* 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

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Formularios web

Más de Nadin David Herrera

Formularios web