TEMA: FORMULARIOS EN HTML

Antes de que comenzemosSección

¿Qué son formularios HTML?Sección

Los formularios HTML son uno de los puntos principales de interacción entre un usuario y un sitio web o aplicación. Ellos permiten a los usuarios enviar información a un sitio web. La mayor parte de las veces se envía información a un servidor web, pero la pagina web también puede interceptarla para usarla por su lado.

Un formulario HTML está hecho de uno o más widgets. Estos widgets puede ser campos de texto (de una linea o multilínea), cajas de selección, botones, checkboxes, o botones de radio. La mayoría del tiempo, estos widgets están junto a un label que describe su propósito.

Estructura de un formulario

La estructura general de un formulario es:

Etiqueta de inicio:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
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 emaila la dirección indicada.

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>

Que resulta:

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

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

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

Habríamos obtenido:

(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 etiquea correspondiente por:

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

Obtenemos:

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

Que resulta:

(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 email suyo con el siguiente texto:
Comentarios=Bla bla bla...

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>

Que resulta:

Si el usuario ha escogido, p. ej. Azul y ha pulsado el botón de envío, recibiremos un email 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">

Obtenemos:

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>

Que resulta:

Si el usuario marca este formulario y pulsa el botón de envío, recibiremos un email 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>

Obtenemos:

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>

Que resulta:

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 email suyo con el texto: SistemaOperativo=PC.

Botones de envío y de borrado

Hasta ahora, en todos los ejemplos que hemos visto, faltaba un elemento esencialen 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>

Que resulta:

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:

<INPUT TYPE="reset" VALUE="Borrar datos">

resulta:

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 un email suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el símbolo &.

Por ejemplo, con este formulario, con dos elementos distintos:

recibiríamos un email con el texto (p. ej.):
Apellido=Ruiz ColorPreferido=Azul.

Buscar este blog

HABILIDADES DIGITALES 3