11. Formularios

Los formularios son elementos que permitirán al visitante interactuar con nuestra página.

Los formularios interpretan las acciones que una persona realiza sobre nuestra página y obtiene en consecuencia determinada respuesta. El proceso de estos datos se realiza mediante un programa ejecutable CGI o de lenguaje de script (PERL, ASP, etc.) en el ordenador de nuestro servidor. Este tipo de programas se escapa al nivel pretendido en estas lecciones por lo que no lo veremos aquí.

Lo que sí podremos hacer de forma inmediata, y sin necesidad de conocer estos lenguages de programación, es pedir información al visitante y que esta información sea enviada a nuestra cuenta de correo electrónico. Esto sólo será posible si el visitante dispone en su ordenador de un programa de correo, por ejemplo el Outlook de Microsoft, y a través de éste se enviará la información solicitada.

La etiqueta que define un formulario es <form>. Su estructura y sus atributos son los siguientes:

En resumen la etiqueta <form> actua en primer lugar como contenedor de los elementos del formulario y en segundo lugar indica la acción a desarrollar con el mismo.

En Html podemos crear los siguientes tipos de controles:

La etiqueta <input> es la que controla la mayoría de los posibles controles de un formulario en Html. El tipo de control lo indicaremos mediante el atributo type.
Esta etiqueta no lleva etiqueta de cierre. Veamos como se usa y sus atributos:

El resto de atributos dependen del tipo de control por lo que los estudiaremos por separado para los distintos tipos:

Para entender todo esto un poco más veamos un ejemplo de formulario con los controles conocidos:

Actividad 11.1

1. Al diseñar una web es muy común crear lo que se llama "Libro de visitas". En el podemos pedir a los que nos visitan sus datos y opiniones y con esto mejorar nuestra web. Esto es lo que haremos en las sucesivas actividades.
2. Crea un nuevo archivo libro.htm con el editor de textos.
3. Crea el siguiente formulario ajustándote al formato que tiene y a las siguientes indicaciones.
   
   
   
   
   • Pseudónimo no puede tener más de 6 caracteres ni Contraseña más de 4
   • Edad, ¿Dónde vives? y Aficiones están en las tres celdas de una tabla
   • El atributo name de la etiqueta <form> debe ser miformulario
   • Cada control ha de tener un atributo name diferente. Para el nombre debe ser name="nombre", lo usaremos más adelante.
   • El formulario se debe enviar por correo a la dirección email@correo.es
4. Guarda el archivo y ábrelo en el navegador para comprobar el resultado.

Para introducir textos largos en un formulario disponemos de la etiqueta <textarea>.

Actividad 11.2

1. Abre el archivo libro.htm con el editor de textos.
2. Añade un control justo antes de los botones, de tipo área de texto y con el rótulo Escribe tus sugerencias:
3. Guarda el archivo y ábrelo en el navegador para comprobar el resultado.

Otro tipo de controles son los menúes desplegables. Estos permiten seleccionar una o varias opciones de una lista.
Un menú desplegable se crea con la etiqueta <select> y dentro de ella crearemos cada elemento de la lista con <option>. La tercera etiqueta, <optgroup>, sirve para agrupar los elementos de la lista cuando es necesario.

Veamos como se utilizan estas etiquetas:

Actividad 11.3

1. Abre el archivo libro.htm con el editor de textos.
2. Añade un control justo antes de Escribe tus sugerencias, de tipo menú desplegable y con el rótulo Qué te parece esta web?
3. Crea las opciones de menú de la imagen siguiente:
   
4. Guarda el archivo y ábrelo en el navegador para comprobar el resultado.

A menudo, y sobretodo cuando hay muchas opciones para elegir en la lista, nos puede resultar interesante agrupar las opciones para un mejor entendimiento. Esto se consigue con la etiqueta <optgroup>.
Vamos a ver como se utiliza y un ejemplo:

Actividad 11.4

1. Abre el archivo libro.htm con el editor de textos.
2. Añade un nuevo control justo antes de ¿Qué te parece esta web?, de tipo menú desplegable y con el rótulo Qué estudios tienes?
3. Crea las opciones de menú de la imagen siguiente con los grupos de opciones que se indican:
   
4. Guarda el archivo y ábrelo en el navegador para comprobar el resultado.

Los botones creados con <button> funcionan igual que los creados con la etiqueta <input type="button">. La única diferencia es que el contenido de un botón creado con <button> es lo que pondremos entre las etiquetas de apertura y cierre, pudiendo definir estilos o incluir imágenes, mientras que al crearlo con <input> sólo podremos incluir un texto mediante el atributo value.

Al igual que vimos en la etiqueta <input>, un botón no hace nada por sí sólo, sino que hemos de asignarle un evento con un lenguaje de script.

Veamos su estructura y un ejemplo:

Actividad 11.5

1. Abre el archivo libro.htm con el editor de textos.
2. Añade un nuevo control, justo después del control donde introduces el nombre, de tipo <button type="button">
3. Escribe Saludo entre las etiquetas de apertura y cierre con un estilo atractivo
4. Añade un atributo onclick con el siguiente contenido:
     alert('Hola '+document.miformulario.nombre.value)
5. Guarda el archivo y ábrelo en el navegador para comprobar el resultado.

Cuando el formulario es muy extenso puede resultar útil agrupar los controles. Esto lo podemos hacer con la etiqueta <fieldset>, y podemos añadir un rótulo a cada grupo de controles con la etiqueta <legend>.

Veamos como utilizarlas y un ejemplo:

Veamos el ejemplo de más arriba con los controles agrupados:

Actividad 11.6

1. Abre el archivo libro.htm con el editor de textos.
2. Agrupa los primeros controles desde Datos personales hasta ¿Qué estudios tienes? con el rótulo Datos del visitante
3. Agrupa los controles ¿Qué te parece esta web? y Escribe tus sugerencias en un grupo con el rótulo Opinión
..
4. Agrupa los dos botones en un grupo con el rótulo Procesado de ls datos
5. Guarda el archivo y ábrelo en el navegador para comprobar el resultado.