<textarea>

<textarea> es el control de formulario para capturar texto de múltiples líneas. Mientras que <input type="text"> acepta una sola línea, <textarea> permite al usuario escribir párrafos enteros: comentarios, mensajes, descripciones, código, cualquier contenido donde la longitud es variable y el formato puede incluir saltos de línea.

A diferencia de la mayoría de los controles de formulario, <textarea> no es un void element: tiene etiqueta de apertura y etiqueta de cierre, y el texto que aparece en el campo al cargar la página va entre esas dos etiquetas — no en un atributo value. Este es el error más común con <textarea>: intentar precargar texto con value="...", que el navegador silenciosamente ignora. El texto inicial va entre <textarea> y </textarea>.

Otra diferencia respecto a <input>: <textarea> es redimensionable por el usuario. En la mayoría de los navegadores modernos, el usuario puede arrastrar el manejador de la esquina inferior derecha para agrandar o achicar el campo. Este comportamiento puede controlarse con la propiedad CSS resize. El tamaño inicial se define con los atributos rows y cols (en caracteres), aunque en la práctica se controla con CSS (width, height, min-height).

Cómo funciona

<textarea> envía su contenido como valor del par name=contenido al enviarse el formulario. El valor incluye los saltos de línea que el usuario haya introducido. Si el textarea tiene texto prefijado entre las etiquetas, ese texto es el valor inicial — el usuario puede modificarlo.

El tamaño visible del textarea es independiente del límite de texto: rows="4" muestra 4 líneas de alto, pero el usuario puede escribir más (el campo agrega scroll). El límite de caracteres lo impone maxlength.

Modelo de contenido

<textarea> puede contener solo texto (sin elementos HTML). Cualquier etiqueta dentro de <textarea> se trata como texto literal, no como HTML. Display por defecto: inline-block.

Sintaxis

<!-- Textarea vacío (valor vacío al cargar) -->
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="4"></textarea>

<!-- Textarea con texto prefijado: el texto va ENTRE las etiquetas -->
<textarea id="bio" name="bio" rows="5">Este es el texto inicial que el usuario puede editar.</textarea>

<!-- ❌ MAL: value no existe en textarea (el navegador lo ignora) -->
<textarea name="comentario" value="Texto aquí"></textarea>

<!-- ✅ BIEN: el texto prefijado va entre las etiquetas -->
<textarea name="comentario">Texto aquí</textarea>

Atributos

name — clave de envío

Igual que en <input>: la clave del par nombre=valor en la petición HTTP. Sin name, el contenido del textarea no se incluye en el envío.

rows — altura visible

Cantidad de líneas de texto visibles. Define la altura inicial del campo en “caracteres de alto”. No limita la cantidad de líneas que el usuario puede escribir.

<textarea name="descripcion" rows="8"></textarea>

Default: 2 (varía según el navegador). En la práctica, se controla con CSS (height, min-height).

cols — ancho visible

Ancho del campo en “caracteres de ancho” (la anchura de la letra ‘m’). En la práctica casi siempre se controla con CSS (width: 100%).

Default: 20. Rara vez se usa explícitamente en proyectos modernos.

maxlength — límite de caracteres

Número máximo de caracteres que el campo acepta. El navegador impide escribir más.

<textarea name="comentario" maxlength="500"></textarea>

Importante: maxlength no muestra automáticamente un contador de caracteres restantes — eso requiere JavaScript.

minlength — longitud mínima

El formulario no se envía si el textarea tiene menos caracteres que minlength. El navegador muestra un mensaje de error de validación.

<textarea name="descripcion" minlength="20" maxlength="500"></textarea>

placeholder — texto de ayuda

Texto que aparece cuando el textarea está vacío. Desaparece al escribir.

<textarea name="comentario" placeholder="Contanos tu experiencia (máximo 500 caracteres)"></textarea>

No reemplaza al <label> — ver la entrada de <label>.

required — campo obligatorio

Atributo booleano. El formulario no se envía si el textarea está vacío.

<textarea name="mensaje" required></textarea>

CSS: :required / :optional.

disabled — campo deshabilitado

El textarea no es editable, no recibe foco, y su valor no se envía al servidor.

readonly — solo lectura

El usuario puede ver y copiar el texto pero no modificarlo. El valor sí se envía al servidor.

resize con CSS

El comportamiento de redimensionado se controla con la propiedad CSS resize:

/* Deshabilitar el redimensionado */
textarea {
  resize: none;
}

/* Solo redimensionado vertical (lo más útil) */
textarea {
  resize: vertical;
}

/* Solo horizontal */
textarea {
  resize: horizontal;
}

Recomendación: resize: vertical es la mejor opción en la mayoría de casos — el usuario puede agrandar el campo hacia abajo si necesita más espacio, pero no puede romper el layout horizontal.

Estados e interacción

Accesibilidad

<textarea> sigue las mismas reglas que <input>: necesita un <label> asociado por for/id o de forma envolvente. Sin label, el lector de pantalla no anuncia el nombre del campo.

<label for="bio">Sobre mí</label>
<textarea id="bio" name="bio" rows="4"></textarea>

El rol implícito es textbox con aria-multiline="true". Los lectores de pantalla informan al usuario que puede escribir múltiples líneas.

Notas, gotchas e interacción

• El valor prefijado va entre etiquetas, NO en value. <textarea value="texto"> es ignorado silenciosamente. La forma correcta: <textarea>texto</textarea>.
• Espacio entre etiquetas de apertura y cierre. Si hay un espacio o salto de línea entre <textarea> y </textarea>, ese espacio/salto forma parte del valor inicial. <textarea>\n</textarea> no es lo mismo que <textarea></textarea>.
• No es un void element. Siempre necesita etiqueta de cierre.
• El texto dentro del textarea es literal. No se interpretan etiquetas HTML. Si escribís <b>negrita</b> en un textarea, el usuario verá eso textualmente, no negrita.

Vigente / legacy

<textarea> está completamente vigente. El atributo wrap (para controlar si el texto se envía con saltos de línea automáticos o no) tiene soporte pero uso limitado en la práctica moderna. Los atributos de presentación align y similares son legacy desde HTML5.