Creacin de Formularios

El formulario es el elemento de HTML que nos va a permitir interactuar con los

visitantes de nuestras pginas web, de forma que podemos solicitarle
informacin al usuario y procesarla. De esta forma, podremos crear en nuestras
pginas: encuestas para solicitar la opinin del visitante sobre algn tema e
incluso sobre el contenido de nuestra propia pgina web, cuestionarios para
evaluar la asimilacin de contenidos sobre un tema concreto que se trate en la
pgina, etc.

El contenido de la informacin introducida por medio del formulario ser
enviado a la direccin URL donde resida el programa que se encargar de
procesar los datos. A este tipo de programas externos se les denomina
programas CGI (Common Gateway Interface).

La etiqueta HTML que nos va a permitir la creacin de formularios es <FORM>.
Su formato es el siguiente:

<FORM action="URL del programa que trata el formulario"
method="post/get">
..... Elementos del formulario .....
</FORM>

action="URL del programa que trata el formulario". A travs de este
argumento indicaremos, como ya hemos mencionado, la direccin del
fichero de programa que va a tratar la informacin suministrada por el
formulario.

Tambin podramos incluir como URL que trata el formulario una
direccin de correo electrnico. Por tanto, el valor de este argumento
podra ser: action ="mailto: direccin de correo".

method="post/get". A travs de este argumento indicaremos el
mtodo empleado para transferir la informacin generada por el
formulario.

Si indicamos post, se producir la modificacin del documento destino,
como es el caso de enviar la informacin a una direccin de correo
electrnico. Mediante el mtodo get no se producirn cambios en el
documento destino.

Dentro de un formulario podremos incluir cualquier texto o instruccin
HTML de las vistas a lo largo de los captulos anteriores adems, claro
est, de los elementos tpicos de un formulario: cajas de texto, botones
de seleccin, mens de opciones, etc. Vamos a ver cmo se incluirn
estos elementos en un formulario.



Entrada bsica de datos.

Para definir los distintos tipos de campos bsicos de entrada de datos
usaremos la etiqueta <INPUT>.
El formato es el siguiente:

<INPUT type= text / password / checkbox / radio / hidden / submit /
image / reset name="Variable" value="Valor inicial">


El argumento type determinar el tipo de campo de entrada que
estamos insertando. A continuacin describiremos cada uno de ellos.

El argumento name especifica el nombre de la variable que tomar el
valor introducido en el campo.

El argumento value especifica el valor por defecto que tendr el campo.


Vamos a continuacin a describir los distintos tipos campos de entrada, que
vendrn dados por los valores del argumento type:

Texto corto: type=text

Con este argumento vamos a indicar que el campo a introducir ser un texto.
El formato sera:

<INPUT type= text name="Variable" value="Valor inicializacin"
size="Tamao" maxlength="Longitud mxima">

El significado de los nuevos atributos es:

size="Tamao". Indicaremos el tamao en caracteres de la ventana de
introduccin de texto.

maxlength="Longitud mxima". Indicaremos el nmero mximo de
caracteres a introducir en el campo.

Vamos a ver un ejemplo en la Tabla 47.

Ejemplo Resultado
Nombre:<INPUT type=text name=Var1
Value="Texto por defecto" size=20
maxlength=25>







Claves: type=password

Con este argumento indicamos que el campo a introducir ser una palabra
clave, por lo que los caracteres que se introduzcan sern sustituidos por
asteriscos en la visualizacin por pantalla. El formato es:

<INPUT type= password name="Variable" value="Valor inicializacin" size="Tamao"
maxlength="Longitud mxima">

El significado de los distintos argumentos es el mismo que en el caso anterior.
Veamos un ejemplo: en la Tabla 48.

Ejemplo Resultado
Clave:<INPUT type=password name=Var2
Value="tutankamon" size=11 maxlength=10>



Botones de seleccin: type=checkbox

El checkbox es un botn que presenta dos estados: marcado (1) y desmarcado
(0). Podremos variar su estado simplemente pinchando con el ratn. El formato
es:

<INPUT type= checkbox name="Variable" value="Valor" checked>

Si especificamos el argumento checked, el botn aparecer marcado por
defecto.

Si incluimos el argumento value, cuando el botn est marcado su variable
asociada adquirir el valor dado por value.

Veamos un ejemplo en la Tabla 49.


Ejemplo Resultado
<INPUT type=checkbox name=Var3 value=Op1
checked>
Opcin1 <br>
<INPUT type=checkbox name=Var4 value=Op2>
Opcin 2






Seleccin entre varias opciones: type=radio

Este argumento se usa cuando hay que hacer una seleccin entre varias
alternativas excluyentes, pudindose seleccionar nicamente una de las
alternativas. Debemos incluir una etiqueta radio por cada una de las posibles
alternativas. El formato es:

<INPUT type= radio name="Variable" value="Valor" checked>


Si especificamos el argumento checked, el botn aparecer marcado por
defecto. En este caso nicamente uno de los botones de radio podr aparecer
marcado, ya que se usa para el caso de opciones excluyentes.

Cuando un botn est seleccionado la variable asociada a la lista de botones
adquirir el valor dado por value.

Veamos un ejemplo en la Tabla 50.

Ejemplo Resultado
<INPUT type=radio name=Var5 value=Op1>
Opcin1 <br>
<INPUT type=radio name=Var5 value=Op2
checked> Opcin 2 <br>
<INPUT type=radio name=Var5 value=Op3 >
Opcin 3


En este ejemplo la variable "Var5" tendr el valor Op2.

Campos ocultos: type=hidden

Este tipo de campos no son visibles para el usuario. Su uso tiene sentido en el
caso de enviar algn tipo de informacin que no deba ser visualizada o variada
por el lector de nuestra pgina Web. El formato es:

<INPUT type= hidden name="Variable" value="Valor" >

Con esta etiqueta asignaramos a la "Variable" referenciada por name el "Valor"
de value y se mandara junto con el formulario sin que el usuario de la pgina
se entere de nada. Veamos un ejemplo en el Cdigo fuente 15.

<INPUT type=hidden name=Var6 value="tutankamon">








Botn de envo de datos: type=submit

Con este argumento especificamos un botn en el que al pulsar, los datos
sern enviados al programa o direccin de correo encargada de procesar la
informacin recogida por el formulario. El formato es:

<INPUT type= submit value="Mensaje a mostrar">

En este caso el parmetro value indica el mensaje que se mostrar en el botn.
Veamos un ejemplo en la Tabla 51.

Ejemplo Resultado
<INPUT type=submit value="Enviar los Datos">



Botn grfico de envo de datos: type=image

Con este argumento especificamos un botn de tipo imagen en el que, al igual
que con el botn anterior, si pulsamos en la imagen los datos sern enviados al
programa o direccin de correo encargada de procesar la informacin recogida
por el formulario. Su formato es el siguiente:

<INPUT type= image src="URL de la imagen" name="Variable">

Con el parmetro src especificamos la URL de la imagen que ser insertada en
el botn. En este caso, en la variable referenciada por name se almacenarn
las coordenadas del punto de la imagen donde se halla pinchado (de forma que
estas coordenadas podran ser procesadas por el programa que recibe los
datos del formulario).

Botn de borrado de datos: type=reset

Con este argumento especificamos un botn que al ser pulsado borrar el
contenido actual de todos los campos, dejndolos con sus valores por defecto.
Su formato es:

<INPUT type= reset value="Texto del botn">

Con el parmetro value especificamos el texto que etiquetar al botn.

Ejemplo Resultado
<INPUT type=reset value="Borrar datos">




Entrada datos en mltiples lneas:

En un formulario tambin podremos introducir un campo de texto que abarque varias
lneas. Para ello usaremos la etiqueta <TEXTAREA> </TEXTAREA>. Su formato es el
siguiente:

<TEXTAREA name="Variable" rows=Filas cols=Columnas>
Contenido por defecto.
</TEXTAREA>

Los argumentos rows y cols nos van a permitir especificar, respectivamente, el
nmero de filas de texto visibles y el nmero de columnas de texto visibles en el
campo.

Ejemplo Resultado
<TEXTAREA name="Var7" rows=5 cols=40>
Contenido por defecto.
</TEXTAREA>



Entrada de datos a travs de campos de seleccin

Con los campos de seleccin podremos desplegar una lista de opciones, entre
las que podremos seleccionar una. Para ello usaremos la etiqueta <SELECT>
</SELECT>. Su formato es el siguiente:

<SELECT name="Variable" multiple size=n>
<OPTION selected value="Valor_1">Primera Opcin
<OPTION value="Valor_2">Segunda Opcin
..........
<OPTION value="Valor_n">Ensima Opcin
</SELECT>

Ejemplo Resultado
<SELECT name= Var8 >
<OPTION value=1>Primera Opcion
<OPTION value=2>Segunda Opcion
<OPTION selected value=3>Tercera Opcion
</SELECT>

Tercera Opcion

<SELECT name= Var8 multiple size=3>
<OPTION value=1>Primera Opcion
<OPTION value=2>Segunda Opcion
<OPTION selected value=3>Tercera Opcion
</SELECT>

Primera Opcion
Segunda Opcion
Tercera Opcion