19.- Formularios

Vamos con una de las herramientas más útiles en toda página web. Es aquella que recoge información del visitante y, o bien se almacena en el servidor, o bien se nos envía a través de una dirección de correo electrónico.

Son los formularios.

Para insertar un formulario lo hacemos desde Insertar > Formulario

Aparecerá en nuestra ventana documento un rectángulo cuyos lados son una línea discontinua de color rojo:

Nos situamos en el interior del rectángulo con el cursor y le damos a Insertar > Objetos de formulario

Aparecerá la siguiente relación de objetos que podemos insertar

Lo mismo lo podemos encontrar de una manera gráfica, y por tanto, más intuitiva, desde Ventana > Objetos > Formulario

Antes de continuar con la inserción de los diferentes objetos del formulario, vamos a insertar, dentro del formulario, una tabla para que los objetos se queden ordenados de manera más presentable. Así nos situamos dentro del rectángulo rojo e Insertar > Tabla

Aparecerá la ventana de configuración de nuestra tabla. Escribimos 6 filas (ya veremos cuántas necesitamos más adelante, y dos columnas, un ancho inferior al 100% de nuestro documento y, mejor, sin borde:

Le damos a Aceptar y, después centramos la tabla seleccionándola y eligiendo

Alinear Centro del panel de Propiedades de la tabla.

El aspecto inicial de nuestra tabla y formulario será algo así:

En la columna de la izquierda, y alineado a la derecha , escribiremos el texto de lo que queramos preguntar o conocer y en la columna de la derecha, y alineado a la izquierda , insertaremos el objeto de formulario correspondiente.

19.1.- Campo de texto.

Supongamos que queremos hacer un formulario que recoja la opinión del visitante sobre nuestra pagina web.

Situamos el cursor en la primera celda, alineamos a la derecha y escribimos, por ejemplo, Nombre:

En la primera celda de la derecha insertamos un campo de texto

Nuestro formulario tendrá este aspecto:

Y aparecerá la ventana de propiedades del campo de texto:

Allí podemos elegir la anchura del campo, el número de caracteres máximo, si queremos que conste de una o varias líneas, si queremos que se oculte al ser escrito (tipo contraseña), si queremos que aparezca un texto inicialmente y, lo que es más importante, el nombre que le queremos dar: Quitamos textfield y ponemos: nombre

19.2.- Botón de opción.

Vamos ahora a preguntar la opinión sobre la página. En la segunda celda de la columna de la derecha, insertamos un botón de opción

Aparecerá la ventana de propiedades del botón:

En la primera casilla de la izquierda borramos radiobutton y escribimos el nombre de la opción global: opinion En la segunda casilla al lado de Valor activado, escribimos lo que corresponda con esta primera opción que puede ser: muy buena. Podemos elegir que esta opción esté activada o desactivada de entrada. Tenemos que escribir a la derecha del botón el texto que verá el visitante: Muy buena, excelente. El formulario irá quedando así:

Tenemos que seguir insertando los demás botones de opción correspondientes a esta misma cuestión. Por lo tanto los siguientes botones se deberán seguir llamando opinion y en cada caso habrá que escribir lo que corresponde con esa opción.

Para que el segundo botón no quede muy separado del primero le damos un salto de línea ¿recuerdas? Insertar > Caracteres especiales > Salto de línea

El segundo botón, por ejemplo, debería quedar así:

Y nuestro formulario va teniendo este aspecto:

Ponemos un tercer botón con la opción de que la página es mala: Ya sabes el mismo nombre: opinion y como valor activado: mala.

Si queremos colocar otra pregunta de opción deberemos llamarla de otra manera para que no se excluyan las selecciones. Por ejemplo podemos preguntarle al visitante sobre sus conocimientos de informática. El nombre de la opción podría ser conoc_infor (por ejemplo)

El formulario va teniendo este aspecto:

19.3.- Casillas de verificación.

Vamos a insertar ahora casillas de verificación (permiten elegir varias opciones). En nuestro caso, podríamos hacerlo con las cosas que le han gustado o llamado la atención de este curso de Dreamweaver.

Introducimos la pregunta en la siguiente celda de la izquierda ¿Qué es lo que más te ha gustado del curso?. En la celda de la derecha introducimos la primera casilla de verificación pulsando en el icono correspondiente . Aparecerá la ventana de propiedades de esa casilla

Le ponemos un nombre a la casilla, por ejemplo, gustado, y, como primer valor uno de los que se nos puedan ocurrir, por ejemplo,paso a paso (para Valor activado) y una frase un poco más construida para el formulario visible. Damos un salto de línea e introducimos nuevas casillas, siempre con el mismo nombre, gustado, y una frase nueva como Valor activado que debe ser una expresión corta de lo que escribamos en el formulario. Esta parte del formulario podría quedar así:

19.4.- Listas y menús.

A continuación, podemos incluir un menú o lista desplegable. La diferencia entre menú y lista es que la lista permite varias elecciones y el menú una única. Podemos hacerlo, por ejemplo, preguntando por la edad del visitante. Escribimos la pregunta en la siguiente celda Indica tu edad e incluimos el menú en la celda de la derecha pulsando en . Aparecerá la siguiente ventana:

Le damos un nombre a la Lista/menú, por ejemplo, edad y pulsamos . Aparecerá la siguiente ventana:

Vamos escribiendo en los elementos del menú, Etiqueta del elemento. En Valor escribimos lo mismo (será lo que aparezca al ser enviado el formulario). Pulsando la tecla para incluir el siguiente y la tecla para quitar uno ya introducido. Con las flechas vamos cambiando el orden de las etiquetas de elemento.

Cuando lo tengamos todos le damos a Aceptar.

Las diferentes etiquetas no aparecen, sólo lo harán al lanzar la página con el navedador:

Podemos incluir una campo de texto para comentarios. El campo lo podemos definir:

Lo introducimos:

Se nos han acabado las celdas. Introducimos un par más de filas en la tabla: Modificar > Tabla > Insertar filas o columnas:

Podemos introducir ahora (campo de texto) la dirección de correo electrónico del visitante. En este caso, podemos poner un Valor inicial:

Tendrá este aspecto:

19.5.- Botones (Borrar y Enviar).

Finalmente, tenemos que insertar un botón para enviar el formulario y, si lo deseamos, un botón para borrar todo lo que haya podido escribir el visitante. Empezamos por el de borrar:

Vamos a colocar el primer botón en la última celda de la izquierda alineado a la derecha. Colocamos el cursor en la celda, alineamos y pulsamos el icono . Por defecto, Dreamweaver coloca el botón de Enviar.

Nosotros modificamos de la siguiente forma:

A continuación, nos colocamos en la celda de la derecha, alineamos a la izquierda, pulsamos el icono Aparecerá, de nuevo la ventana anterior que modificamos, esta vez ligeramente:

La última fila del formulario tiene este aspecto:

Podemos dar por finalizado nuestro formulario. Queda por definir la acción que queremos que haga una vez relleno. Para usuarios personales, la opción más habitual es el envío por correo electrónico de los datos obtenidos. Esto se hace colocando el cursor en cualquier punto del formulario y eligiendo <form> desde la barra de estado . Aparecerá la siguiente ventana:

En Acción escribimos mailto:direcciondecorreo. Por ejemplo en mi caso, escribiría mailto:apuente@roble.cnice.mecd.es

De todas formas, para que el envío del formulario pueda leerse como un mensaje de correo ordinario, hay que escribir en la etiqueta del formulario del código fuente el atributo enctype="text/plain". Esto lo vamos a escribir directamente en el código. Seleccionamos el formulario colocando el cursor y pulsando <form> de la barra de estado. Pulsamos el botón para acceder al código:

Incluimos lo acordado:

Nuestro formulario ya tiene que funcionar. Lo lanzamos con el navegador y realizamos un rellenado de prueba para ver si lo recibimos satisfactoriamente por el correo electrónico.

Antes de dar por concluido el formulario podemos hacer alguna modificación en la tabla, añadiendo algún color de fondo para separar unas filas de otras. Con el cursor (arrastrando) seleccionamos la primera fila:

Y en la ventana de propiedades de la fila

Elegimos un color de fondo:

Elegimos otro color para la segunda fila y vamos alternando.

Pues bien, este curso de iniciación a Dreamweaver 4 se da por acabado.

Si lo deseas puedes contestar al cuestionario que acabamos de hacer pinchando aquí

Ángel R. Puente Pérez

Ya puedes visitar la continuación de este curso de iniciación: http://www.terra.es/personal8/angelpere/

Anterior