---
Página principal

CAPITULO 10
(Formularios, primeros pasos.)

Indice del curso
---

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

En este curso no entraremos en detalles sobre las características y diferencias entre GET y PUT, eso sería parte de un curso sobre programación CGI, cosa que sería muy complicada y en la que no vamos a meternos. Si en algún momento necesitas saber cual de estos procedimientos tienes que usar, solo tienes que consultar la documentación del programa CGI que estés usando.
ENCTYPE=tipo-mime que sirve para definir el tipo de datos que se enviarán. La opción por defecto (y la más usual) es el "application/x-www-form-urlencoded", que significa que la información se mandará codificada como una cadena URL (sustituyendo algunos caractéres "problemáticos" con códigos especiales).

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.

Mucho ojo: El que en una entrada "PASSWORD" los caractéres aparezcan como asteriscos no quiere decir que la información que se inserte e ella esté encriptada o portegida de ningún modo. Para lo único que sirve es para evitar que un curioso pueda mirar por encima de tu hombro y leer lo que pones.
"CHECKBOX" crea una caja de verificación, que es uno de esos pequeños cuadraditos que pueden marcarse como activados o desactivados (Bueno, luego los verás).

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

<HTML>
<HEAD>
<TITLE>Peich con formulario</TITLE>
</HEAD>
<BODY>

<FORM METHOD="POST" ACTION="programa.cgi">

<P>(TYPE=TEXT) <INPUT TYPE="TEXT">
<P>(TYPE=PASSWORD) <INPUT TYPE="PASSWORD">
<P>(TYPE=CHECKBOX) <INPUT TYPE="CHECKBOX">
<P>(TYPE=RADIO) <INPUT TYPE="RADIO">
<P>(TYPE=BUTTON) <INPUT TYPE="BUTTON">
<P>(TYPE=FILE) <INPUT TYPE="FILE">
<P>(TYPE=SUBMIT) <INPUT TYPE="SUBMIT">
<P>(TYPE=RESET) <INPUT TYPE="RESET">

</FORM>

</BODY>
</HTML>

EjemploPulsa aquí para ver el ejemplo anterior.

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.

Ambos controles enviarán la información de la forma "nombre"="valor", donde "nombre" es el nombre que se le haya asignado al control y "valor" el contenido de la caja de texto. Si no se ha escrito nada en el cuadro, se enviará solo algo del estilo de "nombre"=, Sin nada tras el simbolo igual.
<INPUT TYPE="CHECKBOX"> acepta los siguientes atributos:

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.

Al enviar el formulario, este control no enviará absolutamente nada si no está seleccionado, o enviará la cadena "nombre"="valor", donde "nombre" es el contenido de NAME y "valor" el de VALUE, si está seleccionado.
<INPUT TYPE="RADIO"> es casi igual que checkbox, pero con la diferencia de que este tipo de control nunca debe aparecer solo, y que solo puede ser seleccionado uno de cada grupo al mismo tiempo:

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.

Al enviar el formulario,  enviará la cadena "nombre"="valor", donde "nombre" es el contenido de NAME y "valor" el de VALUE del botón que esté seleccionado en ese grupo.
<INPUT TYPE="BUTTON"> es un control un poco especial. Por sí mismo no sirve de nada, pero es muy útil en combinación con Scripts. Puede aceptar muchos modificadores, pero ahora solo vamos a ver dos:

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.

Estarás pensando que este es un control bastante pobre. Pero esto no es cierto: En combinación con lenguajes de Script como JavaScript se puede convertir en una herramienta extremadamente potente. Desafortunadamente, JavaScript es un lenguaje de programación demasiado complejo para explicarlo en unas poca líneas, y escapa completamente de los objetivos de este curso.
<INPUT TYPE="IMAGE"> es casi exactamente igual que "BUTTON":

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:

<HTML>
<HEAD>
<TITLE>Peich con formulario, pero m&aacute;s completa</TITLE>
</HEAD>
<BODY>

<FORM METHOD="POST" ACTION="programa.cgi">

<P>(TYPE=TEXT) <INPUT TYPE="TEXT" VALUE="Escribe lo que te apetezca (de todas formas este formulario no funciona)" SIZE="65" NAME="Text1">
<BR>(TYPE=TEXT) <INPUT TYPE="TEXT" VALUE="En este no puedes escribir" SIZE="65" NAME="Text2" READONLY>
<P>(TYPE=PASSWORD) <INPUT TYPE="PASSWORD" NAME="Password">
<P>(TYPE=CHECKBOX 1) <INPUT TYPE="CHECKBOX" CHECKED NAME="Checkbox">
<BR>(TYPE=CHECKBOX 2) <INPUT TYPE="CHECKBOX" CHECKED NAME="">
<BR>(TYPE=CHECKBOX 3) <INPUT TYPE="CHECKBOX" NAME="Checkbox">
<BR>(TYPE=CHECKBOX 4) <INPUT TYPE="CHECKBOX" NAME="Checkbox">
<P>(TYPE=RADIO 1) <INPUT TYPE="RADIO" CHECKED NAME="Radio">
<BR>(TYPE=RADIO 2) <INPUT TYPE="RADIO" NAME="Radio">
<BR>(TYPE=RADIO 3) <INPUT TYPE="RADIO" NAME="Radio">
<BR>(TYPE=RADIO 4) <INPUT TYPE="RADIO" NAME="Radio">
<P>(TYPE=BUTTON) <INPUT TYPE="BUTTON" VALUE="HOLA" NAME="Boton">
<P>(TYPE=FILE) <INPUT TYPE="FILE" NAME="File">
<P>(TYPE=SUBMIT) <INPUT TYPE="SUBMIT" VALUE="Env&iacute;a esto">
<P>(TYPE=RESET) <INPUT TYPE="RESET" VALUE="Borra todo">

</FORM>

</BODY>
</HTML>

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

---

Capitulo anteriorPrincipio de este capituloIndice del cursoCapitulo siguiente

---

HTML 4.0 VálidoCSS Válido