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:

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: