Cajas de texto o textarea. Varios tipos.

Aquí van a conocer distintos tipos de cajas de texto o textarea, que sirven para poner códigos, texto, fotos, y todo lo que se les ocurra poner.

Estas cajas de texto son de mucha utilidad para códigos HTML, y otos, ya que el navegador lo lee como simpre texto y no lo modifica ni lo manipula. Es usando este tipo de cajas de texto que yo les dejo los códigos a ustedes para que los copien y peguen en su sitio web.

1- Caja de texto o textarea simple.

El código sería así:

<textarea>Texto o código</textarea>

 A la etiqueta <textarea> le podemos agregar algunos atributos como cols (alto) y rows (ancho) y así controlaremos las dimensiones de la caja de texto.

Veamos un ejemplo:

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

La caja de texto se vería de la siguiente manera:

2- 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.

Vamos a ver en código:

<textarea rows="20" cols="10" onMouseOver="this.focus()" onFocus="this.select()" input type="text" name="emailaddr" value="your e-mail" size="31" onMouseOver="this.focus()" onFocus="this.select()">Si colocas el cursor sobre este recuadro se seleccionará todo el contenido. Puede ser código HTLM o texto.</textarea>

3- Caja de texto 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.

veamos el código:

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

4- Caja de texto o textarea, transparente, sin bordes.

Bueno veamos lo que podemos hacer. Tenemos muchas opciones veamos

Nº 1- Código que podemos 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>

Nº 2- 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>

5- Caja de texto o textarea, deslizable.

Bueno este lo hice yo experimentando y se los dejo a ustedes. Esta caja de texto es la que yo uso para poner los códigos que les muestro en otras secciones

Vamos al código, se los voy a poner con diferentes colores para que diferencien las partes de la misma.

<div class="divspoiler"><input type="button" value="Poner Código en mi WEB" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar Código'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Poner Código en mi WEB'; }" /></div><div><div class="spoiler" style="display: none;"><textarea name="comentarios" rows="10" cols="40">Escribe aquí tus comentarios</textarea></div></div>

La caja quedaria de la siguiente manera: una caja de texto insertada dentro de un spoiler.