Curso de creación de sitios web - Lección 6 - Página 3

Otro tipo de controles

A parte de los controles que hemos estudiado hasta ahora, existen dos de ellos que nos serán muy útiles en determinadas ocasiones: TEXTAREA y SELECT.

Textarea

Se trata de un cuadro de texto de varias líneas, donde podemos escribir un texto más extenso. Además, como era de esperar, este cuadro de texto define sus dimensiones con dos atributos:

• COLS: Número de columnas
• ROWS: Número de filas

El ejemplo es el siguiente:

<TEXTAREA COLS="50" ROWS="10">Texto de ejemplo.</TEXTAREA>

Resultado:

Cambiando los valores de Cols y Rows obtendremos una caja de texto de dimensiones variadas.
Como ya hemos visto, también es conveniente asignar un nombre a nuestro cuadro de texto, para identificarlo de forma inequívoca aunque haya otros cuadros de texto en nuestro formulario. Para ello usamos el ya conocido atributo NAME:

<TEXTAREA NAME="textarea" COLS="50" ROWS="10">Texto de ejemplo.</TEXTAREA>

En la mayoría de los navegadores actuales, insertar una caja de texto implica que cuando escribamos en ella y lleguemos al final de la línea, se producirá un salto automático de línea por defecto. Sin embargo, podemos encontrarnos algunas versiones de navegadores que continuen escribiendo en la misma línea hasta que pulsemos ENTER. Pues bien, para resolver este inconveniente, podemos usar un atributo denominado WRAP, cuyo valor "hard" nos permite definir esta característica:

<TEXTAREA NAME="textarea" COLS="50" ROWS="10" WRAP="hard">Texto de ejemplo.</TEXTAREA>

Select

En múltiples ocasiones nos hemos encontrado en Internet con un formulario que tenía un control de selección. Se trata de un menú desplegable mediante el cual poder escoger una, entre varias opciones. Un ejemplo sería el siguiente:

<CENTER>
<FORM>
Elije un color:<BR>
<SELECT NAME="color">
<OPTION>Verde
<OPTION>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>
</FORM>
</CENTER>

Y el resultado:

Existe un atributo denominado SELECTED, que nos permite predefinir la selección que quedará por defecto. En nuestro ejemplo, podríamos querer que el color Rojo estuviera seleccionado; en este caso:

<OPTION SELECTED >Rojo

Hemos de tener en cuenta que lógicamente, solo uno podrá llevar el atributo SELECTED.

Otra forma de mostrar un menú de selección es mostrando todos sus valores, para tener una visión global de todos ellos y nos cueste menos decidir. Por ejemplo:

<FORM>
<I>Lista de la compra:</I><BR>
<CENTER>
<SELECT NAME="compra"
SIZE="6">
<OPTION VALUE="Fruta">
Fruta
<OPTION VALUE="Verdura">
Verdura
<OPTION VALUE="Ternera">
Ternera
<OPTION VALUE="Mantequilla">
Mantequilla
<OPTION VALUE="Salchichas">
Salchichas
<OPTION VALUE="Pasta">
Pasta
</SELECT>
</CENTER>
<P>
<INPUT TYPE="submit"
VALUE="Enviar lista de la compra">
</FORM>

Y el resultado:

Fíjate que con tan sólo añadir que el tamaño sea 6 (SIZE="6") el desplegable queda abierto y muestra todas las selecciones que son, precisamente 6. Si hubieran sido 7 opciones y el tamaño "SIZE" hubiera sido 6, entonces aparecería una barra de desplazamiento, de este modo:

Incluso podríamos hacer varias selecciones si pulsamos el botón "CTRL" (control) de nuestro teclado, al mismo tiempo que hacemos click con el ratón, con tan sólo añadir a SELECT el atributo multiple. ¡Pruébalo!.

El código sería:

<SELECT NAME="compra" SIZE="6" multiple>

En nuestra próxima entrega, analizaremos la creación de formularios con nuestro programa de diseño web Trellian Webpage, así como ejemplos específicos de formularios, la forma de realizar los envíos y otros detalles importantes para que funcionen sin problemas.