Formularios

Hasta ahora hemos visto cómo formatear el documento, insertar objetos, tablas y crear páginas con marcos. Ha llegado el momento de ver cómo interactuar con el usuario y recibir información de él. Aunque el uso de los formularios no sea algo complejo, si que lo es el tratamiento que hagamos de éstos datos.

Vamos a suponer que disponemos de un script en Perl, C, Java, JavaScript o ASP que pueda procesar los datos que vamos a introducir y nos limitaremos a ver cómo insertar los objetos de un formulario en una página Web. El resto queda, por tanto, para un curso más avanzado.

Al igual que las tablas o los marcos los formularios son también códigos anidados. En particular su raíz viene dada por el código Html FORM, dependiendo de sus atributos cómo se va a procesar éste formulario. Veamos éstos atributos...

Atributo	Descripción
Action	Dirección URL del script que procesa el formulario.
Method	Método de proceso de los datos. Puede ser POST o GET (por defecto) según lo requiera el script.
Target	Especifica el marco o ventana en que se mostrarán los resultados de ese proceso.

El siguiente ejemplo mandaría por email los datos del formulario a mi cuenta de correo, con "Hola" como Asunto del email.

<form method="POST" action="mailto:quintus@sarovi.com?subject=Hola">
[...]
</form>

Una vez tenemos un lugar donde mandar los resultados del formulario (notad que ésto no es necesario si por ejemplo utilizamos formularios para alguna función de JavaScript, pero eso es otro asunto).

Vamos a ver los diferentes objetos que pueden ser parte de un formulario así como sus atributos. Hay tres códigos que determinan tres grupos de objetos principales de un formulario, INPUT (para cajas de edición, botones, checkbox, texto oculto...), SELECT (para listas y cajas de selección) y TEXTAREA (para cajas de edición de texto multilínea, o "memo"); vamos a ver sin embargo cada uno de los diferentes objetos como si se tratase de un código HTML independiente.

WS	Código	Descripción y Atributos
	INPUT type="Text"	Caja de edición. name. Identificativo del objeto. value. Texto inicial. size. Número de caracteres visibles. maxlength. Número máximo de caracteres admisibles. <input type="Text" name="Nombre" value="[Tu nombre aquí]">
	INPUT type="Password"	Caja de edición de contraseñas. name. Identificativo del objeto. value. Texto inicial. size. Número de caracteres visibles. maxlength. Número máximo de caracteres admisibles. <input type="Password" name="Secreto" value="Ingrediente secreto">
	INPUT type="hidden"	Texto oculto. Útil para añadir información dinámica, calculado con JavaScript, por ejemplo, y que no sea visible por el usuario. name. Identificativo del objeto. value. Texto inicial. <input type="hidden" name="Oculto" value="Texto Oculto">
	INPUT type="Button"	Botón. name. Identificativo del objeto. value. Texto del botón. <input type="Button" value="Botón">
	INPUT type="Submit"	Botón "Enviar". Al pulsarlo se procesará el formulario. name. Identificativo del objeto. value. Texto del botón. <input type="Submit" value="Aceptar">
	INPUT type="Reset"	Botón "Borrar". Al pulsarlo todos los objetos del formulario recuperan sus valores iniciales. name. Identificativo del objeto. value. Texto del botón. <input type="Reset" value="Borrar">
	SELECT	Caja de selección desplegable. name. Identificativo del objeto. Se trata de un código anidado, indicándose cada una de las opciones de la caja de selección con un nuevo código Html, OPTION, de la siguiente manera... <select name="Bocadillos"> <option value="Tortilla">Tortilla. <option value="Anchoas">Anchoas. <option value="Chorizo" selected>Chorizo. <option value="Queso">Queso. </select> Bocadillo de tortilla. Bocadillo de anchoas. Bocadillo de chorizo. Bocadillo de queso. Notad que el atributo "selected" especifica el elemento seleccionado al principio, y "value" será el valor devuelto por el formulario al ser procesado.
	SELECT size="..."	Lista de selección. name. Identificativo del objeto. size. Especifica el número de líneas visibles en la lista de selección. multiple. Permite seleccionar más de un elemento, usando las teclas CTRL y MAYUS. Se trata de un código anidado, indicándose cada una de las opciones de la lista de selección con un nuevo código Html, OPTION, de la siguiente manera... <select name="Bocadillos" size="3" multiple> <option value="Tortilla">Tortilla. <option value="Anchoas">Anchoas. <option value="Chorizo" selected>Chorizo. <option value="Queso">Queso. </select> Bocadillo de tortilla. Bocadillo de anchoas. Bocadillo de chorizo. Bocadillo de queso. Notad que el atributo "selected" especifica el elemento seleccionado al principio, y "value" será el valor devuelto por el formulario al ser procesado.
	INPUT type="image"	Permite utilizar una imagen como si se tratase de un botón "Enviar". Al pulsar sobre ella se procesará el formulario. name. Identificativo del objeto. src. Dirección URL de la imagen. <input type="image" src="img/btn_webscope.gif">
	INPUT type="radio"	Grupo de selección (por lo que deberá haber varios de éstos objetos, todos con el mismo identificativo), permite elegir entre varias opciones. name. Identificativo del objeto. value. Valor devuelto si el elemento está seleccionado. checked. Elemento seleccionado inicialmente. <input type="radio" name="Salsa" value="Mayonesa">Mayonesa <input type="radio" name="Salsa" value="Mostaza" checked>Mostaza <input type="radio" name="Salsa" value="Tomate">Tomate Mayonesa Mostaza Tomate Como vemos el texto de cada elemento se coloca detrás del código Html, como si se tratase de una lista.
	INPUT type="checkbox"	Grupo de selección múltiple (por lo que deberá haber varios de éstos objetos, todos con el mismo identificativo), permite elegir varias opciones. name. Identificativo del objeto. value. Valor devuelto si el elemento está seleccionado. checked. Elemento seleccionado inicialmente. <input type="checkbox" name="Ingredientes" value="Cebolla" checked>Cebolla <input type="checkbox" name="Ingredientes" value="Lechuga" checked>Lechuga <input type="checkbox" name="Ingredientes" value="Pepinillos">Pepinillos Cebolla Lechuga Pepinillos Como vemos el texto de cada elemento se coloca detrás del código Html, como si se tratase de una lista.
	TEXTAREA	Caja de edición de texto multilínea. name. Identificativo del objeto. rows. Número de líneas visibles. cols. Número de caracteres horizontales visibles. wrap. Ajuste de línea, puede ser OFF, PHISICAL (por defecto) o VIRTUAL; según esté desactivado, activado o activado sólo en el navegador (el texto se procesa como una única línea) <textarea name="Observaciones" rows="5" cols="40" wrap="PHYSICAL"> [Delicioso, me gusta así] </textarea> [Delicioso, me gusta así]