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.

ESTRUCTURA DEL FORMULARIO

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:

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

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

LA DIRECTIVA <INPUT>
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>
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.

LA DIRECTIVA <TEXTAREA>...</TEXTAREA>
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 :

<FORM ACTION=“mailto:<dirección completa de correo electrónico>”

METHOD=“POST” ENCTYPE=“text/plain”>...</FORM>

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.