[Tutoriales] ⌦HTML/CSS. Textarea o Caja de texto. Codigos y Tipos 1/2

//Tae Tae <3// 

Hola!!Como están? Ya veo que el blog empieza a tomar forma y para empezar con los tutoriales de blogger les traigo por primera vez como poner un textarea, los tipos y como personalizarla (esto sera en la segunda parte). Así que, vamos allá.

---

1. ¿Qué es una "textarea"? El elemento textarea representa un campo para la entrada de texto multilínea. El control asociado es una caja de texto que permite a los usuarios editar múltiples lineas de texto regular. Los controles textarea son útiles para recolectar o editar lineas largas de texto como mensajes, contenido de archivos, listas, reseñas, artículos, etc........Khe?? Jajaja, para que entiendas mejor, a continuación te muestro un ejemplo. Código o texto a mostrar Pero no solo hay de ese tipo. Aunque lo que seguramente te preguntes es "¿y que se ponen?" pues sigue leyendo.....

---

2. Tipos de textarea y como se ponen A.Textarea simple: Colocando el texto que desees mostrar entre <textarea> y </textarea> al final o para cerrar.
Ejemplo [Codigo + Resultado]

---

<textarea>TEXTO A TU ELECCIÓN</textarea>

TEXTO A TU ELECCIÓN Si añades las propiedades "rows" y "cols"  al elemento <textarea>  estas actuaran como "alto" y "ancho" pudiendo modificar estas propiedades a tu gusto (Con cols se indica el numero de caracteres en horizontal y con rows en numero de filas o lineas) 

<textarea rows="6" cols="19">TEXTO A TU ELECCIÓN</textarea>

TEXTO A TU ELECCIÓN

/!\Importante: Estas propiedades se pueden aplicar a cualquier tipo de textarea

---

B.Textarea con selección automática al pasar el mouse: Este es un método que ayuda al usuario a ahorrarse el paso de seleccionar manualmente el contenido. Al pasar el mouse por la textarea se seleccionara todo automáticamente y simplemente se tendrá que ejecutar el comando Ctrl+co clic derecho y copiar.

Ejemplo

[Codigo + Resultado]

---

<textarea rows="6" cols="19" onMouseOver="this.focus()" "on.Focus()" input type="text" name="emailaddr" value="your e-mail" size"31" onMouseOver="this.focus()" onFocus="this.selec()">TEXTO A TU ELECCIÓN</textarea>

TEXTO A TU ELECCIÓN

---

C.Textarea con botón de selección: Esta, al igual que la anterior facilita la selección del contenido, pero con una ligera diferencia, a través del botón que se encuentra en la parte inferior se selecciona automáticamente.

Ejemplo

[Codigo + Resultado]

---

<center><form name="select_all"><textarea rows="6" cols="19" name="text_area">TEXTO A TU ELECCIÓN</textarea><input value="Seleccionar texto" onclick="javascript:this.form.text_area.focus();this.form.text_area.select();" type="button"/></form></center>

TEXTO A TU ELECCIÓN

---

D.Textarea transparente: Podemos introducir cualquier cosa, todo un párrafo, código, imagen, post, o lo que se nos antoje.

Ejemplo

[Codigo + Resultado]

---

<span id="fullpost"><div aling="center"><pre style="overflow: auto; width: 410px; height: 160px;"<div aling="left"><span>TEXTO A TU ELECCIÓN</span></div></pre></div>

También se pueden colocar imágenes y texto con el siguiente codigo

<span id="fullpost"><div aling="center"><pre style="overflow: auto; width: 410px; height: 160px;"<div aling="left"><span><img src="URL DE LA IMAGEN"/>TEXTO A TU ELECCIÓN</span></div></pre></div>

AQUI EL TEXTO O POST. 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.Aquí termina la primera parte de este tutorial, ya que si no seria muy agobiante ver tanto html y css junto jajaja. Espero que les haya sido de ayuda, cualquier duda/queja/sugerencia/petición/amenza de muerte (? xD es bienvenido, besos <3

---

Aquí termina la primera parte de este tutorial, si no se haría realmente agobiante ver tanto HTML y CSS junto, y no queremos eso hahaha xD. Cualquier duda/sugerencia/petición/amenaza de muerte (? xD es bienvenida, les dejo la segunda parte, besos <3.

//Da clic en el icono para ir a la parte 2//