Make your own free website on Tripod.com

Creación de formularios

Los formularios nos permiten dentro de una página Web solicitar información al visitante y procesarla. En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedará asociado a una variable. Una vez se hayan introducido los valores en los campos, el contenido de estos será enviado a la dirección (URL) donde tengamos el programa que pueda procesar las variables. Hay dos formas de realizar y/o recibir los formularios: mediante un programa CGI del servidor o generado por el navegador. ¿Qué son ambas cosas?. El programa CGI se almacena en el servidor; mediante el formulario enviaremos la información al programa CGI y éste generará el mensaje de e-mail que nos llegará. La otra manera es mediante el navegador, el cual genera el mensaje de correo. Explicaremos la segunda forma, más genérica:

La estructura de un formulario es:

<FORM ACTION="mailto:dirección_de_email" METHOD="POST"
ENCTYPE="TEXT/PLAIN">
Elementos del formulario para introducir datos.
Botones de envío y de borrado.
</FORM>

Vamos a explicar cada uno de ellos: Etiqueta FORM inicial:

ACTION
indica la acción, en este caso que los datos se envíen a la dirección de correo indicada. Con un CGI aquí habría que escribir la URL del mismo.

METHOD=POST
indica que los datos se procesen al pulsar el botón de envío.

ENCTYPE=TEXT/PLAIN
indica que los datos se envíen sin codificación.

Elementos del formulario:

Cuadros de texto de una línea, mediante:

<INPUT TYPE="text" NAME="xxx" VALUE="yyy">

donde xxx indica el nombre de la información introducida e yyy indica si queremos que el formulario incluya alguna información inicial (por ejemplo, si hay que introducir la URL de una página WEB podemos poner en el cuadro de texto "http://"). Tiene dos modificadores: SIZE="x", que indica la longitud en pixeles, y MAXLENGHT="y", que indica el número máximo de caracteres a introducir.

Cuadros de texto oculto, mediante:

<INPUT TYPE="password" NAME="xxx">

donde xxx es el nombre de la información introducida. Ideal para poner contraseñas o passwords. Tiene los dos mismos modificadores que el anterior.

Cuadros de texto con desplazamiento, mediante:

<TEXTAREA NAME="xxx" ROWS="y" COLS="z"></TEXTAREA>

donde xxx es el nombre de la información introducida, y el número de filas y z el número de columnas. Ideal para comentarios o descripciones largas.

Listas desplegables, mediante:

<SELECT NAME="xxx">
<OPTION>yyy
<OPTION>yyy
<OPTION>yyy
</SELECT >

...donde xxx es el nombre de la información introducida e yyy el nombre de cada opción de la lista introducida.

Botón de opción o de radio, mediante:

<INPUT TYPE="radio" NAME="xxx" VALUE="yyy">

donde xxx es el nombre de la información introducida e yyy es el nombre de cada opción en concreto. Habrá que introducir varias veces la etiqueta, y con CHECKED podemos hacer que se seleccione sólo uno de ellos. Ideal para seleccionar UNA opción entre VARIAS.

Casilla de verificación, mediante:

<INPUT TYPE="checkbox" NAME="xxx">

donde xxx es el nombre de la información introducida. Tiene el modificador CHECKED si queremos que se active por defecto. Ideal para seleccionar VARIAS opciones entre otras VARIAS.

Botones de envío y de borrado: Son fundamentales para el formulario. El de envío se hace con:

<INPUT TYPE="submit" VALUE="xxx">

donde xxx es el texto del botón.
También es posible colocar una imagen en el lugar del botón de enviado mediante:

<INPUT TYPE="image" SRC="imagen.gif" BORDER=0>

Esto no se puede hacer con el botón de borrado. El de borrado se hace con:

<INPUT TYPE="reset" VALUE="xxx">

donde xxx es el texto del botón.

Estructura de un formulario

Expliquemos un poco más al detalle la estructura general de un formulario, la misma es: 

  1. Etiqueta de inicio: 
    <FOR ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
  2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos. 
  3. Botones de envío y de borrado. 
  4. Etiqueta de cierre </FORM>

Etiqueta de inicio

El atributo ACTION indica la acción que se debe efectuar y que es que los datos sean enviados por email a la dirección indicada.

El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correo a la dirección de email, nada más pulsar el usuario el botón de envío.

Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un fichero de texto, perfectamente legible y sin codificar.

 

Elementos para introducir los datos

Los vamos a dividir en tres clases: 

  1. Introducción por medio de texto 
  2. Introducción por medio de menús 
  3. Introducción por medio de botones 

La introducción de los datos se consigue por medio de la etiqueta: 

<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">

En donde: 
xxx es la palabra que indica el tipo de introducción. 
yyy es el nombre que le asignamos nosotros a la variable de introducción del dato. 
zzz es la palabra asociada a un elemento. 

Todo esto, que de momento parece muy confuso, se aclarará al ir viendo los distintos casos. 

Introducción por medio de texto (una línea)

En este caso es xxx=text, es decir, INPUT TYPE="text". El atributo VALUE no procede en este caso. 

Vamos a poner un ejemplo: solicitamos el apellido del usuario. 

<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 
Escribe tu apellido: 
<BR><INPUT TYPE="text" NAME="Apellido"> 
</FORM>

Que resulta: 

Escribe tu apellido: 

Si el usuario introduce su apellido, p. ej. Ruiz, y pulsa el botón de envío (que veremos más adelante), recibiremos un email suyo con el siguiente texto: 

Apellido=Ruiz

La longitud de este formulario es por defecto de 20 caracteres. Se puede variar incluyendo en la etiqueta el atributo SIZE="número". Por otra parte, sea cual sea la longitud del formulario, si no se indica nada, el usuario puede introducir el número de caracteres que quiera. Se puede limitar esto, incluyendo en la etiqueta el atributo MAXLENGTH="número"

En el caso que hemos visto, si hubiéramos cambiado la etiqueta correspondiente por: 

<INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12">

Habríamos obtenido: 

Escribe tu apellido: 

(Se puede comprobar cómo no se pueden introducir más de 12 caracteres)

También se puede hacer que el texto introducido no sea reconocible, es decir que todos los caracteres se representen por asteriscos. Basta con cambiar en la etiqueta INPUT TYPE="text" por  INPUT TYPE="password". En el último ejemplo, si cambiamos la etiqueta correspondiente por:

<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">

Obtenemos: 

Escribe tu apellido

(Se puede comprobar cómo los caracteres introducidos se representan por asteriscos)

Introducción por medio de texto (múltiples líneas)

Cuando el texto a introducir puede alcanzar una gran longitud, por ejemplo un comentario, es conveniente utilizar un formulario de texto de múltiples líneas.

Esto se consigue con la etiqueta de inicio: 

<TEXTAREA NAME="yyy" ROWS="número" COLS="número">

(en donde no se utiliza INPUT TYPE y donde ROWS representa el número de filas, y COLS el de columnas).

y la de cierre: </TEXTAREA>

Ejemplo: un formulario solicitando los comentarios del usuario: 

<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 
Introduce tus comentarios: 
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40"> 
</TEXTAREA
</FORM>

Que resulta: 

Introduce tus comentarios: 

(El salto de línea del texto introducido no se efectúa automáticamente).

Una vez que el usuario haya escrito sus comentarios dentro del formulario, y haya pulsado el botón de envío, recibiremos un email suyo con el siguiente texto: 

Comentarios=Bla bla bla...

Introducción por medio de menús

Si queremos que el usuario, en vez de introducir un texto, como hemos visto en los casos anteriores, escoja entre varias opciones que le presentamos nosotros, haremos uso de un formulario en forma de menú. 

Se consigue con la etiqueta de inicio <SELECT NAME="yyy"> y la de cierre </SELECT>.
Las distintas opciones a escoger se consiguen con la etiqueta
<OPTION>.

Ejemplo: Pedimos al usuario que elija su color preferido: 

<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 
¿Cuál es tu color preferido? 
<BR><SELECT NAME="ColorPreferido"> 
<OPTION>Rojo 
<OPTION>Verde 
<OPTION>Azul 
<OPTION>Amarillo 
</SELECT
</FORM>

Que resulta: 

¿Cuál es tu color preferido? 

Si el usuario ha escogido, p. ej. Azul y ha pulsado el botón de envío, recibiremos un email suyo con el texto: ColorPreferido=Azul. 

En el ejemplo anterior, sólo es visible en el formulario una opción. Si queremos que sean visibles múltiples opciones a la vez, añadimos en la etiqueta los atributos MULTIPLE SIZE="número", donde especificamos el número de opciones visibles.

Si cambiamos en el ejemplo anterior la etiqueta correspondiente por: 

<SELECT NAME="ColorPreferido" MULTIPLE SIZE="2">

Obtenemos

¿Cuál es tu color preferido? 

 

Formulario de confirmación (checkbox)

Si queremos que el usuario confirme una opción determinada, podemos hacer uso de un formulario de confirmación, o checkbox, que se consigue con la etiqueta: 

<INPUT TYPE="checkbox" NAME="yyy">

Ejemplo: Solicitamos al usuario que confirme su inclusión en una lista de correo: 

<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 
<INPUT TYPE="checkbox" NAME="Lista"> 
Sí, deseo ser incluido en la lista de correo. 
</FORM>

Que resulta: 

Sí, deseo ser incluido en la lista de correo

Si el usuario marca este formulario y pulsa el botón de envío, recibiremos un email suyo con el texto: Lista=On. 

Si queremos que el formulario aparezca inicialmente como marcado (el usuario no necesitará hacerlo), basta con añadir el atributo CHECKED dentro de la etiqueta. En el ejemplo anterior si sustituimos la etiqueta equivalente por:

<INPUT TYPE="checkbox" NAME="Lista" CHECKED> 

Obtenemos: 

Sí, deseo ser incluido en la lista de correo. 

Botones de radio

Cuando queremos que el usuario elija una única opción entre varias, podemos hace uso de los botones de radio, que se consiguen con la etiqueta: 

<INPUT TYPE="radio" NAME="yyy" VALUE="zzz">

Donde yyy es el nombre que le ponemos a la variable que se trata de elegir, y zzz es el nombre de cada una de las opciones en concreto. 

Ejemplo: solicitamos al usuario que defina cuál es su sistema operativo preferido: 

<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 
¿Cuál es tu sistema operativo preferido? 
<BR
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC 
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac 
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix"> Unix 
</FORM>

Que resulta: 

¿Cuál es tu sistema operativo preferido? 
PC Mac Unix 

Obsérvese el atributo opcional CHECKED que se ha añadido en la primera etiqueta. Esa será la opción que aparece marcada por defecto. 

Obsérvese también que no es posible escoger más de una opción. 

Si el usuario ha escogido la opción PC y pulsa el botón de envío, recibiremos un email suyo con el texto: SistemaOperativo=PC. 

Botones de envío y de borrado

Hasta ahora, en todos los ejemplos que hemos visto, faltaba un elemento esencial en cualquier formulario, y es el botón de envío de los datos, que se consigue con la etiqueta:

<INPUT TYPE="submit" VALUE="zzz">

En donde zzz es el texto que queremos que aparezca en el botón. 

Vamos a añadirlo al primer ejemplo, en el que se solicitaba el apellido del usuario: 

<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 
Escribe tu apellido: 
<BR><INPUT TYPE="text" NAME="Apellido"> 
<P><INPUT TYPE="submit" VALUE="Enviar datos"> 
</FORM

Que resulta: 

Escribe tu apellido: 


Otro botón interesante es el de borrado de los datos introducidos, muy conveniente en un formulario con muchos elementos. Es muy similar al de envío, pues se consigue con la etiqueta:

<INPUT TYPE="reset" VALUE="zzz">

En donde zzz es el texto que queremos que aparezca en el botón. 

Si añadimos al ejemplo anterior la etiqueta: 

<P><INPUT TYPE="reset" VALUE="Borrar">

resulta: 

Escribe tu apellido: 


Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando luego el botón de borrado. 

Consideraciones finales

Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden utilizar. Pero no hay ningún inconveniente en usar, dentro del mismo formulario, distintos tipos de introducción de datos. Al pulsar el usuario el botón de envío recibiríamos en email suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el símbolo &.

Por ejemplo, con este formulario, con dos elementos distintos: 

Escribe tu apellido: 

¿Cuál es tu color preferido? 

recibiríamos un email con el texto (p. ej.): 
 
Apellido=Ruiz 
ColorPreferido=Azul


Ejemplo práctico

Partiendo del ejemplo práctico, vamos a añadirle un "libro de visitas". Para ello, añadimos lo siguiente, entre las etiquetas <HR> y </BODY> situadas al final, lo siguiente:

<P><CENTER
<H2>Libro de visitas</H2
<P><FORM ACTION="mailto:frontpage@formared.com" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 
Tu nombre: 
<BR><INPUT TYPE="text" NAME="Nombre"> 
<P>Escribe tus comentarios: 
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40"> 
</TEXTAREA
<P><INPUT TYPE="submit" VALUE="Enviar datos"> 
<INPUT TYPE="reset" VALUE="Borrar datos"> 
</FORM
<P
<HR

(Cada uno puede poner en mailto:frontpage@formared.com su propia dirección de email) 


 

Libro de visitas

 

 

Tu nombre:   

Escribe tus comentarios: 
 

 

 


Veamos a continuación un ejemplo de formulario utilizando todas las formas de introduccion de datos.

<FORM action = "mailto: frontpage@formared.com" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Clave: <INPUT type = password name = clave size = 8 >
<P>
Archivos a Enviar:
<INPUT type = checkbox name = archivo value = "Manual" > Manual de Html
<INPUT type = checkbox name = archivo value ="Mapthis" > Programa Mapthis
<INPUT type = checkbox name = archivo value ="Help" > Archivo de Ayuda
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 años
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años
<INPUT type = radio name = edad value = "+40" > Mas de 40 años
<P>
<INPUT type = hidden name = lugar value = "pagina personal" >
Como encontraste mi página :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Por el buscador Ole
<OPTION>Por el buscador Yahoo
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA>
<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>

Ahora veamos el efecto producido en la página Web:

Tu Nombre: Tu Clave:

Archivos a Enviar:
Manual de Html Programa Mapthis Archivo de Ayuda

Tu Edad :
Menos de 20 años
Entre 20 y 40 años
Mas de 40 años

Como encontraste mi página :

Tus Comentarios:

Si se rellena y envía el formulario, (estando conectado a Internet), se generará un mensaje de correo a la direccion de correo frontpage@formared.com. Si se pulsa el boton Borrar se borraran los datos introducidos en el Formulario.


Lista de desplamiento con hipervínculos

Se puede utilizar un Formulario como "lanzador" de links, es decir, por medio de una lista desplegable permitir al usuario escoger un Link y acceder a el. Para ello se utiliza el parametro "OnClick". Ejemplo:

<FORM>
<SELECT name = "list" >
<OPTION SELECTED value= "http://formared.com"> Página del curso de FrontPage
<OPTION value="http://www.microsoft.com">Microsoft
<OPTION value="http://www.ibm.com">Ibm
<OPTION value="http://www.novell.com">Novell
<OPTION value="http://www.hp.com">Hewlett Packard
<OPTION value="http://www.fujitsu.com">Fujitsu
<OPTION value="http://www.3com.com">3Com
</SELECT>
<INPUT TYPE=BUTTON value="Ir a..."
onClick="top.location.href=this.form.list.options [this.form.list.selectedIndex].value">
</FORM>

Este sería el efecto producido: