Los objetivos de la quinta lección son:
5.1. Crear formularios con todos los tipos de campos:
5.1.1.
Propiedades del formulario
5.1.2. Campo de texto
5.1.3. Lista de opciones
5.1.4. Botón radial
5.1.5. Casilla de verificación
5.1.6. Área de texto
5.1.7. Botones de envío y de
restablecimiento
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, campos de texto de una o de
más líneas, menú desplegable, botones de enviar y restablecer, casillas
de verificación, 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 -> Formulario; se abre entonces otro menú a la derecha donde aparecen los campos. Pero más cómodo resulta acudir al botón Formulario de la barra de herramientas, donde aparecen todos los elementos si pulsamos la fechita que hay a la derecha del botón:
Para introducir un formulario en nuestro
documento primero hay que configurarlo o definirlo con la opción Definir
formulario. En nuestro caso es como muestra la imagen de
las Propiedades del formulario:
En esta ventana hay varios campos que cumplimentar:
Cuando pulsamos el botón Aceptar, aparece en el documento un rectángulo con líneas intermitentes que indica la posición del formulario. Dentro de ese recuadro es donde hemos incluido los campos en una tabla. Ahora veamos cómo se crean y se configuran esos campos.
Vamos a incluir el primer y el
segundo campo de texto, que corresponden al nombre y al email. Ponemos
el cursor del ratón en la primera celda de la segunda columna y después
abrimos el menú Insertar -> Formulario ->
Campo de formulario -> Texto o lo buscamos
abriendo el menú desplegable del botón Formulario.
En la siguiente imagen vemos el campo de texto configurado, del que
hemos utilizado dos opciones:
Otras opciones útiles son:
También hemos incluido en nuestro formulario un segundo campo 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 forma
parte de la lista de opciones, porque es
una lista de la que sólo se ve la opción seleccionada de forma
predeterminada, y las demás se muestran al abrir el menú
desplegable.
En la ventana que aparece hay que escribir lo siguiente:
La lista de opciones la cumplimentamos añadiéndolas una a una con el botón Añadir opción. Como se ve en la imagen de abajo, en cada una de ellas tenemos que escribir el Texto, que será el texto que aparezca en la lista. Si no activamos la casilla Valor, el texto de esta opción será el mismo que el de Texto. Si activamos la casilla, podremos escribir otras palabras; esto tiene sentido si el texto es largo, y queremos poner un valor abreviado, porque este valor será lo que recibiremos en el email que nos envíen los visitantes. Y activaremos la casilla Seleccionada inicalmente en la opción que queramos que se vea en el menú desplegable antes de desplegarlo; si no lo seleccionamos, aparecerá la primera opción.
El siguiente campo de formulario es el de los botones
radiales. Estos botones funcionan agrupados,
de forma
que sólo se puede seleccionar uno de
ellos. Se
aplican al documento abriendo la opción Campo de
formulario -> Botón radial.
Surge entonces la ventana de la imagen anterior, en la que escribimos:
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, Gusta,
a todas las casillas
porque el asunto es el mismo, y así podremos recibir por
correo varias de ellas con el mismo nombre, pero cada una podría tener
el nombre distinto.
El siguiente campo es el de área de texto,
que se aplica pulsando Formulario -> Área de texto.
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 del campo de
texto en que éste sólo dispone de una línea.
Para este campo podemos indicar el número de
filas (líneas) y de columnas
(caracteres que ocupa cada línea).
Además, incluye una barra de desplazamiento
vertical,
que se hace operativa cuando el usuario escribe más
líneas de las establecidas para ese campo.
Los últimos campos visibles que
incluimos en nuestro
formulario son el botón de envío, que
sirve para enviar los datos por e-mail, y el
botón de restablecimiento,
que se usa para borrar los datos del formulario en caso de que el
usuario quiera comenzar de nuevo con el formulario
limpio. Estos botones se aplican
pulsando Formulario -> Campo de formulario
-> Botón de envío, y lo mismo para el botón
de restablecimiento.
En las ventana de las propiedades de estos botones no hemos rellenado el nombre del campo porque este campo no nos va a enviar información en el e-mail, así que no hace falta nombrarlo. En el Valor del campo escribiremos el texto que queremos que aparezca en el botón ("Enviar e-mail" en nuestro caso).
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 el menú Formulario
-> Campo de formulario -> Oculto. Una vez
configurado, el campo aparecerá en el documento del editor en forma de
una etiqueta amarilla con el nombre INPUT,
pero no se verá en el documento publicado.
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:
Formulario=Formulario de página
personal
Nombre=Juan Vampiro
E-mail=juanvamp@batmania.com
Vive=En las tinieblas
Eres=Extraño
Gusta=Diseño
Gusta=Contenido
Gusta=Imágenes
Comentario=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. É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>
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 ("monstruo@monstruo.com", "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">