Cajas de texto multilínea: TEXTAREA

Las cajas de texto multilínea o áreas de texto son unos campos que funcionan de manera similar a un editor de texto muy sencillo en el que el usuario puede escribir. Al contrario de lo que sucedía con las cajas de texto convencionales (<INPUT TYPE=»text»>), en esta ocasión será posible escribir varias líneas de texto, lo que es muy útil para campos en los que se requiere una respuesta extensa. Por ejemplo, si deseamos que el usuario pueda escribir el texto de un mail , o escribir una serie de comentarios largos, las áreas de texto serán tremendamente útiles.

La etiqueta usada para insertar este nuevo control es  TEXTAREA, que consta de cuatro atributos:

• NAME: El nombre que queremos asignarle al control. Como siempre, este nombre será enviado junto con los datos del área de texto al mandar el formulario.
• ROWS: El número de líneas de la caja de texto.
• COLS: El número de caracteres visibles de cada línea. Este atributo es similar al atributo SIZE que vimos en las cajas de texto convencionales.

La etiqueta TEXTAREA está compuesta por una instrucción de inicio y una instrucción de fin, siendo obligatorio el uso de ambas. Entre ellas únicamente podrá insertarse texto llano (sin ninguna etiqueta HTML) y éste será mostrado como contenido inicial del área de texto. Veamos un ejemplo:

En la figura 12.21 podemos ver este código tal y como es mostrado por Internet Explorer 4.0:

Figura 12.21. Las áreas de texto (<TEXTAREA> </TEXTAREA>) permiten al usuario introducir texto de varias líneas como si de un sencillo editor de texto se tratara.

Y en la figura 12.22 el mismo visto con Lynx:

Figura 12.22. Lynx muestra las áreas de texto como un conjunto de líneas (tantas como hemos indicado con el atributo COLS) sobre las que el usuario podrá escribir.

Pulsando sobre el área de texto podremos empezar a escribir, al igual que hacíamos en las cajas de texto, pero con la diferencia de que ahora podremos pulsar ENTER cuando queramos para cambiar de línea.

Si no pulsamos ENTER y llegamos al final de la línea el navegador debe decidir que hacer. Esta decisión variará, por lo general, del navegador que estemos usando. Algunos, como Internet Explorer 4.0, cambian automáticamente a la siguiente línea (text wrapping), otros simplemente desplazarán el texto como ocurría con las cajas de texto y no cambiará de línea hasta que pulsemos ENTER y una minoría simplemente ignorará lo que pulsemos hasta que cambiemos de línea pulsando esta misma tecla.

El navegador Netscape introdujo una extensión al lenguaje HTML estándar, que actualmente es soportada también por Internet Explorer , y que nos permitirá tener un mayor control sobre la forma de actuar del navegador cuando se llegue al final de la línea. Esta extensión se basa en un nuevo atributo, WRAP , que puede tomar los siguientes valores:

• WRAP=OFF: Es el valor por defecto en Netscape Navigator y provocará que el texto sea mostrado en una sola línea, desplazándose hacia la izquierda si es necesario, hasta que el usuario pulse ENTER.
• WRAP=SOFT: Este es el valor por defecto en Internet Explorer y provoca que el navegador pase automáticamente a la siguiente línea cuando se llega al final del área reservada. Sin embargo cuando se pulsa el botón de envío, antes de mandar el contenido, el propio navegador vuelve a juntar todo el texto que fue escrito seguido en una sola línea.
• WRAP=HARD: Al igual que el valor anterior, éste provoca que el navegador pase automáticamente a la siguiente línea, pero ahora la información se mandará al servidor Web con los saltos de línea, de la misma manera que si hubiésemos pulsado ENTER nosotros mismos al llegar al final de cada línea.

En la figura 12.23 vemos una página con los tres tipos de área de texto que hemos incluido en el directorio textarea para que el lector pueda probarlos. La diferencia entre los dos últimos tipos no es apreciable por el usuario, pero si existen diferencias en el mensaje que se envía al servidor.

La etiqueta TEXTAREA también admite el atributo ALIGN y las extensiones introducidas por Microsoft que hemos visto anteriormente. Nos referimos a los atributos DISABLED, READONLY, TABINDEX, NOTAB y TITLE.

Concluiremos las áreas de texto con un resumen de la etiqueta TEXTAREA y sus atributos:

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1