¿Cómo se escriben los formularios ?

La base del formulario es el elemento lleno <FORM>, es el que define una zona de la página como formulario. En una página puede haber varias zonas definidas como formulario. Dentro de este elemento a su vez se utilizan otros elementos, que son los que realmente dibujan en pantalla los componentes del formulario, son:

<INPUT>
- Campos de entrada por teclado.
- Botones de selección.
- Casillas de marca.
- Botones de proceso.
- 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.

Este sería el más elemental de los formularios, con sólo un campo y un botón de envío:

Analicemos cómo se escribe:

<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
 <INPUT NAME="campo1">
 <INPUT TYPE="submit" VALUE="Procesar"></FORM>

En la primera línea vemos el elemento de definición de formulario: <FORM>. Va acompañado de dos atributos: METHOD y ACTION.

METHOD se refiere al método que emplearemos para enviar los datos al servidor, y pueden ser dos: POST y GET. El optar por uno u otro obedece a complejas cuestiones de programación basadas en la máxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta más longitud es POST, y será el que utilicemos en casi todos los ejemplos.

Echale un vistazo a la respuesta del programa test2-cgi de la página anterior. Fíjate en las variables QUERY_STRING e INPUT. Por la primera llegarán los datos cuando se utilice METHOD=GET y por la segunda cuando es POST el método elegido.

ACTION se refiere a la acción que queremos que ejecute el formulario en un servidor http o en local. Con el valor del ejemplo ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi" se le está indicando que ejecute un programa llamado test2-cgi que está en el directorio /cgi-bin del servidor http mecaniza.sestud.uv.es cuya respuesta será similar a la que hemos visto en la página de introducción a los formularios.

Además de enviar datos a un servidor, ACTION también puede realizar una acción en local, por ejemplo traer una página:

Se escribe:

<FORM METHOD="POST" ACTION="indice.htm">
  ......
</FORM>

En este caso funcionaría igual que un link.

Después tenemos

El elemento INPUT

INPUT sin ningún atributo define por defecto una ventana de escritura de 20 caracteres de longitud por una línea de ancho:

Se escribe:

<FORM> <INPUT> </FORM>

<INPUT> admite varios atributos:

SIZE define la longitud de la ventana de texto.

MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.

NAME define el nombre de la ventana (que en realidad es un campo dentro del registro, que en conjunto, es el formulario). Si escribes:

<FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM>

Como puedes comprobar, sólo se pueden escribir 10 caracteres dentro de la ventana, que también es de longitud 10. No es obligatorio que concidan ambos valores, puedes definir la ventana al valor que quieras y la longitud de la cadena puede ser mayor o menor.

VALUE sirve para que la ventana aparezca con un valor predeterminado, y no vacía como hace por defecto:Se escribe:

<FORM> <INPUT VALUE="HOLA"> </FORM>

TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse.

TYPE=PASSWORD para que el valor predeterminado de la ventana esté en formato oculto:Se escribe:

<FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM>

TYPE=HIDDEN define que el valor predeterminado de la ventana y la ventana misma estén en formato oculto:Se escribe:

<FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM>

Esta opción se utiliza cuando es necesario enviar un valor fijo al servidor, pero no se desea que el usuario intervenga o que lo vea. CUIDADO, esto no es un formato encriptado, viendo el documento fuente se puede saber el valor de la ventana.

TYPE=SUBMIT para generar un botón que al ser pulsado cierra la captura de datos del formulario y procede a ejecutar lo definido en el atributo ACTION que ya conocemos.Se escribe:

<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
 <INPUT NAME="campo1">
 <INPUT TYPE="SUBMIT" VALUE="Procesar"></FORM>

VALUE puede acompañar a SUBMIT , y en este caso sirve para definir el texto que queremos que tenga el botón en su interior. Si se omite, por defecto el visualizador le da el valor "Submit Query".

TYPE=RESET para generar un botón que al ser pulsado inicializa todos los componenetes del formulario.Se escribe:

<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
 <INPUT NAME="campo1">
 <INPUT TYPE="RESET" VALUE="Inicializar"></FORM>

VALUE puede acompañar a RESET , y en este caso sirve para definir el texto que queremos que tenga el botón en su interior. Si se omite, por defecto el visualizador le da el valor "Reset".

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

Prueba a pulsar en cualquier parte de esta imagen:

Se escribe:

<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
<INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif">
</FORM>

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

TYPE=RADIO genera botones circulares que permiten seleccionar un valor predeterminado o activar una opciónSe escribe:

<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
 <INPUT TYPE="SUBMIT" VALUE="Procesar">
 <INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
 <INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B
 <INPUT TYPE="RADIO" NAME="clase" VALUE="B"></form>

En este ejemplo, los botones permiten seleccionar la clase A, la clase B o ninguna de las dos. Si se desea que por defecto un valor esté seleccionado, por ejemplo clase B, hay que añadir el parámetro CHECKED después del valor:

         ... VALUE="B" CHECKED></form>

TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor predeterminado o activar una opciónSe escribe:

<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
 <INPUT TYPE="SUBMIT" VALUE="Procesar">
 <INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
 <INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A">
Clase B
 <INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"></form>

En este ejemplo, las casillas de marca permiten seleccionar la clase A, la clase B, ninguna, o las dos. Si se desea que por defecto un valor esté seleccionado, por ejemplo clase B, hay que añadir el parámetro CHECKED después del valor:

         ... VALUE="B" CHECKED></form>

El elemento SELECT

SELECT sin ningún atributo define por defecto una lista desplegable de toda la pantalla de alto y una columna de ancho:Se escribe:

<FORM> <SELECT> </SELECT>  </FORM>

Como evidentemente esto no es muy práctico, hay que parametrizar el elemento. En primer lugar se le da nombre, ya que éste es un campo más del formulario, la diferencia es que no hay que escribir en él sino escoger un valor de los que nos muestre al desplegarlo, se usará el atributo NAME, y para entrar valores en la lista se usa el atributo OPTION.Se escribe:

<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
 <INPUT TYPE="SUBMIT" VALUE="Procesar">
 <INPUT TYPE="RESET" VALUE="Inicializar">

 <SELECT NAME="lista1">
  <OPTION>Valor 1
  <OPTION>Valor 2
  <OPTION>Valor 3
</SELECT>
</FORM>

Se deben tener en cuenta varias cosas respecto a SELECT:

La longitud de la ventana de selección se autoajusta al valor más largo de la lista.
La ventana de selección, por defecto, muestra una línea, si se quieren mostrar más se utilizará el atributo SIZE.

Se debe procurar que los contenidos de los campos sean lo más cortos posibles; una excesiva longitud implica mayor tráfico por la red, pero se deben construir las listas de forma clara, y que resulten de fácil lectura al usuario, lo que puede aumentar la longitud de los valores. Para enviar un valor diferente del que aparece en la lista, se utiliza el parámetro VALUE asociado al atributo OPTION. Prueba con el valor 5 de la siguiente lista:

Se escribe:

<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
 <INPUT TYPE="SUBMIT" VALUE="Procesar">
 <INPUT TYPE="RESET" VALUE="Inicializar">

 <SELECT NAME="lista1" SIZE=3>
  <OPTION>Valor 1
  <OPTION>Valor 2
  <OPTION>Valor 3
  <OPTION>Valor 4
  <OPTION VALUE="Valor 5">Este es el Valor 5
  <OPTION>Valor 6
  <OPTION>Valor 7
</SELECT>
</FORM>

Esto siginifica que cuando selecciones "Este es el valor 5" en realidad lo que se envía al servidor es "Valor 5".

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.

Se escribe:

<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
 <INPUT TYPE="SUBMIT" VALUE="Procesar">
 <INPUT TYPE="RESET" VALUE="Inicializar">

 <SELECT NAME="lista1" MULTIPLE SIZE=3>
  <OPTION>Valor 1
  <OPTION SELECTED>Valor 2
  <OPTION>Valor 3
  <OPTION>Valor 4
  <OPTION>Valor 5
  <OPTION>Valor 6
  <OPTION>Valor 7
</SELECT>
</FORM>

El elemento TEXTAREA

Este elemento, como su nombre indica, permite definir un área de texto en la pantalla en la que podemos escribir cualquier cosa. Se debe escribir ya parametrizada en cuanto a dimensiones, con los atributos ROWS (líneas) y COLS (COLUMNAS). 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.Se escribe:

<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
 <INPUT TYPE="SUBMIT" VALUE="Procesar">
 <INPUT TYPE="RESET" VALUE="Inicializar">

 <TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
</FORM>

Aunque no es habitual, dentro de un área de texto puede haber un contenido por defecto (que puede ser borrado o modificado por el usuario). Para ello simplemente se escribirá el texto entre <TEXTAREA> y </TEXTAREA>. Así:

<>TEXTAREA NAME="texto1" ROWS=5 COLS=40>
  Contenido del area de texto
</TEXTAREA>

El tratamiento de los datos recibidos en el servidor desde los formularios requiere conocer la tabla de conversión hexadecimal que utilizan la mayoría de visualizadores. Recuerda que las palabras en destino aparecen separadas por el signo +, y las letras acentuadas y otros caracteres, por valores hexadecimales precedidos del símbolo %

Se puede proceder a la descodificación en el programa CGI que recibe los datos, o bien definir macros en programas auxiliares que serán ejecutados después.

En el índice encontrarás la tabla de conversiones utilizada con el visualizador Netscape desde Windows y una macro para Word 6 de Windows que convierte los caracteres más habituales.