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>



Código o texto a mostrar

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>


<br />AQUI VA EL CODIGO O TEXTO<br />QUE DESEAS MOSTRAR<br />DENTRO DE TU CAJA DE TEXTO<br />O TEXTAREA.<br />



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:
Si colocas el cursor sobre este recuadro se seleccionará todo el contenido. Puede ser código HTLM o texto.

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

<br />Esta es una forma más de hacer una textarea con un botón. Colocar un código o texto es sencillo. Sin ninguna dificultad<br />

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.

Un apunte más