Formularios


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:

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 METHOD=tipo_de_metodo ACTION=URL_del_script>

<FORM METHOD="post" ACTION=" cgi_bin/inscripcion">
Inicio

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 name="identidad" size=10 maxlength=15>
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 type="text" value="Champiñones">
    </form>
  • SUBMIT: desencadena el envío del formulario hacia el script; el texto definido en VALUE se escribirá en el botón:
    <form>
    <input type="submit" value="Salida">
    </form>
  • RESET: permite borrar los datos ya entrados:
    <form>
    <input type="reset" value="Borrar">
    </form>
  • PASSWORD: permite entrar una palabra clave de forma confidencial:
    <form>
    <input type="password" name "pwd">
    </form>
  • CHEKBOX: crea un bloque de botones que permiten una selección múltiple de opciones:
    Macintosh
    PC
    <form>
    <input type="checkbox" name="micro" value="mac">Macintosh
    <input type="checkbox" name="micro" value="pc">PC
    </form>
  • RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones
    CD-ROM
    Disquete
    <form>
    <input type="radio" name="media" value="cd" checked>CD-ROM
    <input type="radio" name="media" value="dk">Disquete
    </form>
  • HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla.
    <input type="hidden" name=nombre_de_variable value=valor_de_la_variable>
  • 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 method="post" action="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
    <input type=image name="imagen" src="sugeren.gif">
    </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.

Inicio

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 NAME="sede">
<option>Entrada indirecta
<option>Entrada lateral
<option SELECTED>Entrada directa
</select>
</form>

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

<form>
<select MULTIPLE NAME="lenguaje" SIZE="3">
<option SELECTED>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 name="lista" size=3>
<option> Pista 1
<option> Pista 2
<option> Pista 3
<option value="Pista 4"> 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.
Inicio

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 name="comment" rows=5 cols=40>
Introduzca aquí sus comentarios
</textarea>
</form>
Estas líneas de código muestran la siguiente ventana:
Inicio

Ejemplo:

A continuación se muestra un típico y complejo formulario que contiene cada uno de los elementos estudiados anteriormente organizados mediante el uso de una tabla.

Nombre: F.Nac.: DNI:
Apellidos:
Calle y número:
Código Postal: Ciudad:
Provincia: Teléfono:
Estado Civil: Hombre Mujer
Idiomas: Español Alemán Frances Inglés
Comentarios
personales:
Pulse aquí:

<FORM ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi" METHOD=POST>

<CENTER>
<TABLE BORDER>

<TR>
   <TD>Nombre:</TD>
   <TD> <INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18> F.Nac.:
        <INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI: 
        <INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD>

<TR>
   <TD>Apellidos:</TD>
   <TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD>

<TR>
   <TD>Calle y número:</TD>
   <TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD>

<TR>
   <TD>Código Postal:</TD>
   <TD> <INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad:
        <INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD>

<TR>
   <TD>Provincia: </TD>
   <TD> <INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20>                Teléfono: 
        <INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD>

<TR>
   <TD>Estado Civil:</TD>
   <TD> <SELECT NAME="OPCION">
           <OPTION>Soltero
           <OPTION>Casado
           <OPTION>Divorciado
           <OPTION>Otro
        </SELECT>   
        <INPUT TYPE="radio" NAME="sexo" VALUE="H"> Hombre
        <INPUT TYPE="radio" NAME="sexo" VALUE="M"> Mujer </TD>

<TR>
   <TD>Idiomas:</TD>
   <TD><INPUT TYPE="checkbox" NAME="idiomas" VALUE="E"> Español
       <INPUT TYPE="checkbox" NAME="idiomas" VALUE="A"> Alemán
       <INPUT TYPE="checkbox" NAME="idiomas" VALUE="F"> Frances
       <INPUT TYPE="checkbox" NAME="idiomas" VALUE="I"> Inglés  </TD>

<TR>
   <TD>Comentarios<BR> personales:</TD>
   <TD><TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD>

<TR>
   <TH>Pulse aquí:</TH>
   <TD ALIGN=CENTER>
       <INPUT TYPE="submit" VALUE="Enviar datos ">
       <INPUT TYPE="reset" VALUE="Borrar los datos"></TD>

</TABLE>
</CENTER>
</FORM>
Inicio

Indice

Facultad de Informática de la Universidad de Las Palmas de Gran Canaria