Formularios en html

Formularios en html

La manera general para que los lectores de nuestra página se puedan comunicar con nosotros es por medio de un enlace a nuestra dirección de e-mail, con lo que recibiríamos un e-mail convencional.

Pero puede ser que lo que necesitemos sea solamente una respuesta concreta a unas opciones que presentaremos nosotros mismos, o un comentario del usuario, para lo que le suministraremos un espacio en donde introducirlo.

Formularios en html

Formularios en html


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, tal como botones de radio, listas de selección, cajetines de introducción de texto y de control, etc., como vamos a ver.

Los formularios permiten que los demás nos envíen la información directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta información.   Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los usuarios pueden introducir sus nombres y direcciones de e-mail y pulsar un botón de envío.

 Esos datos los podemos recibir "en bruto" en nuestro correo, con los que confeccionaríamos manualmente dicha lista de correo, sin necesitar ningún programa para ello. Este proceso es el que vamos a comentar en este capítulo.

La otra posibilidad, de la que únicamente se va a hacer esta mención, es que hubiéramos instalado en nuestro servidor un programa especial para procesar esos datos y añadirlos a la lista de correo, y que incluso pudiera devolver automáticamente al usuario algún tipo de información. Para conseguir esto, los formularios necesitan ejecutar programas o scripts por medio del CGI (Common Gateway Interface). El CGI permite a los formularios ser procesados por programas escritos en cualquier lenguaje, aunque los más usados en Internet son el Perl y el C.

Estructura de un formulario

La estructura general de un formulario es:

  1.Etiqueta de inicio:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST"
ENCTYPE="TEXT/PLAIN">

  2.Cuerpo del formulario
(Elementos para  introducir los datos).

  3.Botones de envío y de borrado.

  4.Etiqueta de cierre </FORM>

 

1.Etiqueta de inicio

El atributo ACTION indica la acción que se debe efectuar y que es que los datos sean enviados por e-mail a la dirección indicada. (Si hiciéramos uso del CGI, sería precisamente aquí donde indicaríamos su localización en el servidor, que habitualmente es el directorio cgi-bin, para que procese los datos).

El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correo a la dirección de e-mail, nada más púlsar el usuario el botón de envío.

Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un archivo de texto, perfectamente legible y sin codificar.

 

2.Cuerpo del Formulario (Elementos para introducir los datos)

Los vamos a dividir en tres clases:

  1.Introducción por medio de texto

  2.Introducción por medio de menús

  3.Introducción por medio de botones

La introducción de los datos se consigue por medio de la etiqueta:

<INPUT TYPE= “XXX” NAME=“YYY” VALUE= “ZZZ”>

En donde:

XXX

Es la palabra que indica el tipo de datos a introduccir.

YYY

Es el nombre que le asignamos nosotros a la variable de introducción del dato.

ZZZ

Es la palabra asociada a un elemento.

Todo esto, que de momento parece muy confuso, se aclarará al ir viendo los distintos casos.
Introducción por medio de texto

Introducción por medio de texto (una línea)

En este caso es XXX=TEXT, es decir, INPUT TYPE=“TEXT”. El atributo VALUE no procede en este caso. Vamos a poner un ejemplo.

 solicitamos el apellido del usuario:
<FORM ACTION=mailto:direccion_de_e-mail METHOD=“POST” ENCTYPE=“TEXT/PLAIN”>

Escribe tu apellido:
<BR><INPUT TYPE=“TEXT” NAME="Apellido">

</FORM>

Si el usuario introduce su apellido, p. ej. Ruiz, y pulsa el botón de envío (que veremos más adelante), recibiremos, un e-mail suyo con el siguiente texto:
Apellido=Ruiz

La longitud de este formulario es por defecto de 20 caracteres. Se puede variar incluyendo en la etiqueta el atributo SIZE="número". Por otra parte, sea cual sea la longitud del formulario, si no se indica nada, el usuario puede introducir el número de caracteres que quiera. Se puede limitar esto, incluyendo en la etiqueta el atributo MAXLENGTH="número".

En el caso que hemos visto, si hubiéramos cambiado la etiqueta correspondiente por:

<INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12">

(Se puede comprobar cómo no se pueden introducir más de 12 caracteres).

También se puede hacer que el texto introducido no sea reconocible, es decir que todos los caracteres se representen por asteriscos. Basta con cambiar en la etiqueta INPUT TYPE=“TEXT” por INPUT TYPE=“PASSWORD”. En el último ejemplo, si cambiamos la etiqueta correspondiente por:

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

(Se puede comprobar cómo los caracteres introducidos se representan por asteriscos)

 

Introducción por medio de texto (múltiples líneas)

Cuando el texto a introducir puede alcanzar una gran longitud, por ejemplo un comentario, es conveniente utilizar un formulario de texto de múltiples líneas.

Esto se consigue con la etiqueta de inicio:

<TEXTAREA NAME=“YYY” ROWS="número" COLS="número">

(en donde no se utiliza INPUT TYPE y donde ROWS representa el número de filas, y COLS el de columnas).

y la de cierre: </TEXTAREA>

Ejemplo: un formulario solicitando los comentarios del usuario:
<FORM ACTION=“mailto:direccion_de_e-mail” METHOD="POST" ENCTYPE="TEXT/PLAIN">

Introduce tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
</FORM>

(El salto de línea del texto introducido no se efectúa automáticamente).

Una vez que el usuario haya escrito sus comentarios dentro del formulario, y haya pulsado el botón de envío, recibiremos un e-mail suyo con el siguiente texto:
Comentarios = mensaje escrito por el usuario

 

Introducción por medio de menús

Si queremos que el usuario, en vez de introducir un texto, como hemos visto en los casos anteriores, escoja entre varias opciones que le presentamos nosotros, haremos uso de un formulario en forma de menú.

Se consigue con la etiqueta de inicio <SELECT NAME= “YYY”> y la de cierre </SELECT>. 

Las distintas opciones a escoger se consiguen con la etiqueta <OPTION>.
Ejemplo: Pedimos al usuario que elija su color preferido:

<FORM ACTION=“mailto:dirección_de_e-mail” METHOD= “POST” ENCTYPE=“TEXT/PLAIN”>

<BR>¿Cuál es tu color preferido?
<BR><SELECT NAME="ColorPreferido">
<OPTION SELECTED>
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT >
</FORM>

Si el usuario ha escogido, p. ej. Azul y ha pulsado el botón de envío, recibiremos un e-mail suyo con el texto: ColorPreferido=Azul.

En el ejemplo anterior, sólo es visible en el formulario una opción. Si queremos que sean visibles múltiples opciones a la vez, añadimos en la etiqueta los atributos MULTIPLE SIZE="número", donde especificamos el número de opciones visibles.

Si cambiamos en el ejemplo anterior la etiqueta correspondiente por:

<SELECT NAME="ColorPreferido" MULTIPLE SIZE="2">

 

Introducción por medio de botones

Caja de confirmación (checkbox)

Si queremos que el usuario confirme una opción determinada, podemos hacer uso de un formulario de confirmación, o checkbox, que se consigue con la etiqueta:

<INPUT TYPE=“CHECKBOX” NAME=“YYY”>

Ejemplo: Solicitamos al usuario que confirme su inclusión en una lista de correo:

<FORM ACTION= “mailto:dirección_de_email” METHOD=“POST” ENCTYPE=“TEXT/PLAIN”>

<INPUT TYPE="checkbox" NAME="Lista">
Sí, deseo ser incluido en la lista de correo.

</FORM>

Si el usuario marca este formulario y pulsa el botón de envío, recibiremos un e-mail suyo con el texto: Lista=On.

Si queremos que el formulario aparezca inicialmente como marcado (el usuario no necesitará hacerlo), basta con añadir el atributo CHECKED dentro de la etiqueta. En el ejemplo anterior si sustituimos la etiqueta equivalente por:

<INPUT TYPE=“CHECKBOX” NAME=“Lista” CHECKED>

 

Botones de radio

Cuando queremos que el usuario elija una única opción entre varias, podemos hace uso de los botones de radio, que se consiguen con la etiqueta:

<INPUT TYPE= “RADIO” NAME= “YYY” VALUE= “ZZZ”>

Donde YYY es el nombre que le ponemos a la variable que se trata de elegir, y ZZZ es el nombre de cada una de las opciones en concreto.

Ejemplo: solicitamos al usuario que defina cuál es su sistema operativo preferido:

<FORM ACTION=“mailto:dirección_de_email” METHOD=“POST” ENCTYPE=“TEXT/PLAIN”>

¿Cuál es tu sistema operativo preferido?
<BR>
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix"> Unix
</FORM>

Obsérvese el atributo opcional CHECKED que se ha añadido en la primera etiqueta. Esa será la opción que aparece marcada por defecto.

Obsérvese también que no es posible escoger más de una opción.

Si el usuario ha escogido la opción PC y pulsa el botón de envío, recibiremos un e-mail suyo con el texto: SistemaOperativo=PC.

 

3.Botones de envío y de borrado

Hasta ahora, en todos los ejemplos que hemos visto, faltaba un elemento esencial en cualquier formulario, y es el botón de envío de los datos, que se consigue con la etiqueta:

<INPUT TYPE= “submit” VALUE= “ZZZ”>

En donde ZZZ es el texto que queremos que aparezca en el botón.

Vamos a añadirlo al primer ejemplo, en el que se solicitaba el apellido del usuario:

<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">

Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
<P><INPUT TYPE="submit" VALUE="Enviar datos">
</FORM>

Otro botón interesante es el de borrado de los datos introducidos, muy conveniente en un formulario con muchos elementos. Es muy similar al de envío, pues se consigue con la etiqueta:

<INPUT TYPE= “RESET” VALUE=“ZZZ”>

En donde ZZZ es el texto que queremos que aparezca en el botón.

Si añadimos al ejemplo anterior la etiqueta:

<P><INPUT TYPE=“reset” VALUE=“Borrar datos”>

 

Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando luego el botón de borrado.

 

Consideraciones finales

Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden utilizar. Pero no hay ningún inconveniente en usar, dentro del mismo formulario, distintos tipos de introducción de datos. Al pulsar el usuario el botón de envío recibiríamos en e-mail suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el símbolo &.

 

 

 

Ejemplo

Haremos como ejemplo práctico un libro de visitas a nuestra página.

 

<HTML>
<HEAD>
<TITLE>Libro de Visitas</TITLE>
</HEAD>
<BODY>

<P><CENTER>
<H2>Libro de visitas</H2>

<P><FORM ACTION=“mailto:[email protected]” METHOD=“POST”
ENCTYPE=“TEXT/PLAIN”>
Tu nombre:
<BR><INPUT TYPE="text" NAME="Nombre">
<P>Escribe tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
<P><INPUT TYPE="submit" VALUE="Enviar datos">
<INPUT TYPE="reset" VALUE="Borrar datos">
</FORM>
<P>
<HR>

</BODY>
</HTML>


También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *