Formularios en HTML
No es necesario navegar mucho tiempo por Internet para encontrar páginas Web en las que se piden datos a los navegantes. Quizá las primeras páginas que hicieron uso de esta posibilidad fueron las de los sistemas de búsqueda. Los formularios usados en estos sistemas son, en general, bastantes sencillos, únicamente es necesario un elemento, conocido como caja de texto, donde sea posible introducir la palabra o frase que deseamos buscar.
En la figura 12.1 vemos un buen ejemplo de este tipo de uso. En ella vemos la página principal de Tower Communications se ofrece una caja de texto donde el usuario debe introducir una cadena de texto que desea buscar. Después debe pulsar sobre el botón ENVIAR, tras lo cual se mandará la información al servidor Web que la procesará y responderá enviando la información encontrada. Más adelante en la sección ‘Como usar los datos de un formulario’ veremos como es posible recoger y procesar esta información, pero por ahora nos centraremos en la creación y en el diseño de los formularios.
Figura 12.1. En la página principal de Tower Communications vemos un formulario que es usado para permitir a los visitantes introducir una cadena de texto que deseen buscar.
Un caso más complejo de formularios es usado en las páginas en las que se ofrece a los navegantes la posibilidad de realizar sugerencias, ofrecer comentarios o mandar cualquier otro tipo de información. En general estos formularios ocupan una página entera, y están formados por diversos elementos. En la página de Tower podemos encontrar una página de sugerencias que ilustra la utilidad de esta forma de usar los formularios. En la figura 12.2 podemos apreciar esta página, que como vemos permite introducir datos en varios campos, tras rellenarlos deberemos pulsar sobre el botón ‘Enviar formulario’ para mandar la información.
Figura 12.2. En otra sección de la página de Tower Communications vemos un formulario más complicado formado por numerosas cajas de texto y otros elementos.
Estos dos ejemplos son probablemente los más comunes entre las páginas del WWW, pero no los únicos. Los formularios son muy versátiles, como enseguida veremos, y la posibilidad de interactuar con los usuarios de las páginas será útil en multitud de ocasiones. El único límite será nuestra creatividad.
Si queremos preguntar a los visitantes de nuestras páginas su nombre, su dirección de correo electrónico, crear un sistema de búsqueda, hacer un libro de visitas o simplemente pedir sugerencias necesitaremos crear formularios. Un formulario no es más que un conjunto de elementos que permiten introducir datos a los visitantes de nuestras páginas de una manera sencilla. Estos datos son en general texto o una serie de opciones entre las que se debe elegir una o varias. En este capítulo aprenderemos todas las posibilidades que tenemos y como usarlas adecuadamente.
El lenguaje HTML consta de una serie de etiquetas que permitirán crear de forma rápida y sencilla numerosos elementos de entrada de datos. Estos elementos, que reciben el nombre de controles, serán gráficos en la mayoría de navegadores, pero también existen métodos para que los navegadores que sólo pueden mostrar texto, como Lynx, puedan mostrarlos. Un formulario no es más que un conjunto de estos controles cuya información será enviada conjuntamente cuando el usuario pulse sobre el botón de envío.
Para crear un formulario el lenguaje HTML proporciona la etiqueta FORM. Al contrario que la mayoría de etiquetas que hemos visto en los últimos capítulos ésta existe desde la especificación HTML 2.0 y por tanto es entendida prácticamente por cualquier navegador existente actualmente, por lo que puede ser usada con total libertad.
Esta etiqueta consta de una instrucción de inicio, <FORM>, y una instrucción de fin, </FORM>, entre las cuales podremos insertar todos los controles que deseemos. Dicho esto podemos crear nuestra primera página con un formulario. En ella adelantaremos uno de los controles más usados y sobre el que ya hemos hablado antes: la caja de texto. Un poco más adelante la trataremos más en detalle, pero la usaremos en este ejemplo para hacernos una idea de cómo se crea un formulario en una página Web. Para empezar, como siempre que creamos una página nueva, creamos un archivo nuevo en nuestro editor de texto o nuestro editor HTML. En él debemos insertar el siguiente código:
Guardamos el archivo con un nombre de nuestra elección y lo abrimos con el navegador. El resultado será muy similar, si no igual, al que apreciamos en la figura 12.3. La caja de texto es el elemento que sigue al texto ‘Introduzca su nombre:’. En este caso estamos usando para visualizarla el navegador Internet Explorer para Windows 95, por lo que la caja de texto tiene el aspecto habitual en este sistema operativo. Si visualizamos este mismo código desde un navegador de UNIX o Macintosh la caja de texto sería mostrada con la apariencia habitual en estos entornos.
Figura 12.3. Nuestro primer formulario está compuesto por una caja de texto. Para introducirla hemos usado la etiqueta INPUT con TYPE=»text».
La gran novedad de la caja de texto respecto a todos los elementos de las página Web que hemos visto hasta ahora es que permite a los usuarios introducir texto en ella. Para ello no tenemos más que pulsar con el ratón sobre ella (o seleccionarla en el caso de navegadores de texto) y escribir como si estuviésemos en un editor de texto. El texto aparecerá según lo vamos escribiendo. Una vez hemos escrito nuestro nombre (ver figura 12.4) enviaremos los datos pulsando la tecla ENTER.
Figura 12.4. Pulsando sobre la caja de texto nos aparecerá un cursor parpadeante que nos indica que podemos empezar a escribir texto.
En este ejemplo todavía no hemos indicado al navegador dónde debe enviar los datos. Esto se hace con el atributoACTION de la etiqueta FORM, que será visto un poco más adelante. Al no indicar la dirección de destino el navegador no mandará los datos al pulsar la tecla ENTER (o pulsar el botón de envío), aunque por ahora nos olvidaremos de este detalle.
Pero ¿no existía un botón de envío? Si, en los ejemplos de la figura 12.1 y 12.2 veíamos que ambos formularios constaban de un botón de envío sobre el que había que pulsar para mandar los datos. En los casos en los que el formulario conste de más de un control, es decir, de más de un campo de entrada de datos, será necesario incluir el botón. Si el formulario simplemente tiene uno, como ocurre en este primer ejemplo que hemos realizado nosotros, el navegador es capaz de entender que al pulsar la tecla ENTER el usuario quiere mandar los datos de ese formulario, y por tanto el uso de botón de envío es opcional.
Los botones de envío son mostrados como enlaces normales en los navegadores de sólo texto, y por tanto sería más correcto usar también el termino ‘enlace para enviar el formulario’ . Sin embargo, por simplicidad, seguiremos usando únicamente el término botón.
Bien, pero ¿cómo se crea un botón de envío? El lenguaje HTML consta de una etiqueta, INPUT, que permite insertar varios tipos de controles, entre los que se encuentra el botón de envío. Para indicar el tipo de control que queremos insertar se usa el atributo TYPE. Para crear el botón de envío debemos usar TYPE=»submit». Por tanto si en el ejemplo anterior queremos insertar uno, debemos añadir esta etiqueta (de ahora en adelante omitiremos las etiquetas HTML, HEAD y BODY, pero por supuesto debe seguir usándose):
Si visualizamos este código con un navegador, veremos que la caja de texto está acompañada ahora de un botón con un texto que invita a pulsarlo para mandar los datos. En la figura 12.5 vemos que al visualizar este ejemplo con Internet Explorer 4.0 aparece el texto ‘Enviar consulta’ en el botón, este texto ha sido puesto por defecto por este navegador, pero si visualizamos este código con otro puede cambiar. Si el navegador usado es una versión inglesa, el texto del botón estará en inglés. Esta situación es poco deseable en la mayoría de las ocasiones, por los que se creó un atributo, VALUE, que nos permitirá especificar nosotros mismos el texto que queremos que sea mostrado en el botón. Así en podemos reescribir el código para insertar el botón como:
Figura 12.5. Usando el código podemos insertar un botón de envío de manera que al pulsar sobre él se envían los datos del formulario.
Con lo que el resultado obtenido sería el que apreciamos en la figura 12.6. En este caso en el botón el mensaje es ‘Envíeme’ y será éste siempre, independientemente del navegador que usemos para visualizar la página. En esta misma figura podemos apreciar que el tamaño del botón se adapta a la longitud del texto que pongamos en él.
Figura 12.6. Con el atributo VALUE podemos cambiar el texto por defecto del botón de envío por uno de nuestra elección. El ancho del botón se adaptará a la longitud del texto.
Aunque lo habitual es incluir un único botón de envío el lenguaje HTML permite la posibilidad de incluir varios. En este caso debemos usar un nuevo atributo, NAME, para dar un nombre a cada uno que permita al servidor diferenciar cual se ha pulsado. Este nombre será enviado junto con los datos cuando se pulse sobre el botón. De esta forma es posible realizar acciones diferentes dependiendo de sí se pulsa uno u otro. Por ejemplo podían incluirse botones que simulasen distintas direcciones a las que acceder tras introducir los datos:
Es importante indicar que el atributo NAME no debe usarse únicamente para el botón de envío. A continuación aprenderemos a insertar los distintos tipos de controles existentes y crearemos formularios más complejos que hasta ahora, por esta razón deberemos usar NAME en cada uno de los controles. Cuando se pulse el botón de envío se enviará los datos de cada control junto con el nombre especificado con este atributo. De esta forma el servidor podrá saber el control en que se ha insertado cada dato. Recordemos brevemente todos los atributos de la etiqueta INPUT cuando la usamos para insertar el botón de envío:
Pasemos, sin esperar más tiempo, a estudiar cada uno de los controles existentes en el lenguaje HTML.
Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1
