CAPITULO 10 (Formularios, primeros pasos.)

Los formularios son el sistema del que nos provee el HTML para enviar información desde una página web a algún programa u otro recurso en un ordenador remoto. Esto quiere decir que un formulario no sirve de mucho si no tenemos un lugar al que enviarlo.

El funcionamiento de los formularios es muy simple: La persona que visita la página rellena una "matriz" (el formulario propiamente dicho) con los datos que se quieran enviar y, al picar en un botón, estos son enviados al lugar que corresponda (generalmente, un programa CGI alojado en nuestro servidor) en la forma NOMBRE-DEL-CONTROL=VALOR.

Aquí no hablaremos de los CGIs, si no que nos limitaremos a ver como se construyen los formularios web. Por ahora, te basta con saber que los CGI son programas que se ejecutan en la máquina donde está alojada tu página (o en otra máquina de Internet), y que envían una respuesta al navegador.

El primer tag que tenemos que tener en cuenta es el que crea un formulario. Este tag deberá englobar en su interior a todos los elementos que formen parte de este:

<FORM>...</FORM>

<FORM> tiene tres atributos:

ACTION=URL que indica la dirección a la que será enviado el contenido del formulario.

METHOD=método. Donde método, que puede ser POST o GET, indica la forma en que se enviarán los datos a la url especificada en ACTION. (La opción por defecto es "GET")

Dentro debemos colocar algunos elementos, llamados controles, como cuadros de texto, botones, ect. Para crear cada uno de estos elementos tenemos la directiva <INPUT>, que tiene un atributo obligatorio: TYPE, que es el que determina el tipo concreto de control de que se trata:

<INPUT TYPE="tipo de control">

Donde "tipo de control" puede ser uno de los siguientes:

"SUBMIT" crea el clásico botón "Enviar", y es el que, al ser pulsado, envía los datos del formulario a la dirección especificada en ACTION.

"RESET" inserta un botón "Borrar" que, al ser pulsado, elimina los datos de todos los controles del formulario que lo contiene.

"BUTTON" crea un botón.

"TEXT" crea un cuadro para insertar una línea de texto.

"PASSWORD" hace lo mismo que "TEXT", pero los caracteres que se escriban no se verán en pantalla, sino que serán sustituidos por asteriscos.

"RADIO" crea un "Radio Button", algo parecido a lo anterior, pero con la sutil diferencia de que suelen ser redondos, estar agrupados, y que, dentro de un grupo solo puede aparecer uno marcado cada vez. (De acuerdo, también los verás luego).

"IMAGE" funciona exactamente igual que "SUBMIT", pero aquí puedes especificar una imagen para que aparezca en lugar del aburrido botón tradicional.

"HIDDEN" no muestra nada, absolutamente nada. Si lo pones dentro de tu formulario, este se verá exactamente igual. ¿Y para que sirve entonces? Pues para enviar al CGI, siempre que se use ese formulario, información que pueda ser necesaria, pero que no necesite cambiarse ni verse.

"FILE" sirve para crear un cuadro de diálogo mediante el que enviar un archivo desde tu disco duro. No está soportado en todos los navegadores.

Bueno, esto parece un poco complicado. Veamos un ejemplo con el que aclararnos un poco:

Bueno, esto es muy bonito, pero así no nos sirve de mucho. Vamos a ver cada control un poco más en profundidad:

<INPUT TYPE="TEXT"> e <INPUT TYPE="PASSWORD"> se usan de forma casi idéntica, y tienen los siguientes atributos:

NAME="nombre" le asigna un nombre al formulario, lo que es necesario para que el programa CGI que vayas a usar sepa qué datos le estás en viando y qué tiene que hacer con ellos.

SIZE="tamaño", donde "tamaño" es un número que indica el ancho en caracteres de la línea de texto.

MAXLENGTH="número", que sirve para indicar el número máximo de caracteres que se podrán introducir. (es decir, que si pones MAXLENGTH=10, el navegador no te dejará introducir más de 10 letras).

VALUE="texto" sirve para asignar un texto por defecto que aparecerá dentro del cuadro. (Por ejemplo, el clásico "Ponga aquí su nombre").

READONLY, que se pone así, sin ningun valor, hace que el texto que haya en el cuadro no pueda ser cambiado por el navegante.

NAME="nombre" funciona igual que vimos antes, asignando un nombre al control, con la salvedad de que se puede asignar el mismo nombre a varios checkboxs, para agruparlos como un único control.

VALUE="valor" asigna al checkbox el valor que enviará, si está seleccionado, al enviar el formulario.

CHECKED se usa para indicar que una casilla está seleccionada por defecto.

NAME="nombre" sirve, como siempre, para asignar un nombre al control. debe ser el mismo para cada uno de los que formen parte de un mismo grupo, y solo uno de ellos podrá ser activado a un mismo tiempo. (Ya sé que me pongo demasiado pesado con esto, pero quiero que quede muy claro).

VALUE="valor" funciona exactamente igual que en el control checkbox.

CHECKED también tiene el mismo uso que en checkbox. Pero recuerda usarlo con solo uno de los miembros de un grupo.

NAME="nombre", para asignar un nombre al control.

VALUE="nombre", que hace que el texto que pongas en "nombre" aparezca escrito en el botón.

NAME="nombre", el nombre al control.

SRC="imagen", donde pones la URL de la imagen que usarás como botón.

ALT="texto", sirve para poner un texto alternativo (igual que hacíamos con <IMG>).

<INPUT TYPE="FILE"> solo funcionará si tu servidor acepta que se le envíen archivos (cosa que no es muy habitual) o si tienes un programa CGI preparado para trabajar co ellos. Lo que hace este control es abrir una ventana del tipo "Abrir Archivo", en la que se puede seleccionar un archivo para enviar:

NAME="nombre", es, como siempre, el nombre del control.

Si vas a usar este control, tendrás que usar también, en la etiqueta <FORM>, el atributo ACCEPT="tipos mime", en el que "tipos mime" representa una lista de todos los tipos MIME de archivo, separados por comas, que tu programa aceptará.

<INPUT TYPE="HIDDEN"> se usa, como ya dije, cuando quieres poner un valor, pero no es necesario cambiarlo ni que se muestre en el navegador:

NAME="nombre", seguimos usándolo para asignar el nombre del control.

VALUE="nombre", el valor que acompañará al nombre al enviarlo.

<INPUT TYPE="RESET">. Este control no contiene ningún valor y no envía nada. Sirve solo para deshacer todos los cambios que pueda haber hecho el navegante. Los campos que no tengan ningún valor por defecto quedarán en blanco, y los que lo tengan adoptarán este de nuevo.

VALUE="nombre", hace que el contenido de "nombre" aparezca escrito en el botón, es recomendable poner cosas del estilode "Borrar", "Borrar todo" o algo que indique claramente para qué sirve este botón.

<INPUT TYPE="SUBMIT"> es el botón que envía el contenido del formulario a la URL que hayas indicado en el parámetro ACTION de la etiqueta <FILE>.

VALUE="nombre", indica el texto que aparecerá escrito en el botón, pon algo como "Enviar" o algo parecido.

Con lo que tenemos hasta ahora nuestro formulario de ejemplo puede quedar bastante más completo:

Pulsa aquí para ver el ejemplo anterior.

Bueno, ya hemos visto lo más básico sobre los formularios, Más utilidades y más avanzadas en la próxima entrega de este maravilloso, inimitable, expléndido, espectacular y gratuíto curso de Edición Extremadamente Simple de HTML.