5.12 - FORMULARIOS (FORM).

Introducción

     Los formularios son plantillas que permiten la creación de documentos HTML con peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, páginas de comentarios o cualquier documento en la que se desee una interacción por parte del usuario.

     Se podrán definir distintos tipos de recuadros de dialogo, botones de selección, menús de múltiples opciones, ... Para permitir obtener los datos de una manera más intuitiva.

<FORM> Definición de formularios

     Existe una instrucción HTML para la creación de formularios esta es FORM, que tiene la siguiente estructura:

< FORM ACTION="fichero que trata el formulario" METHOD= POST | GET >
...
Elementos que forman el formulario
...
< /FORM>

     Dentro de la etiqueta de formulario se definirán los distintos elementos de petición de datos. Estas instrucciones que se explicarán a continuación definirán los tipos de botones, cajas de dialogo y ventanas para la introducción de datos. Y definirán las variables que almacenarán los datos introducidos por el usuario. Estas etiquetas se incluirán entre la de definición del formulario y la etiqueta de final de formulario.

     Los atributos que presenta la etiqueta FORM son los siguientes:

ACTION:

     Indica el programa que se encargará de tratar los datos del formulario. Este programa debe encontrarse en el servidor y estar escrito en algún lenguaje de programación. A este programa se pasará como parámetros los datos introducidos en el formulario y retornará un código HTML que se mostrará tras procesar el formulario. A este tipo de programas se les llama cgi-bin, y se explican en el último apartado de este manual: (CGI-BIN).

METHOD:

     Indica el protocolo usado para el envío de los datos. Con POST envía los datos en la entrada estándar del programa que trata el formulario y con GET los datos se pasan por parámetro, en la línea de comandos, al programa. El usar uno o otro método vendrá determinado por como son tratados los parámetros en el formulario en el (CGI-BIN). El método de uso más normal será POST.


     Una vez definidas las características globales del formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen. Dentro de la instrucción del formulario podrán incluirse cualquier texto o instrucción HTML, siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario. Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas, tablas, etc ...

<INPUT> Entrada básica de datos

     La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos. Por lo general serán entradas de texto corto (a lo sumo una frase) o opciones. El formato básico es el siguiente:

< INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = "Variable que toma el valor" VALUE = "Valor de Inicialización" >

     El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se está definiendo, a continuación se explicarán por separado cada una de las opciones. El atributo NAME especifica el nombre de la variable que se define. Este nombre será pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario. El atributo VALUE suele especificar el valor de inicialización, que será el valor por defecto.

     A continuación se relatan los distintos tipos de instrucciones de entrada.

<INPUT TYPE=TEXT...> Texto corto

     Se utiliza para la entrada de cadenas de texto corto, como por ejemplo nombre de personas, números, fechas o diversos datos que se puedan expresar en una línea de texto.

     Se mostrará un recuadro que ocupa una línea y la que será posible especificar este texto. El formato de la instrucción es el siguiente:

< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamaño" MAXLENGTH="longitud máxima" >

     El tamaño de la ventana de introducción de texto se fija con el atributo SIZE, que indica el tamaño de la ventana en caracteres. Aquí solo se define la parte visible, pero el usuario podrá introducir más texto si lo desea. Para indicar el máximo número de caracteres que se permiten en la entrada usaremos: MAXLENGTH. El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicialización del campo. De todos los atributos solo será obligatorio NAME, siendo el resto opcionales. En la entrada se podrán usar cualquier tipo de caracteres incluso los acentuados, en su formato normal.

Ejemplos
Inst.
HTML
Nombre: <INPUT TYPE=TEXT NAME=variable>
Resul
tado
Nombre:
Explica
ción
Será una introducción de texto básica.
Inst.
HTML
Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicialización">
Resul
tado
Nombre:
Explica
ción
En este caso introduciremos un texto de inicialización que será el texto por defecto y es editable por el usuario.
Inst.
HTML
Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicialización" SIZE=50 MAXLENGHT=55>
Resul
tado
Nombre:
Explica
ción
Ahora definimos con SIZE un mayor tamaño del recuadro y con MAXLENGHT definimos el número máximo de caracteres que se pueden introducir.

<INPUT TYPE=PASSWORD...> Palabras secretas

     Es similar al anterior pero en este caso no se imprimen los caracteres según se van introduciendo, se muestra un asterisco en vez de los caracteres. Solo se puede ver el número de caracteres, pero no valor. Se usa para la introducción de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos. El formato es:

< INPUT TYPE=PASSWORD NAME="variable" VALUE="valor inicial" SIZE="tamaño" MAXLENGTH="li>longitud máxima" >

Ejemplo
Inst.
HTML
Password: <INPUT TYPE=PASSWORD NAME=variable VALUE="password">
Resul
tado
Password:
Explica
ción
El texto introducido no puede ser visto, pero si es posible saber el número de caracteres que se introducen.

<INPUT TYPE=CHECKBOX> Botones de selección

     El checkbox es un botón que puede presentar dos estados activado o desactivado. El formato es el siguiente:

< INPUT TYPE=CHECKBOX NAME="variable" CHECKED>

     Se requiere el atributo NAME. Los valores que tomará la variable serán on ó off, dependiendo de su estado. Si el botón estaba activado cuando se envían los datos del formulario se enviaran el nombre de la variable y el valor que indique su estado. Si se incluye el atributo CHECKED el botón se encontrará activado en la inicialización.
Si se indica el atributo VALUE,cuando se envian los datos con el botón activado se mandará la variable con el valor indicado y en caso contrario no se mandará ningún valor.

Ejemplo
Inst.
HTML
<INPUT TYPE=CHECKBOX NAME= variable> Opción
Resul
tado
Opción
Explica
ción
En este caso esta desactivado por defecto y su utilizará en caso de los valores on y off para definir su estado.
Inst.
HTML
<INPUT TYPE=CHECKBOX NAME= variable CHECKED> Opción
Resul
tado
Opción
Explica
ción
Ahora se especifica CHECKED para indicar que por defecto debe estar activado.

<INPUT TYPE=RADIO...> Selección entre múltiples opciones

     Se usa cuando la opción puede tomar un valor simple de una serie de alternativas. En este caso se presentan unos valores opcionales de los que solo puede tomar un valor. Para especificar cada uno de estos valores se incluirá una etiqueta RADIO por cada una de las posibles alternativas, su estructura general será:

< INPUT TYPE=RADIO NAME="variable" VALUE="valor 1" CHECKED >
< INPUT TYPE=RADIO NAME="variable" VALUE="valor 2" >
          . . .
< INPUT TYPE=RADIO NAME="variable" VALUE="valor n" >

Cada una de las etiquetas RADIO tendrá el mismos atributo NAME, y con un distinto atributo VALUE que será el valor que tome si se selecciona esta opción. Para inicializarlo se usa el atributo CHECKED que se indicará solo en la opción que se quiera especificar por defecto.

Ejemplo
Inst.
HTML
<INPUT TYPE=RADIO NAME= variable VALUE=opcion1 >Opción 1<BR>
<INPUT TYPE=RADIO NAME= variable VALUE=opcion2 CHECKED>Opción 2<BR>
<INPUT TYPE=RADIO NAME= variable VALUE=opcion3 >Opción 3<BR>
<INPUT TYPE=RADIO NAME= variable VALUE=opcion4 >Opción 4<BR>
Resul
tado
Opción 1
Opción 2
Opción 3
Opción 4
Explica
ción
En este caso solo es posible seleccionar uno de los posibles valores, la opción CHECKED indica cual es la opción activa por defecto.

<INPUT TYPE=HIDDEN...> Parámetros ocultos

     En este caso no se muestra ningún campo para la entrada de datos al usuario, pero el par variable valor especificado es enviado junto con el formulario. Se suele usar para transmitir información de estado ó control ó para enviar algún tipo de información que no debe ser variada en el formulario, pero sí debe ser enviada junto a este. El formato es:

< INPUT TYPE=HIDDEN NAME="variable" VALUE="valor" >

     Deberá incluir tanto la variable como el valor.

<INPUT TYPE=SUBMIT...> Enviar Datos

     Este botón se usa para enviar los datos del formulario, al pulsar el usuario este botón, se acaba la introducción del formulario y pasa el control al programa indicado en ACTION. En todo formulario debe existir al menos un botón de SUBMIT, si solo incluye un recuadro del tipo TEXT no será necesario incluirlo. El formato es:

< INPUT TYPE=SUBMIT VALUE="mensaje a mostrar" >

     El atributo VALUE especifica una etiqueta no editable que se mostrará en el botón de envío. Lo normal es que este botón no envíe datos, pero si se indica el atributo NAME con un nombre de variable será enviada la variable con el valor de VALUE. Esto puede ser útil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado.

Ejemplo
Inst.
HTML
< INPUT TYPE=SUBMIT VALUE="Enviar Datos" >
Resul
tado
Explica
ción
El texto indicado en VALUE es el que etiqueta el botón, al pulsar sobre él se enviarán los datos del formulario

<INPUT TYPE=IMAGE...> Botón de Envío gráfico

     Su funcionalidad es similar al botón de SUBMIT, se usa igualmente para enviar los datos de un formulario, pero en este caso se presenta una imagen como botón. Igualmente al pulsar sobre el botón se enviará el formulario. El formato es el siguiente:

< INPUT TYPE=IMAGE NAME="variable" SRC="URL de la Imagen" >

     El punto de la imagen en el que pulsa el usuario también es pasado al programa interprete del formulario, de forma que la imagen igualmente podría ser un mapa sensible. Se pasarán dos parámetros x e y con las coordenadas del punto donde pulso, siendo el programa interprete el encargado de determinar la zona donde se pulsó, si se desea.

Ejemplo
Inst.
HTML
<INPUT TYPE=IMAGE SRC="boton.gif">
Resul
tado
Explica
ción
Se muestra la imagen como botón de envío, sustituyendo al botón de SUBMIT.

<INPUT TYPE=RESET...> Borrar los datos

     Este botón se usa para volver a los valores por defecto todos los elementos del formulario, borrando todos los datos introducidos por el usuario. Su formato es el siguiente:

< INPUT TYPE=RESET VALUE="Etiqueta a mostrar" >

     El atributo VALUE especifica la etiqueta que tendrá el botón.

<TEXTAREA> Texto en múltiples líneas

     Permite la introducción de un texto que puede abarcar varias líneas, introduciendo este en forma de párrafo. El formato general será:

<TEXTAREA NAME="variable" ROWS=Filas COLS=Columnas>
        Texto de Inicializaci& oacute;n que puede
         incluir varias l&iacute;neas.
</TEXTAREA>

     En este caso se presenta una ventana del tamaño especificado con los atributos ROWS, filas, y COLS, columnas. El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto aparecerá inicialmente en la ventana, en este texto se podrán incluir las marcas del lenguaje HTML, pero solo se tendrán en cuenta para incluir acentos y otro tipo de efectos. Los atributos ROWS y COLS determinan el tamaño de la ventana visible, el texto se podrá extender más allá de estos limites.

Ejemplo
Inst.
HTML
<TEXTAREA NAME=variable ROWS=10 COLS=54>
        Texto de Inicializaci&oacute;n que puede
         incluir varias l&iacute;neas.
</TEXTAREA>
Resul
tado
Explica
ción
Se puede especificar el tamaño de la ventana para introducir datos e indicar un texto de inicialización, aunque este será opcional.

<SELECT> Elección entre múltiples opciones

     Se usa para menús simple o múltiples. Define menús de tipo pop-up (menú de barras) y ofrece una alternativa más compacta al uso de botones RADIO o CHECKBOX. Su formato es el siguiente:

<SELECT NAME="variable">
< OPTION SELECTED VALUE=valor1> Opción Primera
< OPTION VALUE=valor2> Opción Segunda
        . . .
< OPTION VALUE=valorn> Opción Enésima
</SELECT>

     Si se desea que sea un menú múltiple se deberá incluir el atributo MULTIPLE en la etiqueta de SELECT, en este caso se mostrarán todas las opciones en forma de tabla, en el otro caso se mostrará la opción activa y un botón para poder modificar esta opción. En ambos casos solo podrá seleccionarse una de las opciones. Cuando se envía el resultado del formulario la variables NAME tomará el valor de la opción que este activa.

     La etiqueta OPTION que contenga el atributo SELECTED será considerada la opción por defecto, caso de no especificarse ninguna se considerará la primera de las opciones.

Ejemplos
Inst.
HTML
<SELECT NAME="variable">
<OPTION VALUE=1> Opción Primera
<OPTION SELECTED VALUE=2> Opción Segunda
<OPTION VALUE=3> Opción Tercera
</SELECT>
Resul
tado
Explica
ción
Se muestra la opción activa que puede ser cambiada, por defecto esta activada la segunda opción.
Inst.
HTML
<SELECT NAME="variable" MULTIPLE>
<OPTION VALUE=1> Opción Primera
<OPTION SELECTED VALUE=2> Opción Segunda
<OPTION VALUE=3> Opción Tercera
</SELECT>
Resul
tado
Explica
ción
En este caso al ser múltiple se muestran todas las opciones posibles, de las que solo es posible seleccionar una.