TEXTAREA.

Vamos a conocer como armar su estructura del textarea y las partes que la conforman.

Para comenzar con un textarea basico, vamos a comenzar con un textarea de texto.

<textarea>Texto</textarea>

Este seria el código basico de un textarea.

Ahora pasamos a las opciones avanzadas.

dentro del cierre del textarea le podemos agregar estos valores.

propiedades/valores	descripción
widht	Ancho del campo del textarea.
Height	Alto del campo del textarea.
cols	Numero de columnas, tambien es el ancho del campo.
rows	Numero de filas, tambien es el alto del campo.
Name	Nombre que contendra el campo, por ejemplo de code.
readonly	Con este valor, nadie podra editar el texto en el campo.
disable	Bloqueará el campo.
maxlength	Limite de texto en el campo.
placeholder	Texto previo en el campo.
resize	Con este valor css, no se podra ajustar al usuario como quiere, se bloqueara las dimensiones.
onClick select	Este es un valor en javascript, que permitirá selecionar el texto con un clic.
onclick select boton	Este es el mismo valor de selecionar pero con la diferencia con un boton para hacerlo.
onMouseOver	Selecionar todo el texto al pasar el mouse.

Agregandole width le podemos dar un ancho al campo.
Código: <textarea style="width:50%">Texto de ejemplo</textarea>

Resultado:

Texto de ejemplo

---

Agregandole height le podemos dar un alto al campo.
Código: <textarea style="height:100px">Texto de ejemplo</textarea>

Resultado:


Texto de ejemplo

---

Con este metodo de cols tambien se puede ajustar al ancho, pero es un uso parecido al width ya que es uso de columnas.
Código: <textarea cols="20">Texto de ejemplo</textarea>

Resultado:

Texto de ejemplo

---

Con este metodo de rows tambien se puede similar el alto, pero es uso distinto porque viene siendo las filas.
Código: <textarea rows="5">Texto de ejemplo</textarea>

Resultado:

Texto de ejemplo

---

Este valor name no cambiaria mucho el aspecto, ya que le da un nombre al valor si queremos enviar un valor.
Código: <textarea name="text">Texto de ejemplo</textarea>

Resultado:

Texto de ejemplo

---

Este valor readonly es muy util al momento de generar un texto para que no se pueda cambiar, lo que hace este valor es conservar el texto que esta dentro, sin que nadie lo pueda editar, ya sea usted el visitante de esta página.
Código: <textarea readonly>Texto de ejemplo</textarea>

Resultado:

Texto de ejemplo

---

El valor disable, permitira que no se pueda hacer clic, tampoco no se va a poder copiar el texto.
Código: <textarea disabled>Texto de ejemplo</textarea>

Resultado:

Texto de ejemplo

---

Este es un valor para usarlo con css, este valor va a permitir que el visitante no pueda agrandar/disminuir el campo, lo que hace este valor es mantener estatico el campo.
Código css : <style>textarea{resize:none}</style>

Resultado no activo!: ver antes

Texto de ejemplo

---

Comenzamos agregar javascript en el textarea. Este script va a permitir cuando demos clic al campo, se selecione todo el texto que hay dentro.
Código: <textarea onClick="javascript:select();">Texto de ejemplo</textarea>

Resultado:

Texto de ejemplo

---

Usamos el mismo valor anterior de selecionar con un clic, pero este metodo va a ser mediante un boton.
Código: <form><textarea name="selboton">Texto de ejemplo</textarea><br /><input value="Seleccionar Todo" onclick="javascript:this.form.selboton.focus();this.form.selboton.select();" type="button" /></form>

Resultado:

Texto de ejemplo

---

Vamos a usar otro script pero este metodo va ser mediante el mouse, lo que hará es al pasar el mouse por el campo, se selecionará todo el texto que hay dentro.
Código: <textarea onMouseOver="this.focus()" onFocus="this.select()">Texto de ejemplo</textarea>

Resultado:

Texto de ejemplo

---

Vamos agregarle un valor maximo del texto que se puede agregar en el campo del textarea para los visitantes. El valor 100 son las 100 caracteres que van a poder agregarse.
Código: <textarea maxlength="100">Texto de ejemplo</textarea>

Resultado:

Texto de ejemplo

---

Podemos agregarle un texto previo antes de comenzar a escribir en el campo, por ejemplo, escribe aqui..
Código: <textarea placeholder="Escribe aqui..."></textarea>

Resultado:

---