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
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:
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:
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:
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".
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:
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.
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ú.
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.
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.
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.
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.
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.
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:
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:
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:
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> </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í:
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í:
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.cnice.mecd.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".
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">