tutorial de HTML

Una de las técnicas más utilizadas para que una página web tenga cierto grado de interactividad es el uso de los llamados formularios que son los que nos permiten buscar, hacer pedidos, escribir mensajes, suscribirse, etc.

Aunque las etiquetas HTML para formularios no son muchas, tienen un número muy amplio de atributos y, algunos de ellos, son muy complejos.

Para sólo dar una idea de su funcionamiento, un formulario se crea con la etiqueta <FORM> </FORM>, dentro de la cual se insertan otras que crean los controles: botones, entrada de texto, casillas de verificación, menúes, etc.

Estos son los atributos del elemento FORM:

Veamos un ejemplo simple, supongamos que deseamos crear una lista de usuarios. Cada uno deberá introducir su nombre y dirección de email y pulsar un botón para enviarnos los datos. Estos datos los recibiremos directamente en nuestro correo,y con ellos confeccionáramos la lista manualmente.

La estructura general de ese formulario sería:

<FORM ACTION="mailto:dirección_de_email”
         METHOD=”POST” ENCTYPE=”TEXT/PLAIN”>
    [elementos para introducir datos]
    [botón de envío]
</FORM>

En este caso, el atributo ACTION indica la acción a efectuar (enviar datos por email). El atributo METHOD=POST indica que los datos sean enviados inmediatamente apenas se pulse el botón de envio (no se analizan ni verifican). El atributo ENCTYPE=”TEXT/PLAIN” hace que sea enviado como texto plano, sin codificar.

Los elementos para introducir los datos pueden ser de diferente tipo, texto, menúes y botones. En todos los casos, se utiliza la etiqueta <INPUT> </INPUT>:

<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">

En donde:
xxx es una palabra que indica el tipo de introducción
yyy es el nombre que le asignamos a la variable de introducción del dato
zzz es la palabra asociada a un elemento

¿Confuso?, no es para menos, veamos uno por uno:

Para introducir datos por medio de una línea de texto, la palabra clave es INPUT TYPE=”text” y, el VALUE no se utiliza. Por ejemplo solicitamos que se introduzca un nombre:

<FORM ACTION="mailto:dirección_de_email"
    METHOD="POST" ENCTYPE="TEXT/PLAIN">
    Escriba su nombre:<BR>
    <INPUT TYPE="text" NAME="nombre">
</FORM>

Se ve así:

La longitud del formulario es, por defecto, de 20 caracteres. Se puede variar incluyendo en la etiqueta el atributo SIZE=”cantidad”. Sea cual sea la longitud del formulario, si no se indica nada, puede introducirse cualquier cantidad de caracteres. Se puede limitar incluyendo en la etiqueta el atributo MAXLENGTH=”cantidad”.

<FORM ACTION="mailto:dirección_de_email"
    METHOD="POST" ENCTYPE="TEXT/PLAIN">
    Escriba su nombre (hasta 4 caracteres):<BR>
    <INPUT TYPE="text" NAME="nombre SIZE="20" MAXLENGTH="4">
</FORM>

También es posible introducir un texto y que los caracteres sean irreconocible, por ejemplo, que se vean como los típicos asteriscos que aparecen cuando se nos pide ingresar una contraseña. Para esto, hay que cambiar el atributo TYPE=”text” por el atributo TYPE=”password”.

<FORM ACTION="mailto:dirección_de_email"
    METHOD="POST" ENCTYPE="TEXT/PLAIN">
    Ingrese su contraseña (hasta 8 caracteres):<BR>
    <INPUT TYPE="password" NAME="nombre SIZE="20" MAXLENGTH="8">
</FORM>

Si queremos que el usuario confirme una opción determinada, podemos usar un formulario de confirmación, o checkbox, que se consigue con la etiqueta INPUT TYPE=”checkbox”.

<FORM ACTION="mailto:dirección_de_email”
     METHOD=”POST” ENCTYPE=”TEXT/PLAIN”>
<INPUT TYPE=”checkbox” NAME=”Lista”>
    Incluir en la lista de correo
</FORM>

Si queremos que el formulario aparezca marcado por defecto, hay que añadir el atributo CHECKED dentro de la etiqueta.

<FORM ACTION="mailto:dirección_de_email”
    METHOD=”POST” ENCTYPE=”TEXT/PLAIN”>
    <INPUT TYPE=”checkbox” NAME=”Lista” CHECKED>
    Incluir en la lista de correo
</FORM>

Cuando queremos que el usuario elija una única opción entre varias, usamos los botones de radio, con la etiqueta INPUT TYPE=”radio"”.

<FORM ACTION="mailto:dirección_de_email”
    METHOD=”POST” ENCTYPE=”TEXT/PLAIN”>
    ¿Color preferido?<BR>
    <INPUT TYPE=”radio” NAME=”ColorPreferido” VALUE=”Rojo”
        CHECKED>  ROJO
    <INPUT TYPE=”radio” NAME=”ColorPreferido” VALUE=”Verde”>  VERDE
    <INPUT TYPE=”radio” NAME=”ColorPreferido” VALUE=”Azul”>  AZUL
</FORM>

El atributo opcional CHECKED se ha añadido en la primera etiqueta para que aparezca marcada por defecto.

Todo esto muy bien pero ¿cómo se envian los datos?

El elemento esencial en cualquier formulario es el botón de envío que se consigue con la etiqueta INPUT TYPE=”submit”.

<FORM ACTION="mailto:dirección_de_email"
    METHOD="POST" ENCTYPE="TEXT/PLAIN">
    Escriba su nombre:<BR>
    <INPUT TYPE="text" NAME="nombre">
    <INPUT TYPE="submit" VALUE="Enviar datos">
</FORM>

Otro botón que puede agregarse con facilidad es el de borrado de los datos introducidos. Es muy similar al anterior, INPUT TYPE=”reset”.

<FORM ACTION="mailto:dirección_de_email"
    METHOD="POST" ENCTYPE="TEXT/PLAIN">
    Escriba su nombre:<BR>
    <INPUT TYPE="text" NAME="nombre">
    <INPUT TYPE="reset" VALUE="Borrar datos">
</FORM>

El botón de envío puede sustituirse por una imagen utilizando la etiqueta:

INPUT TYPE=”submit” VALUE=”Enviar datos”

por

INPUT TYPE=”image” SRC=”URLimagen”

<FORM ACTION="mailto:dirección_de_email”
    METHOD=”POST” ENCTYPE=”TEXT/PLAIN”>
    Escriba su nombre:<BR>
    <INPUT TYPE=”text” NAME=”nombre”>
    <INPUT TYPE=”image” SRC=”URLimagen” BORDER=0>
</FORM>

Un tipo de etiqueta INPUT muy común es el que contiene el atributo TYPE=”button”. Se utiliza para ejecutar rutinas script creadas por el usuario

    <INPUT TYPE=button VALUE="Pulsa para ir"
        onClick=".......">

Estos son los atributos del elemento INPUT:

Una alternativa de la etiqueta INPUT es la etiqueta BUTTON, funcionan igual pero ofrecen más posibilidades gráficas. Por ejemplo, botones con relieve y un efecto visual al ser oprimidos.

<FORM ACTION="mailto:dirección_de_email”
    METHOD=”POST” ENCTYPE=”TEXT/PLAIN”>
    Escriba su nombre:<BR>
    <INPUT TYPE=”text” NAME=”nombre”>
    <BUTTON NAME=”enviar” VALUE=”Probar” TYPE=”button”>
        <IMG src=”URLimagen” />
    </BUTTON>
</FORM>

Estos son los atributos del elemento BUTTON:

Cuando el texto a introducir es largo, por ejemplo un comentario, es conveniente utilizar un formulario de texto de líneas múltiples, esto se logra con la etiqueta TEXTAREA:

<TEXTAREA NAME="nombre" ROWS="cantidad" COLS="cantidad">

Donde ROWS representa la cantidad de filas (alto) y COLS la cantidad de columnas (ancho)

<FORM ACTION="mailto:dirección_de_email"
    METHOD="POST" ENCTYPE="TEXT/PLAIN">
    Introducir comentarios:<BR>
    <TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
    </TEXTAREA>
</FORM>

Que resulta:

Estos son los atributos del elemento TEXTAREA:

Si queremos que el usuario, en vez de introducir un texto, escoja entre varias opciones, podemos usar un formulario en forma de menú, para esto, tenemos la etiqueta SELECT y, dentro ella, cada opción se identifica con la etiqueta OPTION.

<FORM ACTION="mailto:dirección_de_email”
    METHOD=”POST” ENCTYPE=”TEXT/PLAIN”>
    Seleccione un color:<BR>
    <SELECT NAME=”EligeColor”>
        <OPTION>Rojo</OPTION>
        <OPTION>Verde</OPTION>
        <OPTION>Azul</OPTION>
    </SELECT >
</FORM>

Por defecto, sólo se ve una opción, si queremos que sean visibles más, añadimos el atributos MULTIPLE SIZE=”cantidad”.

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

Un menú también permite elegir entre distintas direcciones web y actuar como vínculos, para esto se agrega el atributo VALUE:

<OPTION VALUE="http://www.google.com.ar/">Google</OPTION>

Este es el resultado:

Estos son los atributos del elemento SELECT:

Estos son los atributos del elemento OPTION:

Todos estos controles y etiquetas pueden ser utilizados dentro de un mismo formulario, por ejemplo:

El envío de formularios requiere autorización por parte del servidor. Si la página se encuentra en un proveedor de hosting, deberíamos consultar con el servicio técnico para que nos informen cuáles son las opciones disponibles. La mayoría de los proveedores tienen ya instalados los recursos para realizar estas tareas.