Tema 10: Formularios (I)

INTRODUCCIÓN

La forma más sencilla de lograr que nuestros usuarios se pongan en contacto con nosotros es utilizando el correo electrónico, con el enlace que vimos en el tema de enlaces. Pero a veces, necesitamos ir más allá, queremos una respuesta, o que el usuarios pueda elegir un entre una serie de opciones etc. Para este tipo de casos utilizamos formularios.

A través de los formularios se puede:

    a) Permitir que nuestros usuarios nos envíen información, directamente a nosotros, en cuyo caso la información viaja a través del correo.
    b) Si disponemos de un lenguaje del lado del servidor, podemos procesar los datos introducidos por el usuario y construir páginas específicas en función de los datos introducidos.

En este manual sólo vamos a tratar el envío de datos de los formularios a través de correo electrónico sin entrar en cgis o lenguajes del servidor puesto que nos saldríamos completamente del HTML. Si queréis saber más sobre programación del lado del servidor, podéis consultar el foro de páginas dinámicas o el manual de php.

ETIQUETAS BÁSICAS

<form> Abre un formulario
</form> Cierra un formulario

Nos quedaría así

<form>
[Cuerpo del formulario con los distintos elementos y cajas del formulario
[boton de envío y borrado]
</form>

LA ETIQUETA DE INICIO:

La etiqueta de inicio de un formulario es muy importante puesto que en ella definimos muchas cosas como el método por el que vamos a enviar el formulario, de que tipo de datos se trata, y el nombre del formulario.

NOTA: Acostumbraos a ponerle nombre a los formularios desde el principio puesto que es el nombre el que identifica el elemento tanto en los correos que recibamos como si más adelante queremos hacer algo de programación necesitaremos esos nombres para referirnos a los distintos elementos del formulario.

En nuestro caso, que vamos a mandar nuestro formulario por correo electrónico nuestra etiqueta de inicio quedará así:

<form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">

NOTA: En el caso de los formularios enviados por correo electrónico es necesario que el usuario tenga bien configurado el correo, de no ser así el formulario no funcionará.

El atributo ACTION le dice al navegador que acción debe emprender cuando se pulse el botón enviar del formulario, en este caso como lo vamos a enviar por email, lo indicamos así, tal y cómo lo haríamos en un enlace “mailto:correo@electronico.com” Si fuesemos a utilizar por ejemplo un script de php para que procesara el formulario, pondríamos aquí la dirección de ese script action=”procesa_formulario.php”.

El atributo METHOD=POST hace que los datos sean enviados directamente sin ningún tipo de proceso intermedio.

Con ENCTYPE=”TEXT/PLAIN” conseguimos que los datos se envíen como un fichero de texto, sin codificar, si no añadiéramos esto, recibiríamos los datos codificados y no entenderíamos nada al recibir el correo. Si fuéramos a procesarlo, en vez de a enviarlo por correo, no podríamos este campo, así los datos cogerían su valor por defecto.

Con NAME=”APRENDIENDO” le damos un nombre único a nuestro formulario, de momento para el HTML puro no nos va a servir de mucho, pero si después queremos procesar scripts va a ser fundamental. Otras veces os vais a encontrar con qué tenéis que maquetar un formulario para el cual ya existe un script en cuyo caso el “name” os lo dará un programador.

Antes de explicar los distintos campos de los formularios, vamos a explicar antes que nada el botón de envío y el botón de borrado. He decidido hacerlo así porque una de las cosas que más me desconcertó cuando aprendía los formularios es dónde se colocaba el elemento <form> respecto a las demás etiquetas; y cómo solían explicar cada campo por separado, no se veían ejemplos de cómo funcionaba un formulario completo. Así que vamos a ver lo en este orden: El botón de envío, el botón de borrado, y luego nos meteremos con los campos del formulario propiamente dichos.

EL BOTÓN DE ENVIO

Todos los formularios que queramos que sirvan para algo tienen que llevar un botón de envío, puesto que si el usuario no nos puede enviar los datos ¿para que sirve el formulario? Para adornar Smile

<input type="submit" value="Enviar" />

NOTA: imput no tiene etiqueta de cierre por lo que utilizamos />

Con type definimos que se trata de un botón de envío, y mediante value definimos el texto que aparece en el botón. En vez de “enviar” podríamos haber puesto “pulsame ya”.

Ahora con un elemento más nuestro formulario nos quedaría así:

<form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">
[Cuerpo del formulario con los distintos elementos y cajas del formulario]<br />
<input type="submit" value="Pulsame ya" />
</form>

Resultado

Ya con esto hasta podemos ver cómo quedaría nuestro formulario en pantalla.

EL BOTÓN DE BORRADO

Los formularios suelen incorporar también un botón de borrado de datos, pulsando sobre este botón, se borran todos los datos que haya escritos en el formulario:

<input type="reset" value="Borrar">

Con type definimos que se trata de un botón de borrado (“reset”, y mediante value definimos el texto que aparece en el botón. En vez de “Borrar” podemos poner: “A la porra los datos”. Y nuestro formulario quedaría ahora así:

<form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">

[Cuerpo del formulario con los distintos elementos y cajas del formulario]<br />

<input type=”submit” value=”Pulsame ya” />
<input type=”reset” value=” A la porra los datos ” />
</form>
Resultado

DANDO FORMA AL FORMULARIO CON UNA TABLA

Normalmente habréis visto formularios que aparecen muy ordenaditos, con todos los elementos alineados ¿Cóm lo hacen? Con una tabla, veamos:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang=”es”>
<head>
<title>Formulario en una tabla </title>
</head>
<body>
<h1>Nuestro formulario</h1>

<form action=”mailto:correo@electronico.com” method=”post” enctype=”text/plain” name=”aprendiendo”>
<table width=”60%” align=”center”>
<tr>
<th width=”60%”>Nombre: </th>
<td width=”40%”>Fila 1, 2ª Celda</td>
</tr>
<tr>
<th width=”60%”>Apellidos: </th>
<td> Fila 2, 2ª Celda</td>
</tr>

<tr>

<td colspan=”2″ align=”center”>

<input type=”reset” value=”Borrar” />
<input type=”submit” value=”Enviar” />

</td>
</tr>

</table>
</form>
</body> </html>

Resultado

CAMPOS DE TEXTO

1.- Cajas de texto corto

<input type="text" name="nombre" />

Este tipo de cajas se suelen utilizar para datos cortos: Nombre, Apellidos, teléfono…. Utilizarlos para datos más largos, aunque a veces lo he visto, sólo lleva a confundir al pobre usuario que no puede ver lo que está escribiendo.

Otros atributos de las cajas de texto son:

Size: Define el tamaño de la caja, aunque lo definimos en número de caracteres, nos estamos refiriendo sólo al aspecto visual, no al número de caracteres que se pueden meter en la caja de texto. Es decir, si a una caja de texto le definimos de “size” 15, la caja ocupara lo que ocuparían 15 caracteres, y pero podemos escribir más de 15 caracteres.

Maxlength: Este sí indica el número máximo de caracteres que podemos escribir en un formulario

Value: Se trata de un valor predefinido. Si definimos el atributo value, lo que pongamos se verá dentro de la caja de texto. Se puede utilizar para dar pistas al usuario sobre lo que debe escribir dentro del campo de texto.

Vamos a ver un ejemplo completo, en el que hemos definido diferente “size” y “maxlength” jugad con estos atributos para tener clara la diferencia. Veréis que en el campo teléfono solo podéis escribir 9 números a pesar de que el “size” es de 15.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang=”es”>
<head>
<title>Formulario completo</title>
</head>
<body>
<h1>Nuestro formulario</h1>

<form action=”mailto:correo@electronico.com” method=”post” enctype=”text/plain” name=”aprendiendo”>
<table width=”60%” align=”center”>
<tr>
<th width=”60%”>Nombre: </th>
<td width=”40%”><input type=”text” name=”nombre” size=”15″ maxlength=”30″ /></td>
</tr>
<tr>
<th width=”60%”>Apellidos: </th>
<td> <input type=”text” name=”apellidos”  size=”15″ maxlength=”30″ /></td>
</tr>

<tr>
<th width=”60%”>Telefono: </th>
<td> <input type=”text” name=”telefono”  size=”15″ maxlength=”9″ value=”999999999″ /></td>
</tr>

<tr>
<th width=”60%”>Código postal: </th>
<td> <input type=”text” name=”codigo_postal”  size=”7″ maxlength=”5″ value=”12345″ /></td>
</tr>

<tr>

<td colspan=”2″ align=”center”>

<input type=”reset” value=”  Borrar  ” />
<input type=”submit” value=”  Enviar  ” />

</td>
</tr>

</table>
</form>
</body></html>

Resultado

2.- Contraseñas

A veces, queremos que el usuario introduzca una contraseña en nuestro formulario. Para que no la vea todo el mundo, se sustituyen los caracteres que introduce por *, lo habréis visto miles de veces. Se hace así:

<input type="password" name="pass">

Resultado

3.- Campos ocultos

Los campos ocultos no aparecen el en formulario, el usuario no los ve. Pueden parecer inútiles pero, al contrario son muy utilizados cuando se usa programación. o simplemente para mandarnos a nosotros mismos información complementaria.

<input type="hidden" name="Donde" value="Formulario de quejas">

Si incluyéramos este código, en nuestro email nos llegaría:

Donde: Formulario de quejas

Y sabríamos inmediatamente que el mail llega desde el formulario de quejas y no, pongamos por ejemplo del formulario de contacto.

Resultado (nota para ver el campo hay que mirar el código fuente, puesto que está oculto)

4.- Areas de texto

Es posible que necesitemos que nuestro usuario introduzca un texto más largo, quizá un comentario, una noticia, etc., para ello le proporcionaremos una caja de texto más amplia, de forma que pueda escribir con más comodidad.

Para definir las dimensiones de nuestra área de texto utilizamos:

rows : Número de líneas que va a ocupar el campo de texto. Se pueden escribir más líneas, esto define el tamaño de la caja no del texto.
Define el número de líneas del campo de texto.

cols ; Número de columnas que va a ocupar el campo de texto.

<textarea name="comentario" rows="10" cols="35"></textarea>

Para tener un texto predefinido dentro del campo, lo escribimos entre las etiquetas:

<textarea name="comentario" rows="10" cols="35">Por favor díganos que opina de nuestra página</textarea>

Resultado

9 tablas –  Indice 11 formularios I

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s