CAPITULO 11 (Más formularios)

Bienvenido al capítulo 11 (¡Once capítulos, Dios mío!) de este curso de Edición Extremadamente Simple de HTML.

En el capítulo anterior vimos un montón de controles que podemos usar para nuestros formularios. ¿Te parecieron sufucientes? Pues aún nos quedan unos cuantos.

Para abrir boca, veamos el utilísimo cuadro de texto:

<TEXTAREA NAME="nombre" ROWS="filas" COLS="columnas">
Texto por defecto a incluir en el cuadro.
(Incluso con retornos de carro)
                     (Y espacios...)
</TEXTAREA>

¿Pero qué demonios es esto? La etiqueta <TEXTAREA> sirve para crear un cuadro de texto. En este texto se respetarán los saltos de línea y los espacios en blanco. NAME es el atributo que usaremos para asignar un nombre al cuadro de texto. En COLS indicaremos el número de columnas que queramos que tenga (en otras palabras, el número de caractéres de ancho del control) y en ROWS el número de filas (su alto en caractéres). Otra opción que podemos usar es READONLY, que hace que no pueda modificarse el contenido del cuadro. Entre <TEXTAREA> y </TEXTAREA> podemos poner, opcionalmente, un texto que aparecerá por defecto. Cuando el usuario active el botón SUBMIT del formulario, se enviará el nombre del cuadro seguido del contenido de este. Facil y bonito, me va gustando esto.

Otro control muy espectacular es el menú de selección.

<SELECT NAME="nombre">
<OPTION>primera opción</OPTION>
<OPTION>segunda opción</OPTION>
<OPTION>tercera opción</OPTION>
<OPTION>cuarta opción</OPTION>
</SELECT>

Tal como lo hemos puesto arriba, esto creará un pequeño cuadro, parecido a un cuadro de texto, pero con algún botón o similar (esto puede variar de un navegador a otro) que nos permitirá elegir una de entre las opciones que le hemos indicado con la etiqueta <OPTION>.

Si le indicamos a la etiqueta <SELECT> el número de líneas que queremos que tenga mediante el atributo SIZE:

<SELECT NAME="nombre" SIZE="4">
<OPTION>primera opción</OPTION>
<OPTION>segunda opción</OPTION>
<OPTION>tercera opción</OPTION>
<OPTION>cuarta opción</OPTION>
</SELECT>

Se crea una ventana en la que se puede seleccionar una de las líneas. Si hubiesemos indicado un número de líneas menor que el de opciones, nos mostraría una barra de desplazamiento en el lateral. Y si el valor de SIZE fuera mayor que el número de opciones, nos aparecerían una o más líneas en blanco.

Pero, ¿Y cómo indicamos un valor por defecto? Pues con el atributo SELECTED aplicado a una de las etiquetas <OPTION> de este modo:

<OPTION SELECTED>opción preseleccionada</OPTION>

Como ves no es nada complicado.

¿Y si queremos que se puedan seleccionar mas de una opción? Pues nada, que le ponemos en la etiqueta <SELECT> un atributo MULTIPLE de esta forma:

<SELECT NAME="nombre" MULTIPLE>

Y, si queremos tener varias opciones preseleccionadas, les indicamos SELECTED a todas las que queramos.

Cuando se envía el contenido de este control, los daros se envían en la forma NOMBRE=OPCIÓN, donde NOMBRE es el que le hayas puesto al control y OPCIÓN es el texto que contenga la <OPTION> que haya seleccionado el navegante. Pero, a veces, es más convenienteenviar, en lugar de el texto de <OPTION>, otro texto distinto (para que lo maneje mejor el prograna CGI, por comodidad...) para ello <OPTION> tiene un atributo, VALUE que se usa del mismo modo que en otros controles:

<OPTION VALUE="valor">Texto de la opción</OPTION>

En este caso, en lugar de enviarse el mismo texto que el navegante ve en el control de la página, se envía el contenido de VALUE, en este caso "valor".

Para terminar este breve (pero intenso) capítulo, veamos un ejemplo de formulario con los controles que hemos visto:

Ya sabes que hacer para verla.

Bueno, pues eso es todo por hoy. Hasta el siguiente capítulo. Que descanses. Nos vemos. Adios.