Formularios

Lo más común para que un lector se pueda comunicar con el autor de un documento HTML es a través de un enlace a su dirección electrónica, con lo que recibiría un mensaje electrónico.

Es posible que lo que el autor necesite sea sólo una respuesta a unas opciones concretas, o un comentario del lector, por tanto, tendrá que proporcionarle un lugar donde introducirlo.

Se puede hacer todo esto, además de otras cosas, utilizando los formularios, con los que se pueden confeccionar páginas que contengan los elementos necesarios para ello: botones de radio, listas de selección, cajetines de introducción de texto y de control, etc.

Estructura

La estructura habitual de un formulario es la siguiente:

  1. Etiqueta de inicio:
    <FORM ACTION="mailto:dirección_electrónica" METHOD="POST" ENCTYPE="TEXT/PLAIN">
  2. Cuerpo del formulario, con diversos elementos para introducir información.
  3. Botones de envío y de borrado.
  4. Etiqueta final (</FORM>).
Este tipo de formulario no funciona en la versión 3.0 de Internet Explorer, razón por la cual, conviene proporcionar un enlace de correo electrónico al final del formulario, como alternativa para estos casos.

Elementos

Hay tres clases de elementos: La introducción de información se consigue mediante la etiqueta:

<INPUT TYPE="tipo" NAME="nombre" VALUE="valor">

TYPE contiene una palabra que indica el tipo de introducción. NAME es el nombre de la variable de introducción de datos. VALUE es una palabra asociada a un elemento.

Atributos

El atributo ACTION indica la acción que se debe efectuar, en este caso, que los datos sean enviados por correo electrónico a la dirección especificada.

El atributo METHOD con el argumento POST indica que los datos han de ser enviados inmediatamente después de que el usuario pulse el botón de envío.

El atributo ENCTYPE con el argumento "TEXT/PLAIN" permite enviar la información como texto, con lo que se consigue recibirla perfecamente legible y sin codificar.

Introducción de una línea de texto

El atributo TYPE debe contener TEXT como argumento. El siguiente ejemplo solicita el nombre del usuario:

<FORM ACTION="mailto:dirección_electrónica" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Nombre:
<INPUT TYPE="TEXT" NAME="Nombre">
</FORM>

y tendría el siguiente aspecto:


Nombre:

Para que el formulario haga su función es necesario incluir el botón de envío, que se consigue con la siguiente etiqueta:

<INPUT TYPE="SUBMIT" VALUE="valor">

El atributo VALUE contiene el texto que se desea que aparezca en el botón.

Incorporando este elemento al ejemplo anterior del siguiente modo:

<FORM ACTION="mailto:dirección_electrónica" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Nombre:
<INPUT TYPE="TEXT" NAME="Nombre">
<INPUT TYPE="SUBMIT" VALUE="Enviar">
</FORM>

el formulario quedaría así:


Nombre:

También resulta interesante incluir el botón de borrado de los datos, sobre todo en formularios con muchos elementos. Se consigue con la siguiente etiqueta:

<INPUT TYPE="RESET" VALUE="valor">

Si la añadimos al ejemplo anterior:

<FORM ACTION="mailto:dirección_electrónica" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Nombre:<BR>
<INPUT TYPE="TEXT" NAME="Nombre">
<INPUT TYPE="SUBMIT" VALUE="Enviar">
<INPUT TYPE="RESET" VALUE="Borrar">
</FORM>

el resultado sería el siguiente:


Nombre:

Si el usuario introduce su nombre (por ejemplo, Agapito), y pulsa el botón de envío, el autor recibirá un mensaje electrónico con el siguiente texto:

Nombre=Agapito

Por defecto, la longitud de este tipo de formulario es de 20 caracteres. Se puede modificar incluyendo en la etiqueta INPUT el atributo SIZE="longitud".

Sea cual sea la longitud del formulario, el usuario puede introducir el número de caracteres que quiera. La longitud del contenido del formulario se puede limitar incluyendo el atributo MAXLENGTH="longitud_máxima" en la etiqueta INPUT.

Si en el ejemplo anterior se sustituyese la etiqueta correspondiente por la siguiente:

<INPUT TYPE="TEXT" NAME="Nombre" SIZE="10" MAXLENGTH="12">

se conseguiría lo siguiente:


Nombre:

Se puede observar cómo no es posible escribir más de 12 caracteres.

Si se quiere conseguir que el texto introducido no sea reconocible, es decir, que los caracteres se representen por asteriscos, basta con cambiar en la etiqueta INPUT TYPE="TEXT" por INPUT TYPE="PASSWORD".

En el anterior ejemplo, si cambiamos la etiqueta correspondiente por:

<INPUT TYPE="PASSWORD" NAME="Nombre" SIZE="10" MAXLENGTH="12">

se obtendría el siguiente resultado:


Nombre:

Se puede comprobar cómo los caracteres introducidos son representados por asteriscos.

Introducción de varias líneas de texto

Si el texto que se solicita puede alcanzar una longitud considerable (por ejemplo, un comentario), conviene utilizar un formulario de texto de varias líneas. Para ello se necesita la siguiente etiqueta:

<TEXTAREA NAME="nombre" ROWS="número_de_filas" COLS="número_de_columnas">
</TEXTAREA>

Como se puede observar, no se utiliza INPUT TYPE. ROWS representa el número de filas de texto, y COLS, el de columnas.

El siguiente formulario solicita la opinión del usuario:

<FORM ACTION="mailto:dirección_electrónica" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Opinión:<BR>
<TEXTAREA NAME="Opinion" ROWS="4" COLS="60">
</TEXTAREA><BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
<INPUT TYPE="RESET" VALUE="Borrar">
</FORM>

y aparecería así:


Opinión:

Después de que el usuario rellenase el cuadro de texto y pulsase el botón de envío, el autor recibiría un mensaje electrónico con el siguiente texto:

Opinion=Pienso que...

Introducción de datos a través de menús

Para que un usuario pueda escoger entre diversas opciones conviene utilizar un formulario en forma de menú. Esto se consigue con las etiquetas <SELECT NAME="nombre"> y </SELECT>, indicando las diferentes opciones con la etiqueta <OPTION>.

Por ejemplo, para que el lector indique su nivel de estudios se puede elaborar el siguiente menú:

<FORM ACTION="mailto:dirección_electrónica" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Nivel de estudios:
<SELECT NAME="Estudios">
<OPTION>Educación básica
<OPTION>Bachillerato
<OPTION>C.O.U.
<OPTION>Formación profesional
<OPTION>Estudios medios
<OPTION>Estudios superiores
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
</FORM>

que sería mostrado de esta manera:


Nivel de estudios:

Si el lector ha escogido Formación profesional y ha pulsado el botón de envío, el autor recibirá un mensaje con el siguiente texto:

Estudios=Formación profesional

Si se desea que sean visibles varias opciones a la vez sólo es necesario incluir en la etiqueta SELECT NAME="nombre" el atributo SIZE="número_de_opciones_visibles". Si se quiere ofrecer la posibilidad de seleccionar varias opciones a la vez se puede utilizar el atributo MULTIPLE.

Así, el siguiente ejemplo:
<FORM ACTION="mailto:dirección_electrónica" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Temas de interés:
<SELECT NAME="Temas de interés" SIZE="8" MULTIPLE>
<OPTION>Arte
<OPTION>Cine
<OPTION>Deporte
<OPTION>Informática
<OPTION>Literatura
<OPTION>Música
<OPTION>Naturaleza
<OPTION>Vino
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
</FORM>

quedaría así:


Temas de interés:

De este modo, el usuario puede seleccionar diversas opciones simultáneas pulsando la tecla Ctrl y pinchándolas con el puntero.

Formulario de confirmación

Para que un lector confirme una opción concreta se utilizan los formularios de confirmación, que se obtienen utilizando la etiqueta <INPUT TYPE="CHECKBOX" NAME="nombre">.

Por ejemplo, para que un lector confirme que quiere recibir noticias de nuevos productos, se puede escribir lo siguiente:

<FORM ACTION="mailto:dirección_electrónica" METHOD="POST" ENCTYPE="TEXT/PLAIN">
<INPUT TYPE="CHECKBOX" NAME="Novedades">
Deseo recibir noticias cuando aparezcan nuevos productos y ofertas.<BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
</FORM>

cuyo resultado sería:


Deseo recibir noticias cuando aparezcan nuevos productos y ofertas.

Si el lector marca este formulario y pulsa el botón de envío, el autor recibirá un mensaje con el texto:

Novedades=On

Si se desea que el formulario aparezca marcado por defecto sólo es necesario incluir el atributo CHECKED en la etiqueta.

Botones de radio

Cuando se necesita que el lector escoja una única opción entre varias, conviene usar los botones de radio, que se logran con la etiqueta <INPUT TYPE="RADIO" NAME="nombre" VALUE="valor">. Por ejemplo, para conocer el sexo del lector, se puede utilizar el siguiente formulario:

<FORM ACTION="mailto:dirección_electrónica" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Sexo:
<INPUT TYPE="RADIO" NAME="Sexo" VALUE="Hombre" CHECKED>Hombre
<INPUT TYPE="RADIO" NAME="Sexo" VALUE="Mujer">Mujer
</FORM>

que tendría este aspecto:


Sexo: Hombre Mujer

Si el lector ha seleccionado la opción Hombre, el autor recibirá un mensaje con el siguiente texto:

Sexo=Hombre



Anterior Siguiente
Sumario | Inicio