HTML - Textarea (Area de texto)

  »   HTML  »   Tutorial HTML - Textarea (Area de texto)

Las áreas de texto de esta clase son usadas para comentarios en los blogs y paginas web, o cualquier otro propósito que requiera un espacio extensible para introducir texto.

Para crear un área de texto necesitaremos una etiqueta de abertura y de cierre como esta:

html<textarea> Área de texto!</textarea>

Demo

Textarea - Áreas de texto. El tamaño

Para cambiar el tamaño estándar de un área de texto usaremos columnas y filas (cols y rows). Estos atributos tendrán valores numéricos. Cuanto más grande sea el valor, más grande será el área de texto.

html<textarea cols="50" rows="2">Área de texto!</textarea>

<textarea cols="40" rows="5">Área de texto!</textarea>

<textarea cols="20" rows="10">Área de texto!</textarea>

Demo

Textarea - El atributo wrap

Este atributo de la etiqueta <textarea> establecerá la forma en la cual el texto reaccionará cuando éste llegue el final de la linea.

Wrap tendrá uno de estos tres valores: hard, soft, off.

  • Hard - ubica un enter al final de cada linea y envía el texto en el mismo formato en el que fue introducido.
  • Soft - ubica un enter al final de cada linea, pero a diferencia de Hard éste envía el texto en un formato libre.
  • Off - este no formatea el texto de ninguna manera, deja el texto en una única linea continua.

El atributo Hard/Soft

html<textarea cols="20" rows="5" wrap="hard">Hard - ubica un enter al final de cada linea y envía el texto en el mismo formato en el que fue introducido.</textarea>

Demo

El atributo off

html<textarea cols="20" rows="5" wrap="off">Off -  este no formatea el texto de ninguna manera, deja el texto en una única linea continua.</textarea>

Demo

Área de texto - El atributo readonly

Dependiendo del valor de este atributo, el usuario puede (o no) cambiar el contenido del área de texto. El atributo readonly puede tener los valores 'yes' o 'no'.

html<textarea cols="20" rows="5" wrap="hard" readonly="yes">Como puedes ver este texto no puede ser modificado. En caso de que el valor 'no' sea elegido, se obtendrá el resultado opuesto.</textarea>

Demo

Como puedes ver este texto no puede ser modificado. En caso de que el valor 'no' sea elegido se obtendrá el resultado opuesto. Sin embargo este no puede ser modificado, puede ser subrayado o copiado con CTRL-C o click derecho/copiar.

Área de texto - El atributo disabled

El atributo disabled no es muy diferente del readonly. El texto se mostrará en gris, desactivando al mismo tiempo la posibilidad de modificar el texto contenido en el área de texto.

html<textarea cols="20" rows="5" wrap="hard" disabled="yes">El atributo disabled no es muy diferente del readonly. El texto se mostrará en gris, desactivando al mismo tiempo la posibilidad de modificar el texto contenido en el área de texto.</textarea>

Demo

Tendrás que practicar un poco con estos atributos para mejorar tus habilidades. Buena suerte!