Formularios en HTML – Programacion de 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 email, con lo que recibiríamos un email convencional.
Pero puede ser que lo que necesitemos sea sólamente 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.
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 email 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:
- Etiqueta de inicio:
- Cuerpo del formulario, con los distintos elementos para poder introducir los datos.
- Botones de envío y de borrado.
- Etiqueta de cierre </FORM>
Etiqueta de inicio
El atributo ACTION indica la acción que se debe efectuar y que es que los datos sean enviados por email 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).
<FORM ACTION=»mailto:dirección_de_email» METHOD=»POST» ENCTYPE=»TEXT/PLAIN»>
El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correo a la dirección de email, nada más pulsar el usuario el botón de envío.
Con el atributo ENCTYPE=»TEXT/PLAIN» se consigue que las respuestas las recibamos como un fichero de texto, perfectamente legible y sin codificar.
Elementos para introducir los datos
Los vamos a dividir en tres clases:
- Introducción por medio de texto
- Introducción por medio de menús
- 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 introducción.
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 (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:dirección_de_email» 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 email 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».
por:
En el caso que hemos visto, si hubiéramos cambiado la etiqueta correspondiente
<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:dirección_de_email» METHOD=»POST» ENCTYPE=»TEXT/PLAIN»>
Introduce tus comentarios:
<BR><TEXTAREA NAME=»Comentarios» ROWS=»6″ COLS=»40″>
</TEXTAREA>
</FORM>
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_email» METHOD=»POST» ENCTYPE=»TEXT/PLAIN»>
¿Cuál es tu color preferido?
<BR><SELECT NAME=»ColorPreferido»>
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT >
</FORM>
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.
Formulario 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>
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.
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.
<FORM ACTION=»mailto:dirección_de_email» METHOD=»POST» ENCTYPE=»TEXT/PLAIN»>
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.
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 email suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el símbolo &.
Ejemplo práctico
<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>
Comentarios recientes