Docs ejecutables de HTML: Textarea en HTML

Q: ¿Cómo se crea un textarea en HTML?

Escribe dentro de un formulario, con un . A diferencia de , tiene etiqueta de cierre, y lo que haya entre las etiquetas es el texto inicial.

Q: ¿Cómo pongo el valor por defecto de un textarea?

Pon el texto entre las etiquetas: Hola . Un textarea no tiene atributo value en HTML. En JavaScript, lee y asigna textarea.value.

Q: ¿Cómo evito que se pueda redimensionar un textarea?

Pon resize: none en el CSS. resize: vertical suele ser más amable: el lector puede hacerlo más alto para textos largos, pero no puede romper tu diseño arrastrándolo a lo ancho.

Q: ¿Cómo limito el número de caracteres de un textarea?

Añade maxlength="280". El navegador deja de aceptar texto al llegar a esa longitud. Muestra un contador al lado, actualizado en el evento input, para que el lector sepa cuánto espacio le queda, y comprueba también la longitud en el servidor.

Cómo hacer un textarea

<textarea> es un campo de texto de más de una línea: mensajes, comentarios, descripciones. rows fija su altura visible en líneas. Escribe unas líneas y pulsa Send:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Hay dos diferencias con <input>: un textarea necesita etiqueta de cierre, y su texto inicial va entre las etiquetas en lugar de en un atributo value. Su name se envía con el texto como valor, saltos de línea incluidos.

Atributos de textarea

Atributo	Hace
`name`	La clave con la que se envía el texto
`rows`	Altura visible en líneas (2 por defecto)
`cols`	Ancho visible en caracteres (20 por defecto); el `width` de CSS suele ser mejor
`placeholder`	Una pista que se muestra mientras está vacío
`maxlength`, `minlength`	Límites de longitud en caracteres
`required`	No puede estar vacío
`readonly`	Se puede seleccionar y copiar, no editar; se envía igualmente
`disabled`	No se puede usar; no se envía
`wrap`	`soft` (por defecto) o `hard`, ver más abajo
`spellcheck`	`true` o `false`

El texto por defecto va entre las etiquetas

Todo lo que hay entre <textarea> y </textarea> es el texto inicial, tal cual está escrito: espacios, tabulaciones y saltos de línea incluidos. Solo se ignora un salto de línea justo después de la etiqueta de apertura. Eso convierte la sangría en una trampa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

El segundo textarea empieza con cuatro espacios y termina con un salto de línea y dos espacios más, que el lector tiene que borrar. Escribe el texto por defecto pegado a las etiquetas.

El HTML dentro de un textarea no se interpreta; <b>hi</b> entre las etiquetas aparece como ese texto literal.

Ancho, redimensionado y crecimiento automático

Los navegadores permiten al lector arrastrar la esquina para redimensionar un textarea. resize de CSS lo limita, y width: 100% con box-sizing: border-box hace que ocupe exactamente su contenedor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

El último reinicia su altura y luego la fija en scrollHeight (la altura de su contenido y su padding) más sus bordes, con cada pulsación de tecla. Escribe varias líneas en él: nunca muestra una barra de desplazamiento. resize: vertical es el valor por defecto más amable: las respuestas largas tienen sitio, y nadie puede arrastrar el campo más ancho que el diseño.

Los navegadores basados en Chromium pueden hacer el crecimiento automático solo con CSS mediante field-sizing: content. Los navegadores que no lo admiten ignoran la línea y mantienen el tamaño normal, así que es seguro añadirlo, pero conserva el script si todos los lectores deben tener la caja que crece.

maxlength y un contador de caracteres

maxlength detiene la escritura en un número de caracteres. Por sí solo no avisa, así que el lector solo se da cuenta cuando deja de poder escribir. Un contador lo soluciona:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby hace que los lectores de pantalla lean el contador junto con el campo, y aria-live="polite" anuncia sus cambios entre pulsaciones. maxlength solo lo impone el navegador, así que el servidor también tiene que comprobar la longitud.

Saltos de línea en el texto enviado

Los saltos de línea del lector se envían con el texto. En los datos enviados, cada uno se convierte en una pareja de retorno de carro y avance de línea (%0D%0A en un formulario codificado como URL), que es lo que esperan la mayoría de los servidores. Para mostrar después el texto en una página con sus saltos de línea, conviértelos en <br> al imprimirlos o da al elemento el estilo white-space: pre-line.

wrap="hard" (que necesita cols) va más allá: también inserta saltos de línea donde el texto se ajustaba visualmente, así que el servidor recibe líneas de no más de cols caracteres. El valor por defecto, wrap="soft", solo envía los saltos que escribió el lector.

Dar estilo a un textarea

Chrome y Firefox dan a los textareas una fuente monoespaciada de unos 13px, y por eso un textarea a menudo desentona. font: inherit lo arregla. Mantén un estilo de foco visible si cambias el borde:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

El texto del placeholder debe tener un contraste legible; el gris claro que usan muchos diseños cuesta de leer. Y, como en todos los campos, el placeholder no es una etiqueta: desaparece en cuanto el lector escribe. Las etiquetas se explican en label en HTML.

Errores comunes

<textarea value="...">. No existe el atributo value; pon el texto entre las etiquetas.
Sangrar el texto por defecto junto con el HTML. Los espacios pasan a formar parte del valor.
Un <textarea /> con autocierre. No es un elemento vacío; sin </textarea>, el resto de la página queda dentro de él como texto.
Sin font: inherit, así que el campo usa una fuente monoespaciada pequeña.
resize: none con una altura fija pequeña. Las respuestas largas acaban en una caja diminuta con desplazamiento.
Confiar solo en maxlength. Valida también la longitud en el servidor.

Preguntas frecuentes

¿Cómo se crea un textarea en HTML?

Escribe <textarea name="message" rows="4"></textarea> dentro de un formulario, con un <label>. A diferencia de <input>, tiene etiqueta de cierre, y lo que haya entre las etiquetas es el texto inicial.

¿Cómo pongo el valor por defecto de un textarea?

Pon el texto entre las etiquetas: <textarea name="bio">Hola</textarea>. Un textarea no tiene atributo value en HTML. En JavaScript, lee y asigna textarea.value.

¿Cómo evito que se pueda redimensionar un textarea?

Pon resize: none en el CSS. resize: vertical suele ser más amable: el lector puede hacerlo más alto para textos largos, pero no puede romper tu diseño arrastrándolo a lo ancho.

¿Cómo limito el número de caracteres de un textarea?

Añade maxlength="280". El navegador deja de aceptar texto al llegar a esa longitud. Muestra un contador al lado, actualizado en el evento input, para que el lector sepa cuánto espacio le queda, y comprueba también la longitud en el servidor.

¿Por qué mi textarea usa otra fuente?

Chrome y Firefox dan a los textareas una fuente monoespaciada de unos 13px por defecto. Añade font: inherit para que coincida con el resto de la página.

Conceptos relacionados