CREACIÓN DE PÁGINAS WEB CON KOMPOzER

5. Formularios

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.1.9. El e-mail recibido

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, 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:

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 -> 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:

Campos de formulario

5.1.1. Propiedades del formulario

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:

Propiedades del formulario

En esta ventana hay varios campos que cumplimentar:

  1. Nombre del formulario: es un nombre cualquiera que identifique a nuestro formulario.
  2. URL de la acción: es un campo que define la acción final cuando se envíe el formulario. En nuestro caso 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:
  3. Método: es el método de envío del formulario. Elegiremos POST en el menú desplegable, que indica que hay que enviar el formulario por correo (post) electrónico. 
  4. Para ver los siguientes campos, hay que pulsar el botón Más propiedades. En la opción Codificación vamos a indicar que el texto ha de ser enviado codificado como texto plano, es decir, sin marcas de formato, y para ello elegiremos la opción text/plain en el menú desplegable. Las demás opciones son avanzadas.

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.

5.1.2. Campo de texto

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:

Propiedades del campo de texto

  1. Nombre del campo: los nombres de los campos son 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 Nombre a este campo. 
  2. Tamaño del campo: 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.

Otras opciones útiles son:

  1. 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.
  2. Sólo lectura: lo activamos si utilizamos el campo sólo para mostrar información y no queremos que el usuario lo modifique.
  3. Longitud máxima: podemos indicar aquí el número máximo de caracteres que se pueden introducir, sobre todo para evitar que sea muy grande.

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.

5.1.3. Lista de opciones

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:

  1. Nombre de la lista para identificarla como campo. En nuestro caso, el nombre es Dónde vives, que no hay que confundir con el texto que antecede al campo en la columna anterior.
  2. Altura: el número de opciones que se verán. Aquí, sólo la primera opción, pero podríamos establecer más, y entonces ya no sería un menú desplegable, sino una lista con barra de desplazamiento.
  3. Selección múltiple: la seleccionaríamos si quisiéramos que se pudiera elegir más de una opción válidas.

Nombre de la lista

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.

Lista de opciones

5.1.4. Botón radial

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.

Botón radial

Surge entonces la ventana de la imagen anterior, en la que escribimos:

  1. Nombre del grupo, que a partir de ahora será el mismo 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. 
  2. Valor se refiere al texto que será remitido por correo junto al nombre de grupo si el usuario lo selecciona. En este caso no ocurre como en la lista de opciones, que el valor se escribe en la ventana de configuración. Aquí hay que escribir el texto que aparecerá a la derecha del botón una vez que esté incrustado en el documento, y tendrá como valor el que hayamos escrito en la configuración.
  3. Seleccionado inicialmente será 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.

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

Casilla de verificación

5.1.6. Area de texto

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.

Área de texto

5.1.7. Botones de envío y de restablecimiento

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).

Botones de envío y de restablecimiento

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

Campo oculto

5.1.9. El e-mail recibido

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:

Página del Monstruo

Actividad 5.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. É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>

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".

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=&quote;radio&quote; 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