Un recurso que podemos utilizar para comunicarnos con los usuarios que visitan nuestra Web, son los formularios.En ellos se recoge la información dejada por el usuario y normalmente se envia a una dirección de correo particular.

ETIQUETA <FORM></FORM> : Esta etiqueta nos permitirá desarrollar nuestro formulario a traves de sus propiedades.

Para los ejemplos la utilizaremos precediendo las etiquetas de especificaciones del formulario,( areas de texto botones....) sin embargo hacemos la aclaración de que no es necesario utilizarlas para cada etiqueta del formulario, ya que una vez determinada <FORM> Y </FORM> con sus propiedades, dentro de estas, es que se desarrolla todo el contenido del formulario .

ACTION: Esta propiedad nos permite definir el sitio a donde queremos enviar el contenido del formulario, en este caso especificaremos este sitio con una dirección de correo como lo habiamos hecho con los enlaces, sin embargo también hay que destacar que podriamos contratar con el servidor un programa especial para el tratamientos de dichos datos, en este caso la direccion a donde enviaremos los datos del formulario ya no sería una dirección de correo sino la ruta del programa de procesamiento de datos, igualmente la especificación de dicha ruta es la misma que vimos expresada para los enlaces.

EJEMPLO 1 :

<FROM ACTION= "MAILTO: direccion@correo.com"></FROM>

EJEMPLO 2 :

<FROM ACTION="DIRECCION DE ARCHIVO"></FROM>

METHOD: Con este atributo mediante las propiedades GET Y POST nos premite definir las formas en que van a ser transferidas las variables producidas en el contenido del formulario

GET: Este valor se utiliza cuando no se produciran cambios en la información enviada.

POST: Este valor lo utilizaremos cuando si se pueden llegar a producir dichos cambios, como cuando un usuario manda información que puede ser almacenada en una base de datos. RECOMENDAMOS UTILIZAR ESTE VALOR A MENOS QUE SE TE INDIQUE EXPRESAMENTE LO CONTRARIO.

ENCTYPE: Este atributo sirve para definir la forma en la que será enviada la información, en caso de usar el correo electronico debemos utilizar el valor TEXT/PLAIN, de este modo la información se procesará como texto plano dentro del e-mail.

En el caso de enviar la información a un programa para el procesamiento automatico, dejaremos que este atributo tome su valor por defecto ( application/x-www-form-urlencoded ), por tanto no hace falta especificar ningún valor o simplemente no utilizar esta etiqueta.

EJEMPLO : Así nos quedaría la etiqueta especificando los valores expuestos anteriormente.

<FORM ACTION ="MAILTO: free797@hotmail.com" METHOD ="POST" ENCTYPE = "TEXT/PLAIN" > ..... </FORM>

A continuación, y dentro de las estiquetas <FORM> y </FORM> que ya tenemos creadas como se explica anteriormente debemos crear los campos de texto que utilizaremos para poner a dispocición del usuario, esto lo haremos con las siguientes etiquetas.

ETIQUETA <INPUT> : A traves de esta etiqueta insertaremos una caja de texto, esta etiqueta tiene los siguentes atributos:

TIPE= Nos permite crear el area de texto, en este caso estamos hablando de una caja destinada a recogerun texto corto ya que existen otras etiquetas especificas para recoger textos más extensos, en este aributo explicaremos dos valores relevantes:

TEXT: Nos permite ingresar el texto en el campo creado

PASWORD: Con este valor haremos que el texto que se adjunta este oculto tras asteriscos, este valor resulta util al solicitar información confidencial como claves de acceso etc. ya que este está codificado

NAME: Con este atributo daremos nombre a la información enviada desde el formuario, este dato es especialmente importante para el procesamiento de la misma, ya sea en una dirección de e-mail o en un programa de procesamiento de datos, no hay que confundirlo con el texto que indica sobre el dato que requerimos del usuario en el campo del formulario.

SIZE: Nos permite defnir el número de caracteres que se visualizará mientras el usuario esta escribiendo, no debemos confundir con el número de caracteres que cabran dentro de la caja, ya que esto se define con otra etiqueta, está simplemente, como dejimos anteriormente nos permite elegir el número de caracteres visualizados mientras se escribe.

MAXLENGTH : Con este atributo especificaremos la cantidad de texto en caracteres, que cabra dentro de la caja.

VALUE: Este atributo nos permite exponer un ejemplo a manera orientativa sobre la información que requerimos que el usuario escriba en el campo designado; Es decir en el campo que queremos que escriba su nombre, dejariamos un nombre simbolico para indicar que este es el campo designado al nombre.

EJEMPLO:Con lo visto asta ahora veremos un ejemplo de formulario:

<FORM ACTION=MAILTO:"free797@hotmail.com" METHOD="POST" ENCTYPE="TEXT/PLAIN">

Nombre y apellidos:

<INPUT TYPE="TEXT" NAME="NOMBRE DEL CAMPO " SIZE="30" MAXLENGTH="30"

VALUE="PEPITO PEREZ">

Direccion de Correo:

<INPUT TYPE="TEXT" NAME="NOMBRE DEL CAMPO " SIZE="30" MAXLENGTH="30"

VALUE="midirección@correo.com">

Contraseña:

<INPUT TYPE="PASWORD" NAME="NOMBRE DEL CAMPO " SIZE="" MAXLENGTH="30"

VALUE="contraseña">

</FORM>

RECOMENDACIÓN: Para la mejor presentación y organización del formulario, podemos crear una tabla dentro del area del formulario y en las celdas de esta, desarrollamos los campos del formulario.

ETIQUETA <TEXTAREA> </TEXTAREA> Con esta etiqueta podemos crear dentro del formulario un area de texto, con la intención de que el usuario nos envíe su opinion o haga una consulta más extensa.

Al igual que en los casos de campo de texto, explicados anteriormente, definiremos el nombre de nuestra area para el prosesamiento de la información con el atributo NAME.

Para defnir las dimensiones del area utilizaremos las siguientes propiedades:

COLS: Define el número de columnas o caracteres horizontales que tendra el area ( determina el ancho del area )

ROWS: Define el número de lineas que dispondremos para que el usuario deje la información.

(determina el alto del area )

De igual menera que en el campo de texto, podremos dejar a modo orientativo un texto que indique al usuario lo que queremos que comente en el area de texto, esta vez no utilizando el atributo Value, sino escribiendo dentro de la etiqueta lo que queremos que sirva de guia.

EJEMPLO:

<FORM ACTION=MAILTO:"free797@hotmail.com" METHOD="POST" ENCTYPE="TEXT/PLAIN">

<TEXTAREA NAME="COMENTARIO" COLS="30" ROWS="5">Escribe aquí tu opinión.....</TEXTAREA>

</FORM>

ETIQUETA <SELECT> </SELECT> : Esta etiqueta nos permite crear una lista de opciones a elegir por el usuario, utilizaremos nuevamente la el atributo NAME, para darle un nombre a la lista y definiremos cada opción a elegir atraves de los siguentes atributos:

SIZE: Con este atributo definiremos cuantas opciones serán mostradas en el documento, las demás se verán atraves de las barras de desplazamiento.

MULTIPLE: Con esta propiedad, podremos dar al usuario la alternativa de elegir más de una opción, sin embargo por la buena usabilidad de la página es recomendable indicar previamente el procedimiento para aplicarla, que es oprimiendo las teclas shift ó ctrl al mismo tiempo que se hace la selección, ya que en algunos casos, puede ocurrir que el usuario ignore este metodo de selección.

<OPTION> </OPTION> : Dentro de esta etiqueta especificaremos cada opción de la lista, esta etiqueta cuenta con algunos atributos como:

SELECTED: Que nos permitedefinir cual será la opción que se mostrara en la lista

VALUE: Nos permite asignar un número o letra a cada opción de la lista, para que sea organizada con más facilidad en el lugar de destino del formulario ya sea una dirección de correoelectronico o un programa de procesamiento de datos en un servidor.

EJEMPLO 1 : Lista de opción con una sola selección.

<FROM>

<SELECT NAME="LISTA UNA ELECCION" SIZE="1">

<OPTION SELECTED VALUE="1" > MADRID</OPTION>

<OPTION VALUE="2" >BARCELONA</OPTION>

<OPTION VALUE="3">ZARAGOZA</OPTION>

<OPTION VALUE="4">MURCIA</OPTION>

<OPTION VALUE="5">LERIDA</OPTION>

<OPTION VALUE="6">TARRAGONA</OPTION>

<OPTION VALUE="7">GERONA</OPTION>

<OPTION VALUE="8">VALENCIA</OPTION>

<OPTION VALUE="9">CASTELLON</OPTION>

<OPTION VALUE="10">ALICANTE</OPTION>

</SELECT>

</FROM>

EJEMPLO 2 : Lista de opción con selección multiple, para este caso hemos variado el número de opciones que serán visualizadas, y hemos agregado la propiedad MULTIPLE, para conseguir seleccinar mas de una opción

<FROM>

<SELECT NAME="LISTA UNA ELECCION" SIZE="3"MULTIPLE>

<OPTION VALUE="1"> MADRID</OPTION>

<OPTION VALUE="2">BARCELONA</OPTION>

<OPTION VALUE="3">ZARAGOZA</OPTION>

<OPTION VALUE="4">MURCIA</OPTION>

<OPTION VALUE="5">LERIDA</OPTION>

<OPTION VALUE="6" >TARRAGONA</OPTION>

<OPTION VALUE="7">GERONA</OPTION>

<OPTION VALUE="8">VALENCIA</OPTION>

<OPTION VALUE="9">CASTELLON</OPTION>

<OPTION VALUE="10">ALICANTE</OPTION>

</SELECT>

</FROM>

ETIQUETA INPUT : Con esta etiqueta podemos crear botones de radio estos nos sirven para guiar al usuario en la respuesta que nos ha de dar, "obligandole" a elegir una de las respuestas concretas que le ofrecemos a traves de este metodo.

ATRIBUTO TYPE: Este atributo de INPUT, es el que utilizaremos para lograr crear nuestro boton, dandole el valor RADIO, una anotación a tener en cuenta es que en el atributo NAME, a todos los botones de una misma pregunta debemos asignarles el mismo nombre.

ATRIBUTO CHECKED: Con este atributo podemos hacer que aparezca por defecto seleccionada una de las opciones, de modo que la etiqueta quedará asi:

EJEMPLO:

<FROM>

Le ha gustado este sitio:

<INPUT TYPE="RADIO"NAME="BOTONES" VALUE="1" CHECKED>SI

<INPUT TYPE="RADIO"NAME= "BOTONES" VALUE="2" >NO

</FROM>

CHECKBOX: Con el mismo concepto visto anteriormente veremos las cajas de validación, que el usuario la activa o no según su interés o necesidad, lo único que varia en lo visto anteriormente es el valor del atributo TYPE, que en lugar de ser RADIO, será CHECKBOX, igualmente que en los botones de radio podemos activar la caja por defecto con el atributo CHECKED.

ETIQUETA <LABEL> </LABEL> : Con esta etiqueta lograremos que el texto que acompañe el botón este asociado al mismo, es decir que el usuario podrá seleccionar el texto y el botón se activará, como si se hubiese clikeado directamente sobre el, para ello debemos encerrar dentro de <LABEL> y </LABEL> la etiqueta de creación de nuestro botón

EJEMPLO, CAJA DE VALIDACIÓN:

<FORM>

<LABEL>

Recordarme en este sitio:

<INPUT TYPE="CHECKBOX" NAME="CAJA VALIDACION" CHECKED>

</LABEL>

</FORM>

La informacion que recbiremos en la dirección de correo o en el programa de datos del servidor será, ON u OFF, dependiendo si la caja ha sido validada o no.

RESET: Con este valor en el atributo TYPE, podemos crear un boton de borrado del formulario, utilizando el mismo procediemiento explicado anteriormente, y mediante el atributo VALUE, especificamos el texto del botón.

EJEMPLO:

<FORM>

<INPUT TYPE="RESET" VALUE="BORRAR">

</FORM>

SUBMIT: Con este valor de TYPE, crearemos nuestro botón de envío del formulario, nuevamente utilizamos el mismo proceso anteriormente citado:

EJEMPLO:

<FORM>

<INPUT TYPE="SUBMIT" VALUE="ENVIAR"

</FORM>

BUTTOM: Con este valor podemos crear botones normales, en el caso de que creamos necesario su utilizacion si estamos trabajando con el lenguje JAVA SCRIPT,para conseguir que un usuario tome una acción determinada pulsando el botón, su sintaxis es así.

EJEMPLO:

<FORM>

<INPUT TYPE="BUTTON" VALUE="TEXTO DEL BOTÓN"

</FORM>

HIDDEN: Este valor nos permite enviar datos ocultos al usuario, pero visibles en la información que se envía a la dirección de correo que recoge los datos del formulario o al programa procesador de los mismos en un servidor según el caso, su sintaxis es igual a la que hemos visto anteriormente.

EJEMPLO:

<FORM>

<INPUT TYPE=HIDDEN NAME="PROCEDENCIA"VALUE="TUTORIAL HTML"

</FORM>

Debemos recordar que en el caso de que el formulario sea enviado a una dirección de correo, es necesario que el usuario tenga instalado en su ordenador un programa para tal fin, de lo contrario el formulario no pdra ser enviado directamente, esto no quiere decir que sea este el único metodo de enviar formularios ya que se puede conseguir que no sea necesaria la intervención del programa de correo electronico predeterminado del usuario, utilizando un lenguje avanzado del lado servidor como PHP o ASP.....

EJEMPLO DE FORMULARIO COMPLETO:

Nombre y apellidos:
Dirección de correo :
Contraseña
Mi afición favorita es:
Le ha gustado este sitio:	SI NO
Dejenos su opinión:	Escriba aquí su comentario......
Recordarme en este sitio:

RECOMENDACION: Si deseas echarle una ojada al codigo del anterior ejemplo de formulario completo, puedes hacerlo abriendo el siguiente enlace y siguiendo las indicaciones que aparecen allí.

EJEMPLO DE FORMULARIO COMPLETO

TUTORIAL HTML

FORMULARIOS

(Hipertex markup language)