Páginas web con FrontPage Express

5. Formularios

Los objetivos de la quinta lección son:

5.1 Crear formularios con todos los tipos de campos:

5.1.1 Propiedades de formulario
5.1.2 Cuadro de texto
5.1.3 Menú desplegable
5.1.4 Botón de opción
5.1.5 Casilla de verificación
5.1.6 Cuadro de texto con desplazamiento
5.1.7 Botón de comando
5.1.8 Campo oculto

5.2 Actividad nº 5: Crear una encuesta con formulario
5.3 Enviar un mensaje con código PHP
5.4 Conocer los campos de formulario en HTML

5.1 Crear formularios

Los formularios son imprescindibles para la comunicación con los lectores de una página. Se suelen utilizar para pedir datos y comentarios o para realizar encuestas. En la parte final de su página, el Monstruo ha introducido un formulario para pedir al lector que le escriba y le dé una serie de datos. En ese formulario se han introducido casi todas las herramientas que nos brinda el lenguaje HTML al respecto, es decir, cuadros de texto de una o de más líneas, menú desplegable, botones de opción, casillas de verificación, botones de comando y campo oculto. Los campos se han colocado en una tabla de siete filas y dos columnas para que queden bien ordenados en el documento. Antes de comenzar la explicación, conviene ver el formulario:

Tu nombre:
Tu e-mail:
Dónde vives:
Eres: Monstruo
Víctima de un monstruo
Otro ser extraño
Persona normal
¿Qué te gusta
de mi página?
El diseño
El contenido
Las imágenes
Nada de nada
Tus comentarios:

Para introducir en nuestra página los campos del formulario, podemos acudir al menú Insertar y elegir la opción Campos de formulario; se abre entonces otro menú donde aparecen los campos. Pero más cómodo resulta acudir a los botones apropiados de la barra de herramientas, que son los siguientes:

Campos de formulario

5.1.1 Propiedades de formulario

Para introducir un formulario en nuestro documento hay que insertar un campo cualquiera. El primer campo que vamos a introducir es el de un cuadro de texto. Para ello, colocamos el cursor en el lugar del documento donde queremos que se ubique y después pulsamos el primer botón de campos de formulario de la barra de herramientas (el primero de la imagen anterior). Aparecerá un cuadro de texto en la página rodeado de un rectángulo que tiene la línea discontinua: eso quiere decir que el programa ha introducido automáticamente la etiqueta <form> en el código fuente, que indica la inclusión de un formulario en el documento. A partir de ahora, todos los campos que introduzcamos los tenemos que colocar dentro de ese rectángulo. En el caso de la tabla aquí incluida, la cosa se complica, porque cada vez que introduzcamos un campo en una celda se creará un formulario distinto. Para solucionar esto tendremos que ir al código fuente de la página y colocar una etiqueta <form> de apertura antes de la tabla y otra de cierre después de la tabla, y borrar las demás etiquetas <form>. Otra manera de corregir este problema consiste en incluir el primer campo del formulario en nuestra página y crear después la tabla dentro del rectángulo de línea discontinua. Entonces, arrastramos con el ratón el primer campo al lugar de la tabla donde queramos ubicarlo, y posteriormente ya podemos incluir los demás campos del formulario en las distintas celdas.

Para ver las Propiedades de formulario hay que colocar el cursor dentro del formulario, apretar el botón derecho del ratón y elegir la opción adecuada; se verá una ventana de la que de momento vamos a utilizar la sección Controlador de formulario. Sólo hay que rellenar el Nombre del formulario; a continuación, pulsamos el botón Configuración y entonces aparecerá otra ventana que es fundamental para el buen funcionamiento del formulario:

Configurar formulario

En esta ventana hay tres cuadros de texto. El cuadro Acción nos va a servir para que el usuario envíe el formulario por correo electrónico a la dirección que conste ahí. Por tanto, en ese cuadro tenemos que escribir nuestra dirección de correo electrónico precedida de la expresión mailto:. El segundo cuadro ya aparece con la opción adecuada: POST, que indica que hay que enviar el formulario por correo (post) electrónico. Por último, en el cuadro Tipo de codificación vamos a indicar que el texto ha de ser enviado codificado como texto plano para leerlo en nuestro correo electrónico; para ello, escribimos la expresión "TEXT/PLAIN".

5.1.2 Cuadro de texto

Pero volvamos al primer cuadro de texto que hemos introducido en nuestro documento. Para configurarlo hacemos un doble clic encima del cuadro de texto, y aparece entonces la siguiente ventana:

Cuadro de texto

El nombre de los campos es importante porque luego encabezarán los datos que nos envía el usuario por correo. En nuestro caso, como le pedimos que escriba su nombre, hemos llamado "e;Nombre"e; a este campo. El Valor inicial hace referencia al texto que queramos que aparezca en el cuadro de texto como valor predeterminado en nuestro documento, pero en este caso no nos interesa, porque queda claro que el lector tiene que escribir su nombre. Sólo queda indicar el Ancho de caracteres, que es el número de caracteres (letras y huecos en blanco) que ocupará el cuadro de texto; es decir, que del texto que introduzca el usuario se verá en el formulario ese número de caracteres, pero será enviado el texto completo. El Campo de contraseña se utiliza si queremos que los datos que introduzca el usuario se vean sólo en forma de asteriscos, como ocurre con la introducción habitual de contraseñas en todo tipo de formularios electrónicos.

También hemos incluido en nuestro formulario un segundo cuadro de texto, que hemos llamado "E-mail", para pedir la dirección de correo electrónico del visitante.

5.1.3 Menú desplegable

El segundo tipo de campo que hay en el formulario de nuestra página es un menú desplegable, que hemos introducido pulsando el quinto botón del grupo de botones de formulario. En la ventana que aparece hay que escribir el nombre del menú y después pulsar el botón Agregar para incluir la primera elección. En la ventana que aparece a continuación sólo es necesario rellenar el cuadro de texto Elección e indicar si queremos que sea la seleccionada en primer lugar dentro del menú desplegable. En la primera ventana, los demás botones sirven para modificar una elección ya indicada, para quitarla, o para subirla o bajarla si queremos cambiar su orden de aparición en el menú desplegable. Sólo queda indicar la Altura del menú, es decir, el número de elecciones que se verán en el menú desplegable del documento, que suele ser una. Si la altura fuera mayor de una, entonces el menú cambiaría de forma y aparecería una barra de desplazamiento horizontal para ver las opciones. En el menú desplegable suele ser habitual no permitir selecciones múltiples; generalmente es sólo una la que se elige, que es la que se verá finalmente en el cuadro de texto del menú.

Menú desplegable

5.1.4 Botón de opción

El siguiente campo de formulario es el de los botones de opciones. Estos botones funcionan agrupados, de forma que sólo se puede seleccionar uno de ellos. Se aplican al documento pulsando el cuarto botón del grupo de botones de formulario. Surge entonces una ventana, en la que escribimos el nombre del grupo, que a partir de ahora será el nombre de los cuatro botones que vamos a incluir en nuestro formulario, y por tanto será el nombre que escribamos cada vez que creemos uno de los botones. El cuadro Valor se refiere al texto que será remitido por correo junto al nombre de grupo si el usuario lo selecciona, lo que no hay que confundir con el texto que escribamos a la derecha del botón, que no tiene por qué ser el mismo. El Estado inicial indica si queremos que el botón esté seleccionado de forma predeterminada; en este caso, como es el primero, hemos decidido que esté seleccionado, y ya no podemos seleccionar ninguno más.

Botón de opción

5.1.5 Casilla de verificación

El cuarto campo que vamos a incluir es el de casilla de verificación, que se aplica pulsando el tercer botón del grupo de botones de formulario. Se configura igual que los botones de opción, pero la diferencia con éstos es que las casillas no se agrupan, es decir, el usuario puede seleccionar las que desee, más de una. En nuestro caso, hemos dado el mismo nombre a todas las casillas porque el asunto es el mismo, y así podremos recibir por correo varias de ellas con el mismo nombre.

5.1.6 Cuadro de texto con desplazamiento

El siguiente campo es el de cuadro de texto con desplazamiento, que se aplica pulsando el segundo botón del grupo de botones de formulario. Es el típico cuadro de texto de más de una línea que se utiliza para que el usuario envíe un comentario o una opinión. Se diferencia principalmente del cuadro de texto anterior, de sólo una línea, en que en el texto con desplazamiento podemos indicar el número de filas (líneas) que queremos que ocupe este campo. Además, lleva una barra de desplazamiento vertical, que se hace operativa cuando el usuario escribe más líneas de las establecidas para ese campo.

5.1.7 Botón de comando

El último campo visible que incluimos en nuestro formulario es el de botón de comando, que se aplica pulsando el último botón del grupo de botones de formulario. En la ventana que aparece al hacer doble clic sobre un botón no hemos rellenado el cuadro de nombre porque este campo no nos va a enviar información, así que no hace falta nombrarlo. En el cuadro Valor/Etiqueta escribiremos el texto que queremos que aparezca en el botón ("Enviar", en nuestro caso), y en las opciones de Tipo de botón elegiremos la de Enviar para este primer botón, pues al pulsarlo el usuario nos va a enviar sus datos por correo electrónico.

El segundo botón lo hemos configurado con la etiqueta "Borrar" y el tipo Restablecer, para que el usuario pueda borrar, si lo desea, en un momento dado todo lo introducido en el formulario.

5.1.8 Campo oculto

Por último, hemos incluido también un campo oculto o invisible. Este tipo de campo obviamente no lo puede modificar el usuario, porque no aparece en el formulario, pero resulta útil para el receptor del mensaje porque le ofrece información adicional. En nuestro caso, el receptor sabe que el formulario recibido es el que ha colocado en su página personal, pues le ha atribuido el valor de "Formulario de página personal", y no otro que pudiera tener ubicado en otra página y con otro valor. Para configurar este tipo de campo hay que abrir la ventana de Propiedades de formulario y pulsar el botón Agregar de la sección Campos ocultos.

Campos ocultos

Cuando el usuario rellene el formulario y pulse el botón de envío de nuestro formulario, el texto que recibiremos en nuestro programa de correo electrónico podría ser como sigue:

Form=Formulario de página personal
Nombre=Juan Vampiro
E-mail=juanvamp@batmania.com
Vive=En una buhardilla
Tipo=Extraño
Gusta=Diseño
Gusta=Contenido
Gusta=Imágenes
Comenta=Tu página me ha animado a crear una página web

Si incluimos este formulario en la página del Monstruo, el resultado puede ser parecido al que se ve si se pulsa el siguiente botón:

Página del Monstruo

Actividad5.2 Actividad nº 5: Crear una encuesta con formulario

Como actividad, vamos a crear un formulario parecido a éste para incluirlo en la página web del Monstruo. Su inclusión va a ser provisional, pues en el siguiente capítulo lo introduciremos en otra versión de dicha página que vamos a elaborar con marcos. Éste va a ser el aspecto del nuevo formulario, que esta vez es una encuesta:

Tu nombre
Tu e-mail
¿Qué personajes de miedo te gustan? Vampiros
Hombres lobo
Chalados con motosierra
Fantasmas
Demonios
Escribe el título de las películas de miedo que te han gustado más

5.3 Enviar un mensaje con código PHP

Hay que decir que con HTML los mensajes de un formulario sólo pueden enviarse por correo electrónico si el ordenador del usuario tiene instalado un programa de correo. Para que el mensaje de correo pueda enviarse en los demás casos, hay que introducir un archivo creado con los lenguajes PERL o PHP. En Internet circulan muchos scripts escritos en estos lenguajes que se pueden utilizar con formularios. Aquí presentamos uno muy sencillo escrito en PHP y que se puede utilizar para que el usuario nos envíe un mensaje. Naturalmente, para que este script funcione, el servidor donde se alojen los archivos debe tener PHP como lenguaje de servidor; si no, será necesario un script CGI escrito en PERL.

El formulario que vamos a utilizar es muy sencillo:

Tu nombre
Tu e-mail
Tu Mensaje
 

El código fuente de este formulario aparece en el siguiente cuadro. Para que el formulario sea enviado, hay que incluir el nombre del archivo PHP en el atributo action del formulario, que hemos puesto en negrita así como los nombres de los campos que vamos a utilizar en el script.

<form action="correo.php" method="post" enctype="TEXT/PLAIN" name="Correo">
<table width="90%" border="0" align="center" cellpadding="5" cellspacing="2" bgcolor="#E9C49E">
<tr>
<td width="30%" valign="top"><strong>Tu nombre</strong></td>
<td><input name="nombre" type="text" value="" size="40"></td>
</tr>
<tr>
<td width="30%" valign="top"><strong>Tu e-mail</strong></td>
<td><input name="email" type="text" value="" size="40"></td>
</tr>
<tr>
<td width="30%" valign="top"><strong>Tu Mensaje</strong></td>
<td> <textarea name="mensaje" cols="30" rows="5" id="mensaje"></textarea>
</td>
</tr>
<tr>
<td valign="top"><input type="submit" name="Submit" value="Enviar"></td>
<td>&nbsp;</td>
</tr>
</table>
</form>

Si no lo hacemos en el código fuente, abrimos la ventana de Propiedades del formulario y después apretamos el botón de Configuración. Esta última ventana tendría que quedar así:

Configuración del formulario

Para finalizar, escribimos los nombres de los campos de texto, que son: nombre, email y mensaje. Por ejemplo, en el primer caso sería así:

Propiedades de cuadro de texto

Y sólo queda escribir el archivo correo.php, que es el que se muestra en el siguiente cuadro. Este archivo hay que guardarlo en la misma carpeta en la que se encuentra el archivo HTML donde está el formulario. Cuando el usuario aprieta el botón de envío del mensaje, el script PHP entra en funcionamiento y envía el mensaje.

<?php
if (empty($nombre) || empty($email) || empty($mensaje)) {
echo "<h2 align=\"center\">El formulario no está completo</h2>";
}
else {
mail ("avaler3@fresno.pntic.mec.es", "Página del Monstruo",
"$mensaje", "From: $nombre <$email>" );
echo "<h2 align=\"center\">El mensaje ha sido enviado. Gracias.</h2>";
}
?>

Como se ve en el script, aparecen en negrita los nombres que hemos dado a los campos del formulario (en el código HTML) precedidos del signo $, que los ha convertido en variables. También están en negrita nuestra dirección de correo electrónico (a la que el usuario envía el mensaje) y el asunto (o subject) del mensaje, que también hemos añadido nosotros en el script. Para utilizar este script, lo más sencillo es copiarlo en un editor de textos y guardarlo con el nombre correo.php. Después se hace un formulario como el anterior nombrando los campos con los mismos nombres, de forma que sólo haya que cambiar la dirección de e-mail y el asunto del mensaje para adaptarlos a los del autor de la página.

El funcionamiento del script es sencillo. En las dos primeras líneas se asegura de que el usuario haya rellenado los tres campos de texto; en caso contrario, aparecerá una página que le indicará: "El formulario no está completo", y el usuario tendrá que volver para completar el formulario. El resto del código se encarga de enviar el mensaje a la dirección indicada, ofreciendo al final el siguiente texto: "El mensaje ha sido enviado. Gracias".

5.4 Los campos de formulario en HTML

Los formularios tienen que ir delimitados por las etiquetas <form> de apertura y de cierre. En nuestra página hemos incluido dentro de esta etiqueta los atributos mailto: (enviar por correo electrónico), method (en este caso, enviar por correo) y enctype (el tipo de codificación).

<form action="mailto:monstruo@infierno.com" method="POST" enctype="TEXT/PLAIN" name="Formulario">

Algunos campos utilizan la etiqueta <input>, que no tiene cierre. El campo oculto de nuestra página tiene como atributos los siguientes: type (el tipo de campo: hidden), name (nombre) y value (valor)

<input type="hidden" name="Form" value="Formulario de página personal">

Los dos cuadros de texto con que comienza el formulario también utilizan la etiqueta <INPUT>; son del tipo text (texto) y tienen 32 caracteres (size).

<input type="text" size="32" name="Nombre">
<input type="text" size="32" name="Email">

El menú desplegable emplea las etiquetas <select> y <option>, en los dos casos con las de apertura y cierre. La primera limita a todas las opciones y, aparte del nombre, tiene el atributo size, que aquí se refiere al número de opciones visibles en la página cuando el campo está sin desplegar: una en nuestro documento. Hay que señalar que la primera opción está seleccionada (selected).

<select name="Vive" size="1">
<option selected>Bajo un puente</option>
<option>En las tinieblas</option>
<option>En un armario</option>
<option>En un sótano</option>
<option>En una buhardilla</option>
<option>En mi casa</option>
</select>

Los botones de opción también utilizan la etiqueta <input>. Los atributos aquí son el tipo de campo (radio), el nombre y los valores. Obsérvese que la primera opción está seleccionada (ckecked) y que todos deben tener el mismo nombre.

<input type="e;radio"e; checked name="Tipo" value="Monstruo">
<input type="radio" name="Tipo" value="Víctima">
<input type="radio" name="Tipo" value="Extraño">
<input type="radio" name="Tipo" value="Normal"
>

Ya hemos hablado de las diferencias que existen entre las casillas de verificación y los botones de opción. En las casillas el tipo es checkbox.

<input type="checkbox" name="Gusta" value="Diseño">
<input type="checkbox" name="Gusta" value="Contenido">
<input type="checkbox" name="Gusta" value="Imágenes">
<input type="checkbox" name="Gusta" value="Nada">

El cuadro de texto con desplazamiento utiliza la etiqueta <textarea> de apertura y de cierre, y debe incluir el número de filas (rows) y de columnas (cols).

<textarea name="Comenta" rows="7" cols="30"></textarea>

Por último, los dos botones son del tipo enviar (submit) y restablecer (reset).

<input type="submit" value="Enviar">
<input type="reset" value="Borrar">


Anterior Arriba Siguiente


Páginas dispersas de Alejandro Valero - http://fresno.pntic.mec.es/avaler3