La etiqueta HTML <textarea>

Controles: Campos de entrada de texto extensos


—— ——

Si queremos indicar un campo para escribir textos extensos, probablemente la etiqueta HTML <input> se nos quede corta o sea incómoda. Lo más apropiado sería utilizar la etiqueta HTML <textarea>, que nos permite escribir párrafos y líneas de contenido de texto sin restricciones.

Esta etiqueta tiene algunos atributos que podría ser interesante destacar:

Atributo Descripción
cols Número de carácteres que caben en horizontal (columnas).
rows Número de carácteres que caben en vertical (filas).
wrap Con soft (por defecto) o hard puedes indicar si el texto debe enviarse ajustado o tal cuál se escribió.

Esta etiqueta nos permite añadir gran cantidad de texto, ya que las etiquetas <input type="text"> sólo nos permiten escribir una línea de texto y es muy incómodo si nuestra intención es escribir grandes cantidades de texto:

<form method="post" action="/send/">
  Nombre: <input name="nickname">
  <textarea name="text">
    Este es el valor de texto por defecto
  </textarea>
</form>

Observa que en este caso, la etiqueta <textarea> tiene un valor por defecto, pero no lo hemos indicado en el atributo value como hacíamos en la etiqueta <input>, sino que aquí lo incluímos en el interior de la etiqueta <textarea>, ya que esta etiqueta si tiene etiqueta de cierre.

Atributos cols y rows

Los atributos cols y rows nos permiten aumentar el tamaño de ancho y alto del área de texto, así como indicar si queremos que se modifique la apariencia visual del párrafo al enviar al formulario con el atributo wrap. Con el valor soft (valor por defecto) el texto se enviará literalmente, mientras que con el valor hard se añadirán nuevas líneas (\n) para ajustar el texto enviado a como se ve en el navegador.

Un ejemplo básico de la etiqueta HTML <textarea>:

<form method="post" action="/send/">
  Nombre: <input name="nickname">
  <textarea name="text" cols="80" rows="10"
            placeholder="Queridos Reyes Magos, este año me he portado muy bien..."></textarea>
</form>

Recuerda nuevamente, que el valor por defecto (interior de la etiqueta) y el placeholder no es lo mismo.

Ten en cuenta que a veces puedes tener el contenido de la etiqueta <textarea> vacía, pero tienes espacios, por lo que cuentan como texto y no se ve la sugerencia visual. Para ver el placeholder no debes tener absolutamente ningún contenido.

Mejora de <textarea> (WYSIWYG)

Existen algunas librerías de Javascript que permiten mejorar, «enriquecer» y ampliar la funcionalidad de estas áreas de texto, permitiendo realizar ciertas tareas visuales como si fueran pequeños editores de texto: fragmentos en negrita, cursiva, imágenes, tablas, etc...

Este tipo de librerías se suelen denominar editores WYSIWYG (lo que ves es lo que obtienes) y existen muchos y muy variados. Algunos de ellos son los siguientes:

Nombre Descripción
Ligeros
Quill Editor WYSIWYG sencillo, ligero y atractivo.
Medium Editor Al estilo de la web Medium.
Woofmark Basado en DOM, modular, progresivo y soporta Markdown.
EtherPad Editor colaborativo, en tiempo real y escalable.
ProseMirror Editor WYSIWYG semántico y modular.
Trix Editor WYSIWYG sencillo y bonito.
Jodit Editor 3 Editor WYSIWYG escrito en Typescript sin librerías adicionales.
Slate Editor WYSIWYG personalizable.
Clásicos (y algo más pesados)
Aloha Editor Uno de los editores WYSIWYG más conocidos.
Tiny (antes TinyMCE) Probablemente, el primer editor WYSIWYG en popularizarse.
CKEditor5 Editor WYSIWYG bastante popular.
AlloyEditor Editor moderno WYSIWYG basado en CKEditor.
TrumboWYG Incorpora soporte de plugins. Requiere jQuery.
SummerNote Requiere jQuery y Bootstrap.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev