PORTAL FUENTERREBOLLO FORMULARIOS

Form Inputs

Las personas que visitan nuestra página se pueden comunicar por medio de un 'enlace a nuestra dirección de e-mail' con lo que recibiríamos un e-mail convencional.

Puede ocurrir que deseemos presentar unas opciones que requieran una respuesta concreta; o bien, se requiera un comentario del visitante, para lo que suministraremos un 'espacio donde introducirlo'.

Utilizando Formularios se puede hacer todo esto, y muchas cosas más, bastará que las páginas tengan los elementos necesarios para ello: botones de radio, cajas de texto y de control, listas de selección, etc.

Los Formularios nos brindan la posibilidad, sí han sido instalados en nuestro servidor de web, de devolver automáticamente al usuario algún tipo de información. Para realizar esto, los Formularios necesitan ejecutar programas o scripts por medio del CGI.

El CGI permite a los Formularios ser procesados por programas escritos en cualquier lenguaje, los más utilizados en Internet son el Perl y el C.

Finalmente, una breve introducción a las formas [Form Inputs], muy importantes para algunas páginas web. La entrada de las formas es enviada al servidor la mayoría de las veces. Se contempla las diferentes posibilidades que existen de enviar el contenido de una forma.

Estructura Formulario

  1. Etiqueta de Inicio

  2. Cuerpo del Formulario

  3. Botones de envío y de borrado

I. ETIQUETA DE INICIO: Todos los elementos de un Formulario están encerrados entre <FORM> y </FORM>. Como atributos, se destacan:

ACTION: Define el URL que deberá gestionar el formulario. Puede ser una dirección de correo ( precedida de mailto: ). Cuando se hace uso del CGI, es aquí donde se indica su localización en el servidor, que habitualmente es el directorio cgi-bin, para que procese los datos.

METHOD: Define la manera en que se mandará el formulario. Es recomendable utilizar POST. Cuando se mande el formulario a nuestra dirección de correo electrónico es obligado usarlo. [ METHOD=POST ]

ENCTYPE="TEXT/PLAIN": Las respuestas se reciben como fichero de texto, legibles y sin codificar.

Etiqueta de Inicio: <FORM ACTION="mailto: dirección de e-meil" METHOD="POST" ENCTYPE="TEXT/PLAIN">

II. CUERPO FORMULARIO: Se detallan los elementos que pueden incluirse en un formulario. Como el resultado de cualquier formulario es una lista de variables y valores asignados a las mismas, todos ellos tendrán un atributo en común: el nombre de su variable. El parámetro también será común a todos: NAME.

Para facilitar la presentación, vamos a clasificar a los elementos en tres clases: <a> texto. <b> menús. <c> botones.

La introducción de los datos se realiza mediante la etiqueta:

<INPUT TYPE="xx" NAME="yy" VALUE="zz">, en donde:

xx

Palabra que indica el tipo de introducción

yy

Nombre asignado a la variable de introducción del dato.

zz

Palabra asociada a un elemento

 

II.a1. INTRODUCCION POR LINEA DE TEXTO: Existen dos maneras de conseguir que el usuario introduzca texto en una línea del formulario. En el primer caso, [ xx=text ] , se crea una caja donde escribir texto en una línea. En otro caso, [ xx=password ] , es equivalente al anterior, pero no vemos lo que se teclea en él. Los atributos para modificarlos son:

Atributos

Utilidad

SIZE

Tamaño de la caja de texto.

MAXLENGTH

Número máximo de caracteres que puede introducir el usuario.

VALUE

Texto por defecto que contendrá la caja.

Veamos un ejemplo, solicitando el pueblo y la password del usuario:
<FORM ACTION="mailto:dirección e-meil" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Nombre de tu pueblo:
<BR><INPUT TYPE="text" NAME="Pueblo">
Escribe tu contraseña
<BR><INPUT TYPE="password" NAME="Contraseña">
</FORM>

Que resulta, así:

Nombre de tu pueblo:

Escribe tu contraseña

II.a2. INTRODUCCION POR MÚLTIPLES LINEAS DE TEXTO: Cuando el texto a introducir puede alcanzar gran longitud, sea el caso de un comentario, conviene utilizar un Formulario de texto de múltiples líneas. Esto se consigue con la etiqueta de inicio <TEXTAREA> y la de cierre </TEXTAREA>. Sea:

<TEXTAREA NAME="yy" ROWS="nº filas" COLS="nº columnas">

Atributos

Utilidad

ROWS

Filas que ocupará la caja de texto.

COLS

Columnas que ocupará la caja de texto.

Sea un ejemplo, solicitando comentarios del usuario:
<FORM ACTION="mailto:dirección e-meil" METHOD="POST" ENCTYPE="TEXT/PLAIN">

Introduce tus comentarios:

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

Que resulta:

Introduce tus comentarios:

Adviértase que cuando se pulse el botón de envío (que veremos más adelante), recibiré un e-mail suyo con los datos introducidos.

II.b1. INTRODUCCION POR MENUS: Cuando se desea que el usuario, en lugar de introducir un texto, tenga la posibilidad de escoger entre varias opciones que elaboraremos, se hace uso de un Formulario de Menú.

Para el uso de Listas desplegables, deberemos utilizar dos etiquetas de inicio <SELECT NAME="yy"> y la de cierre </SELECT>. Las distintas opciones a escoger se consiguen con la etiqueta <OPTION>

Ejemplo, el usuario elige su color preferido:

<FORM ACTION="mailto:dirección e-meil" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Elige tu color preferido
<BR><SELECT NAME="COLORPREFERIDO">
<OPTION>Amarillo
<OPTION>Blanco
<OPTION>Rojo
<OPTION>Azul
</SELECT>
</FORM>

Resulta:

Elige tu color preferido

Los parámetros que admite <SELECT> son las siguientes:

Atributos

Utilidad

SIZE

El número de opciones que podremos ver. Si es (> 1 ) veremos una lista de selección y, si no, veremos una lista desplegable.

MULTIPLE

Si lo indicamos podremos elegir más de una opción.

Los parámetros que admite <OPTION> son:

Atributos

Utilidad

VALUE

Este es el valor que asignará a la variable.

SELECTED

Si lo indicamos en una de las opciones esta será la seleccionada por defecto.

Ejemplo, el usuario elige su color preferido con 2 opciones visibles:

<FORM ACTION="mailto:dirección e-meil" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Elige tu color preferido
<BR><SELECT NAME="COLORPREFERIDO" MULTIPLE SIZE="2">
<OPTION>Amarillo
<OPTION>Blanco
<OPTION>Rojo
<OPTION>Azul
</SELECT>
</FORM>

Resultando:

Elige tu color preferido

II.b2. FORMULARIO DE CONFIRMACION: Cuando se desea que el usuario confirme una opción determinada, recurrimos a la etiqueta: <INPUT TYPE="checkbox" NAME="yy">

Ejemplo: Solicita confirmación para la inclusión del usuario en una lista de correo
<FORM ACTION="mailto:dirección e-meil" METHOD="POST" ENCTYPE="TEXT/PLAIN">
<INPUT TYPE="checkbox" NAME="ListaCorreos">
Si, Incluido en Lista de Correos
</FORM>

Se obtiene:

Si, Incluido en Lista de Correos

II.c1. BOTONES DE RADIO: Mediante 'botones de radio' el usuario puede elegir una única opción entre varias, el proceso se realiza mediante la etiqueta:

<INPUT TYPE="radio" NAME="yy" VALUE="zz">

Recuerda: [ yy: nombre que ponemos a la variable ] , [ zz: nombre de cada una de las opciones en concreto ].

<FORM ACTION="mailto:dirección e-meil" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32>
<BR> <P>¿Cuantos son cuatro y cinco?<BR>
<INPUT TYPE="radio" NAME="Respuesta" VALUE="mal">8<BR>
<INPUT TYPE="radio" NAME="Respuesta" VALUE="bien">9<BR>
<INPUT TYPE="radio" NAME="Respuesta" VALUE="mal">10<BR><P>
<INPUT TYPE="Submit" VALUE="Comprobar">
</FORM>

Se obtiene:

Nombre:

¿Cuantos son cuatro y cinco?
8
9
10

La etiqueta <radio> tiene como atributo opcional CHECKED, que representa la opción marcada por defecto. Obsérvese que no es posible escoger más de una opción. En efecto, veamos:
<FORM ACTION="mailto:dirección e-meil" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32>
<BR> <P>¿Cuantos son cuatro y cinco? <BR>
<INPUT TYPE="radio" NAME="Respuesta" VALUE="mal">8<BR>
<INPUT TYPE="radio" NAME="Respuesta" VALUE="bien">9<BR>
<INPUT TYPE="radio" NAME="Respuesta" VALUE="mal" CHECKED>10<BR><P>
<INPUT TYPE="Submit" VALUE="Comprobar">
</FORM>

Ahora, resulta:

Nombre:

¿Cuantos son cuatro y cinco?
8
9
10

III. BOTONES DE ENVIO Y BORRADO: El elemento esencial que falta en todos los ejemplos que hemos visto es el botón de envío de datos, que se consigue con la etiqueta [ submit ]:

<INPUT TYPE="submit" VALUE="zz">

Otro botón importante es el de borrado de los datos introducidos, similar al botón de envío, se consigue con la etiqueta: [ reset ]:

<INPUT TYPE="reset" VALUE="zz">

[ zz: texto que aparece en el botón ].

Ejemplo:
<FORM ACTION="mailto:dirección e-meil" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32>
<BR> <P>¿Cuantos son cuatro y cinco?<BR>
<INPUT TYPE="radio" NAME="Respuesta" VALUE="mal">8<BR>
<INPUT TYPE="radio" NAME="Respuesta" VALUE="bien">9<BR>
<INPUT TYPE="radio" NAME="Respuesta" VALUE="mal">10<BR><P>
<INPUT TYPE="Submit" VALUE="Enviar datos">
<INPUT TYPE="Reset" VALUE="Borrar datos">
</FORM>

Se obtiene:

Nombre:

¿Cuantos son cuatro y cinco?
8
9
10

  

Inicio