Textarea o Caja de texto y códigos. Tipos

El tag <textarea> puede resultar de utilidad para:
– Publicar un código en una entrada de forma que evita que los navegadores lo manipulen y modifiquen.
– Colocar un texto largo en un recuadro de forma que controlas el espacio que ocupa dentro de una entrada o post.

A. Textarea simple:
1. Colocando un código o texto que desees mostrar entre <textarea> y </textarea> :
<textarea>
Texto o código
</textarea>

2. Si se añade a la orden <textarea>, las propiedades “rows” (alto) y “cols” (ancho) controlarán las dimensiones de la misma. Sólo habría que variar las cifras de ambos parámetros o tags.

Ejemplo:
<textarea rows=”5″ cols=”18″>
AQUI VA EL CODIGO O TEXTO
QUE DESEAS MOSTRAR
DENTRO DE TU CAJA DE TEXTO
O TEXTAREA.
</textarea>

B. Textarea, o Caja de texto, con selección automática del contenido.

Podemos realizar una textarea donde añadir un código o texto con una peculiaridad:
Al colocar el cursor encima, o hacer clik sobre ella, se seleccionará todo su contenido. Es una fórmula que ahorra al usuario arrastrar el cursor por toda la zona para copiar el contenido.

<textarea rows=”2″ cols=”5″ onMouseOver=”this.focus()” onFocus=”this.select()” input type=”text” name=”emailaddr” value=”your e-mail” size=”31″ onMouseOver=”this.focus()” onFocus=”this.select()”></textarea>
Ejemplo:
** Importante: el texto o código a introducir se coloca antes de </textarea>
** Recordar: con las propiedades “rows” (alto) y “cols” (ancho) se pueden controlar las dimensiones de la misma. Sólo habría que variar las cifras.

C. Caja de texto, (Textarea), con botón de selección automática del contenido.
A través de un botón puedes seleccionar todo el contenido que esté situado dentro de la textarea.
<center><form name=”select_all”>
<textarea rows=”10″ cols=”30″ name=”text_area”>
AQUI VA EL TEXTO O CODIGO A MOSTRAR
</textarea>
<input value=”Seleccionar texto” onclick=”javascript:this.form.text_area.focus();this.form.text_area.select();” type=”button”/></form></center>

Sustituye AQUI VA EL TEXTO O CODIGO A MOSTRAR por el texto o código que vayas a colocar en la cajita:

D. Textarea transparente, sin bordes, para incrustar en el post o entrada.
En esta tipología podemos introducir todo un párrafo, código, imagen, post, o lo que se nos antoje. No es de mis preferidas al parecerme incómoda.
(Paso a anotarla siguiendo las instrucciones de Jaime y su Balcón para que quede a modo de apunte personal.)
■ Código que puedes colocar en una entrada:
<span id=”fullpost”><div align=”center”><pre style=”overflow: auto; width: 410px; height: 160px;”><div align=”left”><span >
AQUI EL TEXTO O POST
</span></div></pre></div>
– También se pueden colocar imágenes y texto, de forma que todo quede dentro de la textarea. El código resultante sería:
<span id=”fullpost”><div align=”center”><pre style=”overflow: auto; width: 410px; height: 160px;”><div align=”left”><span >
<img src=”URL DE LA IMAGEN”/>AQUI EL TEXTO O POST
</span></div></pre></div>
– Ejemplo con texto:

Puedes colocar en este espacio de la textarea todo lo que necesites. No importa su extensión. Recomiendo colocar un aviso por si hubiera algún despistado.

– Ejemplo con imagen y texto:

Puedes colocar en este espacio de la textarea todo lo que necesites. No importa su extensión. Recomiendo colocar un aviso por si hubiera algún despistado.

*Para modificar algunos detalles:

– Situar la caja o textarea en center significa centrado. Para colocarla a la izquierda, escribe left y a la derecha, escribe right.
– width: 410px; Es el ancho de la caja que puede personalizarse variando el número para modificar el tamaño de textarea.
– height: 160px; Es el alto de la caja que puede personalizarse variando el número para modificar el tamaño de textarea.