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: Pinchamos en para que se desplegue el panel:

si no está ya desplegado, y elegimos la pestaña

Colocamos el cursor en el sitio donde queramos que se coloque el formulario y pinchamos en el icono .

Aparecerán los límites del formulario representados por un rectángulo cuyos lados son una línea discontinua de color rojo:

Ahora, por motivos estéticos, vamos a colocar una tabla dentro del formulario con dos columnas y varias filas: Situamos el cursor dentro del rectángulo de líneas discontinuas, introducimos la tabla y la centramos:

Vamos a emplear, la columna de la izquierda para realizar la pregunta correspondiente (justificado a la derecha) y la columna de la derecha para colocar los objetos de formulario (justificado a la izquierda).

19.1.- Campo de texto.

Vamos a hacer, como ejemplo, un formulario que recoja la opinión sobre esta página web. Empezamos con el primer Objeto de formulario: Campo de texto.

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,debajo, 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 .

Nuestro formulario tendrá este aspecto:

Y, debajo, aparecerá el panel 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í:

Ponemos un tercer botón con la opción de que la página es Mala.Bastante 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.

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 .

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

Vamos escribiendo en los elementos del menú. 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 navegador:

Podemos incluir una campo de texto para comentarios. Lo podemos hacer con el botón de Campo de texto definiendo en las propiedades, o bien, dando directamente al botón: (Área de texto):

Lo introducimos:

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

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 botón de borrar 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:

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án las propiedades del formulario:

En Acción escribimos mailto:direcciondecorreo. Por ejemplo en mi caso, escribiría mailto:apuente@roble.pntic.mec.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".

Podemos intentar seleccionarlo del menú: Si no está allí tenemos que escribirlo 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:

Vemos, de nuevo, las propiedades del formulario:

Nuestro formulario ya tiene que funcionar. Lo guardamos primero, 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 MX se da por acabado.

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

Ángel R. Puente Pérez