Blog de Daiyiro

#BlogDeDaiyiro es sobre todo Bricolajes de Electrónica/Informática. ¡^-^¡

LO NUEVO:

12.10.13

10 - Edición En HTML - Formularios

FORMULARIOS

Los formularios nos permiten dentro de una página Web solicitar información al visitante y procesarla.



En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedará asociado a una variable. Una vez se hayan introducido los valores en los campos, el contenido de estos será enviado a la dirección (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este último paso de procesar las variables necesitaremos realizar un programa externo en algún lenguaje de programación como PERL, C++ o Visual Basic.



A este programa externo se le suele llamar CGI (Common Gateway Interface).

La creación de este tipo de programas sería tema de otro manual diferente, por lo que aquí veremos como se pueden enviar las variables a nuestra dirección de correo electrónico.

La declaración del formulario se pone entre las directivas <FORM></FORM>.

En el interior de la declaración se indican los elementos (variables) de entrada.

La directiva <FORM> tiene los parámetros action y method:
action = "programa"
Indica el programa que va a "tratar" a las variables que se envíen con el formulario. En nuestro caso enviaremos las variables por correo electrónico, con lo que el "programa" será "mailto: dirección_de_correo".
method = POST / GET
Indica el método según el que se transferirán las variables. POST produce la modificación del documento de destino (como en el caso de enviar por correo las variables). GET no produce cambios en el documento destino (como en el caso de una consulta a una base de datos, p.ej. una página de búsqueda en Internet).
Campos de Entrada

Para la introducción de las variables se utiliza la directiva <INPUT>. Esta directiva tiene el parámetro type que indica el tipo de variable a introducir y name que indica el nombre que se le dará al campo.

Cada tipo de variable tiene sus propios parámetros:
type= text name = campo
Indica que el campo a introducir será un texto.

Sus parámetros son :
maxlenght = numero
Numero máximo de caracteres a introducir en el campo. 
size = numero
Tamaño en caracteres que se mostrará en pantalla. 
value = "texto"
Valor inicial del campo. Normalmente sera " ", o sea, vació.
type = password name = campo
Indica que el campo sera una palabra de paso. Mostrará asteriscos (*) en lugar de las letras escritas.

Sus parámetros opcionales son los mismos que para text.
type = checkbox name = campo
El campo se elegirá marcando una casilla. Se permite marcar varias casillas.

Los valores de las casillas serán indicados por :



value = "valor"
checked
La casilla aparecerá marcada por defecto.
type = radio name = campo
El campo se elegirá marcando una casilla. Solo permite marcar una sola de las casillas.
Los valores de las casillas serán indicados por:
value = "valor"
type = image name = campo
El campo contendrá el valor de las coordenadas del punto de la imagen pinchado.

Debe indicarse la imagen con el parámetro:
src = "fichero de imagen".
type = hidden name = campo
El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre con el valor indicado por el parámetro:
value = "valor"
type = submit
Representa un botón. Al pulsar este botón la información de todos los campos se envía al programa indicado en <FORM>.

Tiene el parámetro value = "texto" que indica el texto que aparecerá en el botón.
type = reset
Representa un botón.

Al pulsar este botón se borra el contenido de todos los campos. El parámetro value = "texto" indica el texto que aparecerá en el botón.

Campos de Selección

Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias.

Se utiliza para ellos la directiva <SELECT> </SELECT> . Sus parámetros son :
name = campo
Nombre del campo
size = num
Numero de opciones visibles. Si se indica 1 se presenta como un menú desplegable, si se indica mas de uno se presenta como una lista con barra de desplazamiento.
multiple
Permite seleccionar mas de un valor para el campo. 
Las diferentes opciones de la lista se indican con la directiva <OPTION>. Esta directiva puede incluir el parámetro selected para indicar cual es la opción por defecto.

En caso de que no se especifique, se tomara por defecto la primera opción de la lista.


Áreas de Texto

Representa un campo de texto de múltiples lineas. Normalmente se utiliza para que se incluyan en el comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>, y sus parámetros :
name = campo
Nombre del campo.
cols = num.
Numero de columnas de texto visibles.
rows = num.
Numero de filas de texto visibles.
wrap = VIRTUAL / PHYSICAL
Justifica el texto automáticamente en el interior de la caja.

La opción PHYSICAL envía las lineas de texto separadas en lineas físicas.



La opción VIRTUAL envía todo el texto seguido. 
Veamos a continuación un ejemplo de formulario utilizando todas las formas de introducción de datos.


<FORM action = "mailto: pepito@jotmail.es" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Clave: <INPUT type = password name = clave size = 8 >
<P>
Archivos a Enviar:
<INPUT type = checkbox name = archivo value = "Tutorial" > Tutorial HTML
<INPUT type = checkbox name = archivo value = "Tutopsp" > Tutorial PSP
<INPUT type = checkbox name = archivo value ="Help" > Ayuda
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 años
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años
<INPUT type = radio name = edad value = "+40" > Mas de 40 años
<P>
<INPUT type = hidden name = lugar value = "Pagina de Juan" >
Como encontraste mi página :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Por el buscador Terra
<OPTION>Por el buscador Yahoo
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = physical ></TEXTAREA>
<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>


Ahora veamos el efecto producido en la página Web :


Tu Nombre: Tu Clave:
Archivos a Enviar:
Tutorial de HTML Tutorial PSP Ayuda

Tu Edad :
Menos de 20 años
Entre 20 y 40 años
Mas de 40 años

Como encontraste mi página :

Tus Comentarios:


Si rellenas este FORM y pulsas sobre el botón Enviar, (estando conectado a Internet), se generará un mensaje de correo a mi dirección de correo pepito@jotmail.es. Si pulsas el botón Borrar se borraran los datos que hayas introducido en el Formulario.

El texto que se recibiría por correo electrónico sería parecido a este :

nombre=Toni+Galon &clave=12345678 &archivo=Tutorial &archivo=Help &edad=20-40 &lugar=Pagina+de+Juan &donde=Por+el+buscador+Google &comentario%94= Espero+que+me+mandes+los%0D%0Aficheros+antes+del+martes%0D%0A%0D%0AS aludos.%0D%0A

Podemos observar que en el correo se separan las variables con el símbolo &, los espacios se sustituyen por el signo + y se representan los códigos de retorno de carro y avance de linea del campo de texto con los caracteres %0D
y %0A respectiva mente.

Si en vez de enviar estas variables por correo electrónico, fuesen enviadas a un programa (CGI), este programa podría tratarlas y dar como respuesta una nueva página Web.

2 comentarios:

  1. Hola, hay parámetros de los que no hablas en este articulo, podrías ampliar información ¿para que me quedara claro? he observado que el formulario que tienes en el blog en la sección "Contactar" es parecido al que pones aquí de ejemplo, pero esta mucho mas depurado, me gustaría poder hacer uno como el de tu blog, por eso me parece interesante que pudieras ampliar información, Gracias, Un Saludo.

    ResponderEliminar
    Respuestas
    1. Efectivamente, son ambos formularios muy parecidos, lo único que el del Blog tiene ciertas mejoras. Ok, en cuanto me sea posible re-editare este post para ampliar información, si de verdad es de interés no me cuesta nada explicar en que consisten las mejoras que le di y como aplicarlo al formulario, Un Saludo

      Eliminar