FORMULARIOS:

Intenta que el lenguaje HTML sea interactivo. Con los formularios se puede enviar información desde una página Web para que posteriormente sea procesada. El tipo más básico de formularios consiste en una serie de casillas para rellenar. Cuando hayamos completado el formulario, enviar la información a un supuesto destino. El destino puede ser enviar los datos por medio del correo electrónico.

<FORM ACTION="mailto:jcaball1@arrakis.es" METHOD="POST" >

<FORM> .........</FORM> La marca no sólo servirá para marcar el formulario, también deberá especificar que hacer con la información. Esta directiva tiene dos parámetros que forzosamente la tienen que acompañar. action y method.

  • En el atributo ACTION, ponemos lo que se desea hacer con la información (URL de la página o programa que va a tratar los datos, o dirección de e-mail si sólo deseamos enviarlos).

  • Con el atributo METHOD se indica el método que vamos a utilizar para enviar los datos {POST / GET } (POST es el que usaremos para el correo electrónico, utiliza la entrada standar. GET vincula la información a la URL, usando cómo separador "?", con lo cual el programa que los recibe los trata como parámetros d entrada).

Para la entrada de datos, utilizaremos la marca <INPUT> con los atributos "type", (el tipo de control deseado según la tabla), "name" (Deberemos dar a cada control un nombre para que en el destino se puedan interpretar, la respuesta de que se trate. y "value"(Lo utilizaremos para dar un nombre a los botones de control).

Una primera aproximación a los valores que pueden darse a "type=valor".

Valor en type
Observaciones
"password" La introducción en pantalla se visualiza en forma de asteriscos.
"text"

Caja de texto . Podemos utilizar "size" para marcar en la pantalla la longitud de la caja. También podemos utilizar Maxlength, para indicar el número máximo de caracteres que se pueden introducir.
"checkbox" Cuadrado de "Si/No" posibilidad múltiple. Si deseamos que salga un valor por defecto, utilizamos "checked"
"radio" De entre un conjunto elegir uno. Deberán tener el mismo nombre para discernir el grupo. Podremos utilizar el atributo "checked" para marcar un valor por defecto.



Cada control debe tener siempre asociado un nombre. name="nombre_control"

Para la salida de un menú desplegable, utilizaremos:


<SELECT NAME="nombre_control"> ........... </SELECT>


Cada una de las posibles opciones deberá ir precedida por:
<OPTION VALUE="literal"

Por defecto la primera opción será la primera que salga, si deseamos cambiar esta opción y señalar una por defecto, deberemos utilizar "selected" a la marca del valor que deseamos que salga por defecto.

Podemos establecer este sistema como ventanas con desplazamiento, añadiendo la marca "size=número" .

Si deseamos un sistema en el que podamos elegir varias opciones, pondremos dentro de SELECT el atributo "multiple" (Para seleccionar varias, deberemos hecerlo con CTRL+ la opción deseada, en aso de no contiguas, o MAY+ deseadas, si son consecutivas.

La última opción son las áreas de texto. Un área de texto es un espacio cuyo tamaño lo decidimos nosotros.

<TEXTAREA NAME="nombre" COLS=n ROWS=n> texto por defecto </TEXTAREA>

Botones "Submit" (Proceder al envío) y "Reset" (borrar y volver a empezar)

Para poner un texto propio a estos botones, deberemos utilizar VALUE="Texto deseado"

INPUT type="Submit" Value="Enviar"
INPUT type="Reset" Value="Borrar"

Veamos el siguiente código.

<H3> FORMULARIOS (1) </H3>
<FORM ACTION="mailto:logicname@arrakis.es" METHOD="POST" name=Formulario_1"                              ENCTYPE="TEXT/PLAIN">
Botón "PASSWORD" <INPUT type="password" name="codigo"><BR>
<HR>
Botón "TEXT" <INPUT type="text" name="nombre" size=15 maxlength=15 ><BR>
<HR>
Botón CHECKBOX_1 <INPUT type = "checkbox" name="perro"><BR>
Botón CHECKBOX_2 <INPUT type = "checkbox" name="gato"><BR>
Botón CHECKBOX_3 (Defecto)
<INPUT type = "checkbox" name="animal" checked> <BR>
<HR>
Botón "RADIO": Elección entre un grupo: <BR>
primero <INPUT type="radio" name="boton2">
segundo <INPUT type="radio" name="boton2">
tercero (defecto) <INPUT type="radio" name="boton2" checked><BR>
<HR>
Opción de grupo por persiana
<SELECT NAME=Opciones>
   <OPTION VALUE="Primera opción">Primera opción
   <OPTION VALUE="Segunda opción">Segunda opción
   <OPTION VALUE="tercera opción" selected>tercera opción
</SELECT>
<HR>
Area de texto definida<BR>
<TEXTAREA NAME="ntexton" COLS=30 ROWS=4> texto por defecto </TEXTAREA>
<INPUT type="Submit" Value="Enviar">
<INPUT type="Reset" Value="Borrar">
</FORM>

Para ver el resultado del código:

 

Código recibido /enviado por e-mail.

<FORM ACTION="............." METHOD=".......... ENCTYPE="TEXT/PLAIN">

La forma habitual de codificación de la información del formulario (por defecto" es la "application/x-www-form-urlencoded", la cual convierte cada espacio en blanco en un "+", junta toda la información con"&" y los valores que no son alfanuméricos los pone como secuencias de escape "%HH".

Otra opción es enviar fichero con : ENCTYPE="multipart/form-data">
Con esta última acción el texto recibido es el siguiente:

código=Código cliente
nombre= Nombre animal
perro=on
gato=of
animal=of
botón=of
Opciones=Primera opción
ntexton=Funciona perfectamente

También podemos hacer que en los botones submit aparezca una imagen.

<INPUT type="Image" SRC="imagen.gif">


En el caso de que tengamos varios formularios en la misma página, o nos interese identificarlos por cualquier motivo, podemos dar un nombre simbólico mediante: name="nombre"

Otra solución de interés es poder establecer la opción "target" de tal forma que si operamos con frames podremos enviar el resultado a un frame determinado.