Formularios en HTML

Los formularios son elementos de nuestra página Web que permitirán a nuestro visitante interactuar con nuestra página.

Los formularios interpretan las acciones que una persona realiza sobre nuestra página y obtiene en consecuencia determinada respuesta. Los programas que permiten una respuesta al usuario están escritos normalmente en Perl, C...

Los formularios son plantillas en las que se introducen datos para mandarlos al servidor. Cada dato es un par nombre/valor, donde nombre indica el campo y valor los datos introducidos en dicho campo.

En HTML un formulario es un área de código comprendida entre 2 directivas. Cada formulario tiene asignada una acción distinta, lo que permite incluir varias líneas dedicadas a este fin en una misma página.

Estas son las directivas principales que se emplean en todos los formularios posibles:

<INPUT>
Campos de entrada por teclado.
Botones de selección.
Casillas de marca.
Botones de proceso (submit).
Botones de inicialización (reset).
Imágenes sensibles al ratón.

<SELECT>
Listas desplegables de valores.
Listas fijas de valores.

<TEXTAREA>
Ventanas de escritura libre.

En esta parte aprenderemos a tratar con los formularios y con sus diferentes elementos:

• Elementos de texto
• Elementos de área de texto
• Elementos de Menús Elementos de Botones de Radio
• Elementos de Envio y Borrado de datos.

La estructura de un formulario es muy simple: comienza con la directiva <FORM> y finaliza con </FORM>. La directiva tiene 2 parámetros o atributos que deben aparacer obligatoriamente:

Dentro de este elemento a su vez se utilizan otros elementos, que son los que realmente dibujan en pantalla los componentes del formulario, son:

• ACTION=URL

  Contiene la URl del programa CGI encargado de interpretar la entrada del suario y generar los resultados oportunos.

• METHOD= GET | POST

  Tiene un significado. En principio puede tomar como valor cualquiera de los métodos de transferencia de datos reconocidos por HTTP, pero en la práctica sólo se emplean 2:

  1. GET. A�ande los argumento del formulario al URL que se especifica en ACTION (usando como separador el símbolo ?), lo que da lugar a que el programa los reciba como párametros de entrada.
     
     
  2. POST. Envía los datos como parte de la entrada estándar.

  2 ejemplos de formularios serían:

  <FORM METHOD=GET ACTION=/cgi-bin/envio_correo.pl>
  <FORM METHOD=POST ACTION=http://lucas.cdf.udc.es/cgi-bin/subscribe.cgi>

  NOTA: La extensión de los programas CGI no es obligatoria y no tiene que identificar necesariamente el lenguaje empleado en su construcción. Aunque pueden aparecer extensiones .pl, .tcl o .sh para indicar programas escritos en Perl, Tcl o la Shell de UNIX, es igualmente válida la extensión .cgi o su ausencia (habitualmente en programas compilados).

  El aspecto del formulario, dependerá del navegador que emplee la persona que nos visite.

  
  

Es una directiva que nos servirá para especificar el tipo de campo o de espacio reservado para que el usuario final introduzca los datos que se le solicitan en el formulario. Respode al igual que en BASIC a datos que se le piden al usuario que rellene introduciendo los valores que estime oportunos.

Esta directiva HTML admite los siguientes tipos de atributos:

• TYPE

  Indica el tipo de entrada visual que se empleará para la petición de datos al usuario. Existen los siguiente modos:

  • TYPE=�text�

    Hace referencia a texto normal y corriente que el usuario interoducirá en el campo concreto. Indica que se trata de una entrada de datos formada por una línea de texto.

  • TYPE=�password�

    Se trata de una entrada de tipo texto que oculta los datos, o se enmascara, normalmente escribiendo asteriscos en lugar de letras, para evitar que otra persona pueda ver qué valores se introducen en ella. Resulta muy adecuada para recoger passwords, palabras clave, o números de identificación.

  • TYPE=�hidden�

    Es simplemente un almacenamiento interno de datos. El visualizador no muestra el contenido, recogido en el atributo VALUE, pero sí se lo pasa al programa CGI. Resulta un componente muy adecuado para guardar información que se mantiene estable en la página (como un determinado valor que nos indica que los datos que provienen de esta página son los correctos y no otros de otra página distinta). Por ejemplo, si en un documento dado ha leido el nombre de usuarios, éste puede pasar de una página a otra a través de ete tipo de entrada, en vez de agrandar la lista de parámetros a�adidos al URL.

    <INPUT TYPE=�hidden� NAME=�browser� VALUE=�Arena�>

    Este ejemplo, toma un valor oculto (hidden) en la variable browser, como valor �Arena�, que es un tipo de navegador que reconoce el HTML 3.0.

    CUIDADO, esto no es un formato encriptado, viendo el documento fuente se puede saber el valor de la ventana, (el valor oculto del mismo).

  • TYPE=�image�

    TYPE=IMAGE hace que el visualizador presente una imagen que es sensible al ratón. Lo que el formulario envía al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parámetros .x=n .y=n donde n son los números de las coordenas x y del punto en el que estaba el ratón en el momento del envío. Para presentar la imagen se utiliza el atributo SRC del elemento IMG. Este sería un ejemplo de respuesta:

    imagen.x=99&imagen.y=15

    Se escribe:

    <FORM METHOD="POST" ACTION="cgi-bin/mail.pl">
    <INPUT TYPE=IMAGE NAME="imagen" SRC="mail.gif">
    </FORM>
    

    Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen.

    Un tipo especial de botón. En este caso se visualizará como una imagen cuya ubicación se indica por el atributo SRC y que puede estar alineada con los valores típicos ALIGN. Al hacer click sobre la imagen, se desembocará una acción similar a la de SUBMIT con la diferencia de que se a�ade un parámetro más a la llamada, identificado con el atributo NAME y cuyo contenido, son las coordenadas sobre la que se hizo click el usuario. Se trata de un componente muy a decuado para la construcción de barras de herramientas, que pueden estar divididas en varias imágenes (caso en el que no importa sobre qué punto de la imagen se hace click, sólo se necesita saber qué imagen se seleccionó), o ser un sólo gráfico (y hay que analizar las coordenadas para verificar qué función se está invocando).

  • TYPE=�checkbox�

    Se trata de una casilla de selección, un componente que sólo tiene 2 valores: seleccionado o ignorado. VALUE (el atributo) recoge el valor cuando se selecciona, sino es así se devuelve una cadena vacía. Si se incluye CHECKED se indica que inicialmente la casilla aparecerá seleccionada.

    Este tipo de atributo permite que más de una casilla sea seleccionada.

    <INPUT TYPE=�checkbox� VALUE=�rubia� VALUE=1>Cerveza Rubia
    <INPUT TYPE=�checkbox� VALUE=�negra� VALUE=1 CHECKED>Cerveza Negra
    

    hará que aparezcan 2 casillas con los valores Cerveza Rubia y Cerveza Negra, con esta última, como casilla selecciona por defecto, pudiendo a�adir a esta selección la otra, o eliminar la seleccionada, dejando los 2 campos sin seleccionar.

  • TYPE=�radio�

    Botones radiales o redondos. Una misma variable asociada a varios elementos, cada uno con un valor distinto. Al igual que ocurriría con el componente anterior, si no hay ningún valor seleccionado, se devuelve una cadena vacía, y el atributo CHECKED se�ala la opción seleccionada.

    En este caso, si ponemos varias opciones para una misma variable (por ejemplo elegir el sistema operativo entre UNIX, Linux, DOS, WINDOWS, MACOS, OS/2), y sólo se permite elegir una de ellas, el marcar un botón radial, excluirá a los demás, no pudiendo dejar el mismo en vacío o sin marcar ninguna de las opciones ofrecidas. En este caso hemos de ser precabidos y poner uno de los botones marcados por defercto, para que las entradas no queden vacías.

    <INPUT TYPE=�radio� NAME=�sino� VALUE=1 CHECKED>SI<BR>
    <INPUT TYPE=�radio� NAME=�sino� VALUE=2>NO<BR>
    
    <INPUT TYPE=�radio� NAME=�SO� VALUE=unix CHECKED>UNIX<BR>
    <INPUT TYPE=�radio� NAME=�SO� VALUE=mac>MACINTOSH<BR>
    <INPUT TYPE=�radio� NAME=�SO� VALUE=dos>DOS<BR>
    <INPUT TYPE=�radio� NAME=�SO� VALUE=win95>WINDOWS�95<BR>
    <INPUT TYPE=�radio� NAME=�SO� VALUE=otro>OTRO<BR>
    
    
  • TYPE=�SUBMIT�

    Es un botón; en este caso es el que desencadena la acción de enviar los datos al programa CGI que los interpreta y activa una respuesta. También como RESET, el atributo VALUE contiene la frase que se mostrará en lugar del valor por defecto que no es otro que �SUBMIT� (enviar).

    <INPUT TYPE=�SUBMIT� VALUE=�Enviar Datos�>
    <INPUT TYPE=�RESET� VALUE=�Limpiar Formulario�>
    
    
  • TYPE=�RESET�

    Es un tipo de elemento especial que no recibe datos, sólo ejecuta localmente una acción. Tiene el aspecto de un botón y hace que los campos de entrada y todos los componentes del formulario vuelvan a su estado original. El atributo opcional VALUE contiene la frase que se mostrará en el botón, en lugar de �RESET� (reiniciar), que es el texto por defecto.

    NOTA: Para que los botones de enviar y limpiar (SUBMIT y RESET), funcionen como tales, deben de ser escritos en MAYúSCULAS, de lo contrario no funcionarán.

  • TYPE=�file�

    Este es un nuevo tipo que sólo funciona con Netscape 3.0 o superior, y sirve para enviar un fichero a una máquina remota (hacer FTP), pero no funciona solo, necesita de ciertos acompa�antes que hacen su uso un poco más complicado: Aquí hay que echar mano de un atributo parametrizado de <FORM>: ENCTYPE="multipart/form-data" para generar un botón que permitirá buscar un fichero en nuestra máquina, ponerlo en una ventanita de entrada como las ya conocidas (por tanto tanbién se puede escribir directamente el nombre del fichero en lugar de buscarlo) y junto con un botón tipo submit enviar el fichero.

    Se escribe:

    <FORM enctype="multipart/form-data" ACTION="ftp://miservidor/" METHOD="POST">
    
    Enviar el fichero:
    
    <INPUT NAME="mifichero" TYPE="FILE">
    <INPUT TYPE="SUBMIT" VALUE="Enviar fichero"></FORM>
    

    el botón generado aparece con el texto "Browse.." y no sirve de nada a�adirle el parámetro VALUE para darle otro nombre, como se puede hacer con el botón de tipo submit.

    En este ejemplo se haría una conexión al servicio FTP general de la máquina remota, pero se puede hacer a un directorio en particular de un usuario concreto. Sólo habría que cambiar la línea

    ACTION="ftp://miservidor/" METHOD="POST">

    y escribir:

    ACTION="ftp://miusuario@miservidor/" METHOD="POST">

    Otra forma más directa de hacer un FTP en las dos direcciones, es desde la ventana "Location" del visualizador. La sintaxis de los parámetros de ACTION son válidos en esa ventana.

    Por supuesto, todo esto si no tienes cuenta y permiso de escritura en la máquina remota, no sirve para nada...

  
  
• NAME=�nombre de variable�

  Es el atributo de <INPUT> que contiene el nombre que recibe la variable en la que se almacena la entrada del formulario o datos que nosotros o nuestro visitantes tecleeen o marquen.

  
  
• VALUE=�valor numérico/texto�

  Es un atributo que nos sirve para dar un valor inicial del campo que deseemos. Esto es muy útil si por ejemplo es un formulario que se nos muestre la opción de HOMBRE o MUJER, queremos que por defecto aparezca MUJER seleccionado (inicialmente) y modificable totalmente, pudiento también tomar el calor de HOMBRE.

  Este atributo también se puede emplear como texto en lugar de como valor numérico, dado que algunos campos de texto, podemos querer que contengan un texto inicial por defecto. Esto se hace por medio de este atributo.

  También sirve para cambiar los mensajes que por defeco muestran los botones de SUBMIT y RESET al enviar o borrar un formulario. Modificando este valor para estos botones, podremos poner el texto que deseemos.

  
  
• SIZE=�valor numérico�

  Es el tama�o de caracteres de la entrada de visualización. SIZE define la longitud de la ventana de texto.

  
  
• MAXLENGTH=�valor numérico�

  Es la longitud máxima del valord e caracteres. MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.

  NOTA: MAXLENGTH no puede ser menor que SIZE, de forma que visualmente no tecleemos hasta el final de la línea del formulario, dando un aspecto más �pulido�, del formulario.

  
  

La directiva <SELECT>...</SELECT> es otra directiva cerrada que se puede incluir entre las directivas <FORM>...</FORM>. Se trata de una componente habitual (en realidad), de los entornos de ventanas. Esta misma directiva permite construir una lista de selección recogida en una ventana que pued tener barras de desplazamiento (scroll) y una lista desplegable similar a un menú. Todo depende del valor del atributo SIZE de la aparición de MULTIPLE.

Esta directiva puede tener los atributos NAME, SIZE, OPTION y MULTIPLE.

• Lista Desplegable

  Para ver esta lista primero debemos a�adir el atributo NAME=�nombre de variable� y acto seguido el valor de SIZE=�valor numérico� a <SELECT>...</SELECT>; en el atributo SIZE indicaremos el número de opciones desplegables que se mostrarán en la lista desplegable (el valor mínimo es 1).

  TRUCO-NOTA: si lo que queremos es que nos aparezca una leng�eta desplegable en lugar de que aparezcan todos los valores que queramos ver a la vez con el atributo SIZE=�valor numérico�, lo único que debemos hacer es omitir el atributo SIZE.

  Una vez definido estos campos, podemos poner cada valor a cada uno de los ITEMS desplegables; para ello contamos con la directiva <OPTION> que debe ir incluida entre la directiva <SELECT>...</SELECT>. Cada uno de los valores <OPTION> mostrará las valores que se pueden seleccionar de la lista, siento una directiva <OPTION> por cada una de las opciones.

  Dentro de la diectiva <OPTION>, podemos a�adir el atributo VALUE=�valor� de forma que podremos modificar le valor que se envía para cadauna de las opciones que tenemos. Por ejemplo

  <SELECT NAME=�puntuacion� MULTIPLE SIZE=11>
  <OPTION VALUE=�10�>Puntuo con un 10
  <OPTION VALUE=�9�>Puntuo con un 9
  <OPTION VALUE=�8�>Puntuo con un 8
  <OPTION VALUE=�7�>Puntuo con un 7
  <OPTION VALUE=�6�>Puntuo con un 6
  <OPTION VALUE=�5�>Puntuo con un 5
  <OPTION VALUE=�4�>Puntuo con un 4
  <OPTION VALUE=�3�>Puntuo con un 3
  <OPTION VALUE=�2�>Puntuo con un 2
  <OPTION VALUE=�1�>Puntuo con un 1
  <OPTION VALUE=�0�>Puntuo con un 0
  </SELECT>

  nos envía el valor contenido en el atributo VALUE, cuando es seleccionada la <OPTION> con el texto que sea.

  Con las listas desplegables, es obligatorio seleccionar siempre un valor, y si no hay ninguno seleccionado, por defecto el visualizador enviará el primer valor de la lista.

  Se puede hacer que haya un valor preseleccionado a�adiendo el parámetro SELECTED al atributo OPTION, y si se quiere permitir más de una selección, se pondrá el atributo MULTIPLE al elemento SELECT. Para seleccionar y deseleccionar hay que atenerse a las normas de Windows.

  En el ejemplo anterior

  <SELECT NAME=�puntuacion� MULTIPLE>
  <OPTION VALUE=�10�>Puntuo con un 10
  <OPTION VALUE=�9�>Puntuo con un 9
  <OPTION VALUE=�8�>Puntuo con un 8
  <OPTION VALUE=�7�>Puntuo con un 7
  <OPTION VALUE=�6�>Puntuo con un 6
  <OPTION VALUE=�5� SELECTED>Puntuo con un 5
  <OPTION VALUE=�4�>Puntuo con un 4
  <OPTION VALUE=�3�>Puntuo con un 3
  <OPTION VALUE=�2�>Puntuo con un 2
  <OPTION VALUE=�1�>Puntuo con un 1
  <OPTION VALUE=�0�>Puntuo con un 0
  </SELECT>

  esta vez por defecto estará marcado el valor 5 y la lista desplegable nos permitirá hacer más de una selección. Esta vez, la lista es desplegable desde una leng�eta, ya que hemos omitido el valor SIZE.

Se trata de una directiva de tipo TEXTO. Aquí se define un cuadro de entrada de texto con varias líneas y columnas.

<TEXTAREA>...</TEXTAREA> es una directiva que se haya entre las directivas <FORM>...</FORM>. Es un delimitador que asume el texto contenido en él, es el valor por defecto, el contenido inicial del elemento. Las dimensiones del área de entrada de texto se define con los atributos ROWS y COLS en la primera directiva de definición de <TEXTAREA>. No tiene otros atributos o posibles variantes. Por supuesto, para que sea operativo, deberá ir acompa�ado de los componentes necesarios para enviar e inicializar. También debe de ir identificada con el nombre de la variable que contendrá a ese texto con el atributo NAME=�nombre de la variable�, si queremos que sea procesado por el CGI correspondiente.

Otra opción menos empleada es la de, en este tipo de formulario de texto, poner por defecto un texto prederminado. Para ello lo único que tenemos que hacer es teclear el texto que queremos que aparezca por defecto en la ventana en la que deben de escribir lo usuarios, entre las directivas <TEXTAREA>...</TEXTAREA>

Veamos un ejemplo:

<FORM>
<TEXTAREA NAME=�COMENTARIOS� ROWS=5 COLS=35>
ESCRIBE TUS COMENTARIOS
</TEXTAREA>
<INPUT TYPE="SUBMIT" VALUE="PROCESAR">
<INPUT TYPE="RESET" VALUE="INICIALIZAR">
</FORM>

TRUCO: Si queremos que nos envíen directamente un mail a nosotros sin tener que procesar los formularios por complejos programas CGI�s ni nada por el estilo,el truco es el siguiente:

Debemos de poner :

de forma que cuando recibamos los datos del formulario directamente a nuestra cuenta de correo electrónico, el atributo ENCTYPE=�text/plain�, trasforma ya los datos codificados en texto legible, de forma que nosotros mismos podemos llevar una estadística de nuestra página sin tener conocimientos complejos de programación de CGI�s.