<FORM ACTION="mailto:juan12@wanadoo.es?subject="..." METHOD="post" ENCTYPE= "text/plain">FORMULARIOS - I
Los formularios son una manera de que los demás nos envien a nosotros determinada información que a nosotros, los que hacemos la página, nos puede interesar. Así, podemos insertar en nuestros documentos preguntas, preferencias y demás dirigidas a los visistantes que sólo tendrán que rellenar unas cosillas y mardarnos la información pulsando un botón (¡como avanza la ciencia, madre mía!).
Lo más simple es que los datos nos sean enviados directamente a nuestro correo electrónico (eso es lo que vamos a ver aquí), pero hay otro sistema, que consiste en enviarlos a un pequeño programa situado en el servidor (el que sea) llamado CGI (Common Gateway Interface) que lo que hace es "maquetarnos" la información antes de enviárnosla. Lógicamente, para hacer uso de esto es necesario crear un cgi y alojarlo en nuestro servidor (cosa imposible para la mayoría de los usuarios) o que ya exista el programilla en el servidor que usamos comunmente y que se nos dé la ocasión de usarlo.
Las etiquetas de todos los elementos del formulario son <FORM> y su cierre </FORM>, con unos cuantos atributos.
El primer atributo es ACTION que llevará nuestra dirección de correo para que se sepa donde hay que mandar las cosas. Además hay que poner METHOD con el valor post que no necesita aclaración y ENCTYPE (encode type) que nos dice cómo nos va a enviar el contenido y que, en nuestro caso, será "text/plain" para que nos mande la información sin formato (sin codificar).
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> </FORM> </BODY> |
Como alternativa tenemos: para ACTION la ruta de ubicación del programa cgi (por ejemplo http://servidor/cgi-bin/programa) y para este caso el METHOD sería get. Para ENCTYPE también podría ser el valor predeterminado "application/x-www-form-urlencoded" que nos mandará la información de otra manera y que mejor lo olvidamos.
Como recordarás podemos poner un título al mensaje que nos llegue (y algo en el cuerpo,...) añadiendo ?subject="..."
<FORM ACTION="mailto:juan12@wanadoo.es?subject="..." METHOD="post" ENCTYPE= "text/plain">
También se puede hacer que se mande a un FTP remoto:
<FORM ACTION="ftp://usuario@servidor/" METHOD="POST" ENCTYPE= "text/plain">
Para introducir los datos nos vamos a encontrar con varias formas distintas. Para la mayoría de los elementos del formulario la etiqueta va a ser INPUT con una serie de atributos que van a cambiar de una forma a otra.
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tu color favorito: <INPUT TYPE=text> </FORM> </BODY> |
Y eso se verá:
|
|
Esto me lleva a una pregunta ¿cómo identifico yo a qué se refiere el texto que me mandas?. Un ejemplo, imagina que tenemos muchos campos de formulario (muchas preguntas y eso) y que yo pregunto, en un sitio, tu color favorito (que es el azul) y, en otro sitio, te pregunto el color de tu coche (que da la casualidad tonta de que también es azul). Cuando me llegue yo veré "azul" pero no sabré si se refiere a tu color favorito o al color de tu coche.
Para asociar la respuesta del visitante a la pregunta ponemos el atributo NAME.
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tu color favorito: <BR> <INPUT TYPE=text NAME="color favorito"> </FORM> </BODY> |
Yo seguiré viendo lo mismo (o casi, observa el <BR>):
|
|
Pero cuando me lleguen los datos veré "color favorito=azul", es decir, se asocia lo que hay en NAME con lo que pones en la caja de texto. ¿Aclarado?.
Más cosas. Podemos poner un valor por defecto porque queramos o porque no queremos poner nada delante para identificar lo que se pide. Se usa el atributo VALUE.
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tu color favorito: <BR> <INPUT TYPE=text NAME="color favorito" VALUE="Tu color, tío"> </FORM> </BODY> |
|
|
O quitamos lo de delante puesto que ya sabemos lo que se pide:
|
|
Si queremos que no se borre lo que acabamos de poner en VALUE (comprueba que en el anterior sí que ponemos eliminarlo), añadimos READONLY:
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tu color favorito: <BR> <INPUT TYPE=text NAME="color favorito" VALUE="Tu color, tío" READONLY> </FORM> </BODY> |
|
|
Si queremos poner una descripción usamos el viejo ALT, por si un navegador no carga bien el formulario. También podemos usar TITLE, recuerda pasar el cursor por encima.
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tu color favorito: <BR> <INPUT TYPE=text NAME="color favorito" VALUE="Tu color, tío" READONLY ALT="poner color" TITLE="colorcito"> </FORM> </BODY> |
|
|
Tanto ALT como READONLY y TITLE se pueden aplicar a gran cantidad de elementos. También el atributo ACCESSKEY con un valor de letra, que hace que al pulsar ALT+"esa letra" vaya a ese elemento o seleccione una opción (lo veremos al final, cuando se haga un formulario complejo).
La longitud predeterminada de la caja es de 20 caracteres. Podemos escribir más pero desapareceran los primeros a medida que se escriba. Para regular el tamaño usamos SIZE con valor numérico referido a caracteres (letras contando espacios).
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tu color favorito: <BR> <INPUT TYPE=text NAME="color favorito" SIZE=40> </FORM> </BODY> |
Y se ve:
|
|
Y podemos controlar la longitud máxima del texto de modo que si ponemos más no nos llegará más que la longitud marcada.
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tu color favorito: <BR> <INPUT TYPE=text NAME="color favorito" SIZE=40 MAXLENGTH=15> </FORM> </BODY> |
|
|
Prueba a escribir más de 15 caracteres (aunque tenemos una caja donde entran 40).
Por último, si no queremos que se reconozca el texto, que es lo que pasa cuando introducimos una contraseña, cambiamos el text del INPUT por password. Compruébalo:
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tu color favorito: <BR> <INPUT TYPE=password NAME="color favorito"> </FORM> </BODY> |
|
|
También valen aqui SIZE, VALUE, MAXLENGTH y ALT. Si le ponemos un VALUE nos aparecerá como puntitos y no lo podremos leer, así que no tiene sentido ponerlo.
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tus ideas: <TEXTAREA NAME="comentario"> </TEXTAREA> </FORM> </BODY> |
Que se ve:
|
|
Podemos ajustar el tamaño mediante ROWS (filas) y COLS (columnas) con valores numéricos (caracteres). Además hemos puesto otra vez el <BR>.
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tus ideas: <BR> <TEXTAREA NAME="comentario" ROWS=7 COLS=30> </TEXTAREA> </FORM> </BODY> |
|
|
Recuerda que el valor de NAME nos sirve cuando nos llegué todo para identificar los campos que he puesto.
Si has escrito algo habrás observado que el texto se adapta a la caja. Pues bien, otro atributo es WRAP que puede ser virtual (el texto se adapta al cuadro pero se nos envía en una línea), physical (se adapta y se nos envía en las líneas que sean) y off (no se adapta sino que sólo tenemos una línea larguísima a medida que escribimos). Observa este último caso. Escribe algo largo.
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> Tus ideas: <BR> <TEXTAREA NAME="comentario" ROWS=7 COLS=30 WRAP=off> </TEXTAREA> </FORM> </BODY> |
|
|
Si queremos poner un texto dentro y quitar el de fuera.
|
<BODY>
<FORM ACTION="mailto:juan12@wanadoo.es" METHOD="post" ENCTYPE="text/plain"> <TEXTAREA NAME="comentario" ROWS=7 COLS=30 WRAP=off> Tus ideas: </TEXTAREA> </FORM> </BODY> |
|
|
Más cosas en los siguientes capítulos.
