HTMLpointHTMLpoint HTMLpoint.com


 Forms



En este capítulo abrimos un pequeño parénteis. Preferimos presentar ahora la teoría sobre los form porque, en los próximos capítulos, haremos referencia a ellos muy a menudo. Creemos que la mayoría sabe qué es un form, sin embargo, para evitar problemas, un form es algo parecido a
cuyo código fuente es:


Pero empezamos por el primcipio.

La forma elemental de un form es:

<FORM> iniciar el módulo
<INPUT>
..............
..............


Aquí puede estar todos los campos input que queráis. Pensad, por ejemplo, en un form para la grabación de datos de un usuario:

<INPUT>
</FORM> terminar el módulo


Sucesivamente veremos cómo rellenar los campos 'INPUT'. Por ahora, analizaremos el primer form funcionante que no necesita CGI u otros instrumentos.

<FORM METHOD=POST ACTION="http://mail.katamail.com/mail/compose/!1!marialozano/3c616a436e8eded9a29c60649928ccf9?to=xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded"> </FORM>

(Os habréis dado cuenta de que lo que hemos escrito arriba no funciona precisamente como esparábamos. Realmente falta el espacio para teclear el input. Dentro de poco veremos como arreglarlo todo). Lo único que tenéis que cambiar en este form son las 'x', a las que tendréis que sostituir vuestra dirección e-mail. Desgraciadamente, los datos llegarán en un formato casi indescifrable, es decir:

FORMNAME=Nuevo&NAME=Mario+Rossi&ADDRESS=
Calle+Milán&CITY=Madrid&STATE=ES


Hay dos métodos para evitarlo. Utilizar programas que formateen por sus cuenta los textos, sin que os enteréis de nada o utilizar un CGI. Obviamente nosotros descartamos la primera hipótesis a favor de la segunda, aunque por ahora no seguiremos en el asunto. Más adelante entenderéis cómo manejar esta cadena. Por ahora no os preocupéis si no conseguís entender cómo y de qué forma llegan los datos. Podéis estar seguros de que llegarán y de una forma legible.

Para crear nuestros primeros forms, por lo tanto, abrimos los tags <INPUT> e introducimos otras instrucciones. La más simple es introducir la tipología de la introducción de los datos. La más común es:

<INPUT TYPE=TEXT>

Además, cada input necesita un nombre. Por jemplo podemos definir algo como NAME="email" así que, cuando el usuario rellene el form, nos llegue una cadena como 'email=vuestronombre@dominio.es'. Fijaos que 'email' es un nombre elegido a caso y podría coincidir incluso con la dirección, la pizza preferida o cualquier otra cosa. Por lo tanto será útil introducir un texto que indique como rellenar el espacio del form a continuación para evitar problemas. Además, nuestro form se puede todavía modificar añadiendo el tag SIZE, es decir, la longitud del form. La de default es SIZE=20, pero podéis poner el valor que queráis. Sin embargo, si queréis que el texto introducido no supere los TOT caracteres, introducid el tag <MAXLENGTH>
Por lo tanto el código completo será:


Ahora, si ponéis en marcha este form, el resultado está garantizado. Si váis a abrir vuestro correo a punto de ser inviado, habrá un mensaje cuyo remite sóis vosostros mismos, así como el remite, y el texto del emilio será algo parecido a: email=lo+que+habéis+tecleado. Antes de concluir, hay que decir que podéis cambiar el tag <TYPE> de <TEXT> a <PASSWORD>, de forma que no se puedan utilizar los caracteres, sino los asteriscos.

Vamos a ver como sale un form de este tipo (intentad introducir más de 6 caracteres):



Nos quedamos en el tema, pero cambiamos los botones. Analicemos los llamados 'radio buttons'. El código es:


Los tag <BR> y <P> no son estrictamente necesarios, sin embargo nos permiten tener un ajuste mejor:

   Opción uno
   Opción dos
   Opción tres 

¿Qué devolverá un format de este tipo? Pues, si elegís "Opción uno" devolverá "nombre1=valor1", si elgís "Opción dos" devolverá "nombre2=valor2" etc.

No sé si os habéis dado cuenta de que los radio buttons nos permiten elegir sólo una opción. Si necesitáis que el visitador eliga más de una opción, podéis sostituir los radio buttons por las 'checkboxes', cuyo código es exactamente igual al de los radio buttons. Hay aquí un ejemplo:


y el ajuste correspondiente:

  Opción uno
  Opción dos
  Opción tres 

Incluso para las checkbox vamos a ver los datos que devuelven. Serán iguales a los de los radio buttons, pero, como podéis hacer elecciones múltiples, podría salir (suponiendo seleccionar "Opción uno" y "Opción dos"):"name1=valor1&nombre2=valor2".

Sigamos adelante. Posiblemente este form os resulte bastante familiar:


El código es:


En default este tipo de form visualiza el primer valor de la lista, pero si queréis, por ejemplo, visualizar el tercer (Valor3) podéis cambiar el código con los dos asteriscos como:

<OPTION VALUE= "Valor3"SELECTED>Valor3

¿Queréis transformar este form en una lista de desplazamiento? Es muy simple porque basta con añadir un simple tag a la línea con el asterisco. Este tag es <SIZE>.

<SELECT NAME="NOMBRE" SIZE=3>

Cuidado porque si <SIZE> es mayor del número de los elementos del form, el resultado no será lo que esperamos. Hay que controlarlo todo introduciendo primero 3 y luego 5 como medida del form. Incluso con las listas es posible introducir el tag SELECTED para preseleccionar un elemento, y se hace como lo hemos hecho anterioremente.
Vamos a ver el último tipo de form:


es decir, una área de texto cuyo código es:

es decir, una área de texto cuyo código es:


Éste también se puede modificar. Por ejemplo se puede decidir el tamaño, introduciendo después de name <ROWS= XX> y <COLS=XX>, donde las dos X es el número de líneas y columnas. Por lo tanto, una textarea con tamaño arbitrario puede ser:


Acabamos el apartado con los famosos botones.

El código es simple. Para submit será:



Mientras para reset:


Resulta fácil cambiar el texto de default por cada botón introduciendo VALUE, por ejemplo:


Con esto hemos acabado el capítulo sobre los form.


  Volver al inicio de la página