Tutorial de formularios html

Los formularios generan en la pantalla cuadros de diálogo con el lector permitiendo así la interacción con el usuario para consultas de bases de datos, solicitudes de documentación, ...

Como en un formulario en papel, se podrán tener zonas en las que se introducirá un texto, casillas de verificación, listas de selección, etc... El usuario rellenará estas zonas en su formulario las cuales se identifican con un nombre simbólico. Cuando el formulario se envía al programa que lo va a tratar, éste recibe el identificador de cada zona y el valor introducido. A dichos programas se les suele denominar scripts, y se han de ejecutar en un espacio del servidor reservado a este efecto: el CGI o Common Gateway Interface.

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 los visualizadores. Dentro de un mismo parámetro las palabras aparecerán, en el destino, separadas por el signo +, y los parámetros entre sí por el símbolo&. Las letras acentuadas y otros caracteres especiales serán valores hexadecimales precedidos del símbolo %, como se muestran en la tabla de códigos hexadecimales del Netscape para Windows .

Para la creación de formularios se utilizarán las siguientes marcas, que permiten generar una interfaz de edición, sin hacer referencia aún a la programación de scripts de CGI:

* la marca FORM que delimita el comienzo y fin de la definición del formulario.
* la marca INPUT que permite crear diferentes tipos de entradas: campos de edición y diversos tipos de botones;
* la marca SELECT que permite crear listas: menús despegables y listas con barras de desplazamiento;
* la marca TEXTAREA que genera una zona de edición de texto libre.


Atributos comunes

Los siguientes atributos son comunes a las marcas que se definen en este apartado para generar formularios:

El atributo NAME define el nombre que permitirá al script identificar el origen de los datos. Este nombre debe ser único.

NAME=nombre_de_la_variable_asociada

El atributo VALUE puede ser definido para un campo de:

Texto: permite definir el contenido del campo.
Botón SUBMIT: indica el texto a escribir en el botón.
Botón RADIO, Botón CHECKBOX: valor que se le asocia al botón cuando éste está pulsado. El valor especificado por NAME identifica el bloque de botones.

FORM

La marca <FORM> y </FORM> definen un formulario y entre ellas se situarán todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por dos atributos:


El atributo METHOD está dirigido al programador que codifica el script. Al que puede darse el valor POST o el valor GET que define el modo de transferencia de los datos hacia el script. 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.

El atributo ACTION define la acción a ejecutar cuando se pulse el botón de sumisión, indicando el URL del programa (script) encargado de tratar los datos adquiridos desde el formulario.

<FORM>

<FORM>

INPUT

La marca <INPUT> servirá para definir campos para entrar un texto y botones que permiten escoger opciones.

Permite varios atributos además de los ya comentados de modo general:

El atributo SIZE define la longitud de la ventana de texto.
El atributo MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.
Ejemplo:

Definir una zona de entrada de texto simple de longitud 10 y longitud máxima de la cadena 15.

<input>

Como se puede observar en este ejemplo, el número máximo de caracteres puede ser mayor que el tamaño de la ventana y viceversa.

El atributo TYPE asociado a la marca INPUT permite la selección del elemento de entrada. Puede tomar los siguientes valores:

* TEXT: es la opción seleccionada por defecto. Define una zona de entrada de texto simple. El texto definido en VALUE aparecerá en dicha zona, para poder ser completado o modificado por el usuario.


<form>
<input>
</form>

* SUBMIT: desencadena el envío del formulario hacia el script; el texto definido en VALUE se escribirá en el botón:


<form>
<input>
</form>

* RESET: permite borrar los datos ya entrados:


<form>
<input>
</form>

* PASSWORD: permite entrar una palabra clave de forma confidencial:


<form>
<input>
</form>

* CHEKBOX: crea un bloque de botones que permiten una selección múltiple de opciones:
Macintosh
PC


<form>
<input>Macintosh
<input>PC
</form>

* RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones
CD-ROM
Disquete


<form>
<input>CD-ROM
<input>Disquete
</form>
* HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla.

<input>

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

<form>
<input>
</form>

Una posible respuesta podría ser:

imagen.x=7 & imagen.y=38

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



SELECT

La marca <SELECT> permite generar listas de selección simple o de selección variable. Se programa con una lista en la que los items se especifican mediante la marca <OPTION>. La presentación de la lista depende del atributo SIZE; si su valor es inferior a 2 o está ausente, la lista se interpreta como un menu desplegable (pop-list). En caso contrario la lista se visualiza en una ventana con barra de desplazamiento. El valor dado entonces al atributo SIZE da entonces el número de líneas visibles en la ventana. La opción de seleción multiple se deriva de la presencia del atributo MULTIPLE.

Ejemplos:
Menú despegable:


<form>
<select>
<option>Entrada indirecta
<option>Entrada lateral
<option>Entrada directa
</select>
</form>


Ventana con barra de desplazamiento: ( con opción de selección múltiple )


<form>
<select>
<option>Ada
<option>C++
<option>Cliper
<option>Pascal
<option>Fortran
<option>Cobol
</select>
</form>

La longitud de la ventana de selección se autoajusta al valor más largo de la lista. Se debe de 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 contruir las listas de forma clara, y que resulten de fácil lectura al usuario, lo que puede aumentar la longitud de los valores. Para solventar este dilema se utiliza el parámetro VALUE asociado al atributo OPTION, el cual permite enviar un valor diferente al que aparece en la lista.

Ejemplo:

A continuación se muestra una lista contenida en una ventana con barras de desplazamiento.
<form>
<select>
<option> Pista 1
<option> Pista 2
<option> Pista 3
<option> Pista 4 (para novatos)
<option> Pista 5
<option> Pista 6
</select>
</form>

Si se eligiese la opción "Pista 4 (para novatos)" la variable lista tomaría el valor Pista 4.



TEXTAREA

La marca <TEXTAREA> permite crear una ventana con barras de desplazamiento horizontales y verticales en la que se podrá escribir texto. El valor dado a los atributos ROWS (líneas) y COLS (columnas) delimita el tamaño de esta ventana.

Es posible predefinir un texto (entre las marcas <TEXTAREA> y </TEXTAREA>) que el usuario podrá reemplazar o completar con su propio texto.

Ejemplo:
<form>
<textarea>
Introduzca aquí sus comentarios
</textarea>
</form>
Estas líneas de código muestran la siguiente ventana:
Introduzca aquí sus comentarios