El formulario es una interesante herramienta de toda página web. Permite recabar información ordenada de los visitantes, y almacenar esa información de alguna manera.
Nosotros vamos a trabajar un formulario cuyos datos sean enviados a una dirección de correo electrónico normal y como datos no encriptados.
La otra forma, más compleja, es ser envíado a nuestro servidor a través de un programa determinado que deberá estar instalado en ese servidor, para almacenar la información y procesarla. Como esto no está al alcance del usuario corriente, vamos a centrarnos en el primer tipo de formularios.
Los formularios están dentro de las etiquetas <form> y </form>. Los atributos de la etiqueta de apertura del formulario indicarán la forma de enviar la información:
- action="mailto:direcciondecorreo". El formulario será enviado a la dirección de correo que pongamos.
- method="post". Los datos se enviarán inmediatamente por correo electrónico.
- enctype="text/plain". Las respuestas se enviarán sin codificación.
<html>
<head>
<title>
Formulario 1
</title>
</head>
<body>
<form action="mailto:login@servidor.es"
method="post" enctype="text/plain">
<table align="center">
<tr>
<td width="50%" align="right">
Escribe tu nombre:
</td>
<td width="50%" alignn="left">
<input type="text" name="Nombre" size="10"
maxlength="15">
</td>
</tr>
</table>
</form>
</body>
</html>
|
Guardamos el formulario con el nombre form1.html
Hemos colocado, dentro del formulario, una tabla con dos columnas para mejorar la presentación de los datos: En la columna izquierda, y alineado a la derecha, colocamos el texto de lo que se pide (en este caso el nombre) y, en la columna de la izquierda y, alineado a la derecha, el campo de texto:
- input type (entrada de tipo) texto.
- name es lo que aparecerá en el mensaje de correo delante de lo que introduzca el ususario.
- size nos indica el tamaño de la caja de texto de una línea. En este caso 10 caracteres.
- maxlenght indica la cantidad máxima de caracteres que puede introducir el usuario.
De poco sirve el formulario si no tenemos la opción de enviarlo. Así que vamos a proceder a la introducción del código necesario. Normalmente, además del botón de enviar se suele poner otro para borrar los datos introducidos.
<html>
<head>
<title>
Formulario 2
</title>
</head>
<body>
<form action="mailto:login@servidor.es"
method="post" enctype="text/plain">
<table align="center">
<tr>
<td width="50%" align="right">
Escribe tu nombre:
</td>
<td width="50%" alignn="left">
<input type="text" name="Nombre" size="10"
maxlength="15">
</td>
</tr>
<tr>
<td width="50%" align="right">
<input type="submit" value="Enviar">
</td>
<td width="50%" align="left">
<input type="reset" value="Borrar">
</td>
</tr>
</table>
</form>
</body>
</html>
|
Guardamos el archivo con el nombre form2.html
Hemos introducido otra fila en la tabla con:
- input type submit (enviar).
- value será lo que aparezca escrito en el botón.
- input type reset en inglés borrar.
- value será lo que aparezca escrito en el botón.
Cuando, una vez escrito el dato, el usuario pulse el botón de enviar, aparecerá el siguiente mensaje:
Hay que aceptar para que el formulario sea enviado.
Supongamos que un tal Federico ha rellenado el formulario. En el correo del destinatario aparecerá este mensaje:
Observa como coincide el Nombre con lo que diseñamos en el formulario en el campo name
Se consigue con la etiqueta <textarea> y su correspondiente de cierre.
Repetimos el formulario anterior eliminando la opción <text> para simplificar la lectura del código. Pero, evidentemente, se podrían juntar todas las opciones en un único formulario.
<html>
<head>
<title>
Formulario 3
</title>
</head>
<body>
<form action="mailto:login@servidor.es"
method="post" enctype="text/plain">
<table align="center">
<tr>
<td width="50%" align="right">
Escribe tus comentarios:
</td>
<td width="50%" alignn="left">
<textarea name="Comentarios" cols="30" rows="5">
</textarea>
</td>
</tr>
<tr>
<td width="50%" align="right">
<input type="submit" value="Enviar">
</td>
<td width="50%" align="left">
<input type="reset" value="Borrar">
</td>
</tr>
</table>
</form>
</body>
</html>
Observa como las opciones de cada grupo son excluyentes: Sólo podemos elegir una.
Esta es una imagen del resultado del envío de una respuesta:
Es parecido al anterior cambiando el atributo radio por checkbox. Los demás atributos son similares.
Este es el resultado de un envío:
 |
No hay comentarios:
Publicar un comentario