Manual de lenguaje html. Página 16

2002 a 2006

Ángel R. Puente Pérez

17.- Formularios.

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.

17.1.- Campo de texto de una línea.

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

resultado

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>

resultado

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:

Mensaje alerta seguridad

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:

Formulario recibido

Observa como coincide el Nombre con lo que diseñamos en el formulario en el campo name

17.2.- Campo de texto de varias líneas.

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>

resultado

Guardamos el formulario con el nombre de form3.html

Observa las diferencias entre la etiqueta de introducción de texto en una línea y la que acabamos de colocar:

En este caso, la etiqueta tiene apertura y cierre.
El atributo cols indica el ancho del cuadro de texto en número de caracteres.
El atributo rows indica el número de filas del cuadro de texto. Si el ususario quiere escribir más de 5 líneas, el formulario se lo permite.

He hecho una prueba con mi correo. Éste es el mensaje recibido:

Formulario recibido

2002 a 2006

manual de lenguaje html

Ángel R. Puente Pérez